300字范文 > vue中echarts 实现下钻（饼图为例）

vue中echarts 实现下钻（饼图为例）

时间：2019-06-19 13:16:01

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1.echarts图是以子组件的形式引入

import comChart from "/components/com-chart.vue"; //引入子组件charts

2.注册子组件

components: {comChart}

3.template中写入组件

//id 组件的唯一辨识，不能重复，因为是多图渲染，所以引用了变量// data 即option// @clickc 子组件调用父组件的方法（这里有坑）<com-chart ref="charts" :id="'right'+index" @clickc="clickc" :data="loadCharts(item,fatherData)"></com-chart>

4.子组件comChart页面，实现图形下钻和图形后退返回

（坑） $emit子组件调用父组件的方法需满足两个条件

<template><div ref="cc" :id="id" :data="data" class="comCharts"></div></template><script>const elementResizeDetectorMaker = require("element-resize-detector");export default {data() {return {chart: null,stack:[], //用来记录下钻的option数据top:false, //最上层};},watch: {data: {handler(newValue, oldValue) {this.drawChart(this.id, newValue);},deep: true,screenWidth: 0,},},props: ["id", "data", "drill"], //父组件的传值created() {},mounted() {this.drawChart(this.id, this.data);const that = this;const erd = elementResizeDetectorMaker();erd.listenTo(document.getElementById(this.id), function (element) {that.$nextTick(function () {that.chart.resize();});});},methods: {drawChart(id, data) {this.stack = [] //每次初始化清空栈optionthis.top = false const _this = this;this.chart = this.$echarts.init(document.getElementById(id));this.chart.clear();this.chart.setOption(data); //第一次渲染图形this.stack.push(data) //push第一次的图形optionthis.chart.on("click", function (param) {//监听是否有点击下钻行为，param 点击行为的返回值//这里是因为多个图形渲染，有些图形不提供下钻功能即根据props中drill判断if (_this.drill !== undefined) {// $emit子组件调用父组件的方法需满足两个条件 1.this 需要重定义，否则无法指向vue 2.方法需要在组件中声明，不然可能会无法触发_this.$emit("clickc", param); } else {return;}});},parentHandleclick(res) {//父组件调用的方法，其中res 是返回的新option数据let _this = this; //this需重新声明// 这里是option中如果需要有返回的功能的话，则在option需要添加属性 graphicres.graphic = [{//官网中使用的是 type = 'text' 这里使用的type: "image",type: "image",right: 50,top: 10,style: {//官网上是直接写url,可是怎么也加载不出图片，这里需要reqiureimage: require('../assets/img/gis-back.png'), height:18,width:18,},// 当返回键被点击时，需要给chart 重新setOptiononclick: function () {// 栈中始终要保持最初的optionif(_this.stack.length>1){// 当每次点击返回时，删除栈中的最后一个option_this.stack.pop();}else{//this.top 记录是否是最初的图形optionthis.top = true_this.$notify({title: '警告',message: '请勿重复点击',type: 'warning'});}if(this.top){return}else{//_this.stack 的最后一个数据重新渲染图形_this.chart.setOption(_this.stack[_this.stack.length-1]);}},},];//这里是点击下钻时图形的重新渲染this.chart.setOption(res);this.stack.push(res)},},beforeDestroy() {if (this.chart) {this.chart.clear();}},};</script><style scoped>.comCharts {margin-top: 0px;height: 200px;width: 100%;}</style>

5.父组件的方法调用

loadCharts() {// 返回首次的optionlet option3= {color: ["#6AC2E3","#5A8DEF","#6C5DEF","#ECB718","#57D0A1","#5C6F8F",],title: {left: "center",},tooltip: {trigger: "item",},legend: {orient: "horizontal",bottom: "15px",icon: "circle",textStyle: {color: "rgba(251, 249, 249, 1)",},type: "scroll",itemWidth: 7.5,itemHeight: 7.5,},series: [{name: "",type: "pie",radius: "50%",data: [ //自己的数据],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},labelLine: {length: 15,length2: 5,},label: {show: true,formatter: "{d}%",color: "rgba(248, 244, 244, 1)",},},],}return option3},//子组件触发的方法clickc(param){//params 返回数据console.log('click',param)let dataE = {caList:[],gtList:[]}if(param.data.data[0] !== undefined && param.data.data[0].length > 0){dataE.caList = param.data.data[0]}if(param.data.data[1] !== undefined && param.data.data[1].length > 0){dataE.gtList = param.data.data[1]}// 这里是我自己的方法返回新的optionlet res = this.loadCharts(param.data.tm,dataE)if(param.data.tm === "v0"){// 因为是多个图形，所以我是以数组的方式来判断的//调用对应图形的子组件方法 parentHandleclick(res) 传入参数res实现下钻// this.$ refs[`'echarts'${变量名}`] this.$refs.charts[0].parentHandleclick(res);} if(param.data.tm === "v1"){this.$refs.charts[1].parentHandleclick(res);} if(param.data.tm === "v2"){this.$refs.charts[2].parentHandleclick(res);}},