echarts图形点击事件触发以及echarts图形点击事件多次触发问题解决

业务&＃xff1a;

按年统计数据。

1、如果点击某一年&＃xff0c;自动跳转到这一年的具体12个月的数据分布显示。

2、如果点击某个月&＃xff0c;自动跳转到这个月的具体数据分布显示。

年统计页面

月&＃xff1a;

日&＃xff1a;

echarts的点击事件触发&＃xff1a;

myBarChart.on(&＃39;click&＃39;, function (param) {console.log(param);//这里根据param填写你的跳转逻辑});

echarts图形点击事件多次触发问题解决

myBarChart.off(&＃39;click&＃39;);

我的代码&＃xff1a;

drawBarCharts() {myBarChart.off(&＃39;click&＃39;);//这个是解决多次触发问题的关键let option &＃61; {/*鼠标滚动缩放*/dataZoom: [{type: &＃39;slider&＃39;,/*start: 20,end: 50,*/maxValueSpan: 20,handleSize: 8},{type: &＃39;inside&＃39;,filterMode: &＃39;weakFilter&＃39;}],/*color: [&＃39;rgba(180,88,66,0.96)&＃39;, &＃39;#39a479&＃39;, &＃39;#6A6A6A&＃39;],*/color: [&＃39;#ff3c3c&＃39;,&＃39;#39a479&＃39;],/*指示器*/tooltip: {trigger: &＃39;axis&＃39;,axisPointer: {//type: &＃39;shadow&＃39;type: &＃39;line&＃39;}},legend: {data: [t(&＃39;sline.label.sumCapability&＃39;), t(&＃39;sline.label.remainCapability&＃39;), t(&＃39;sline.label.usedCapability&＃39;)]},grid: {left: &＃39;3%&＃39;,right: &＃39;4%&＃39;,bottom: &＃39;12%&＃39;,containLabel: true},xAxis: [{type: &＃39;category&＃39;,axisLabel: {//坐标轴刻度标签的相关设置。rotate: "25"},data: this.dailydate}],yAxis: [{type: &＃39;value&＃39;}],toolbox: {show: true,top: &＃39;15&＃39;,feature: {mark: {show: true},dataView: {show: true, readOnly: false},magicType: {show: true, type: [&＃39;line&＃39;, &＃39;bar&＃39;]},restore: {show: true},saveAsImage: {show: true}}},series: [/* {name: t(&＃39;sline.label.sumCapability&＃39;),type: &＃39;bar&＃39;,barMaxWidth: 50,data: this.allCapa},*/{name: t(&＃39;sline.label.usedCapability&＃39;),type: &＃39;bar&＃39;,barMaxWidth: 50,stack: &＃39;capability&＃39;,z: 2,label: {show: true,offset: [0, -5]},data: this.beUsedCapa},{name: t(&＃39;sline.label.remainCapability&＃39;),type: &＃39;bar&＃39;,barMaxWidth: 50,stack: &＃39;capability&＃39;,z: 1,label: {show: true},data: this.avaCapa},]};myBarChart.setOption(option);myBarChart.on(&＃39;click&＃39;, function (param) {console.log(param);//这里根据param填写你的跳转逻辑});/*window.addEventListener(&＃39;resize&＃39;, function () {myBarChart.resize()});this.$forceUpdate();*/},