echarts 图标点击案例

一、在设置图表信息里面设置点击事件

  /*设置图标属性信息*/
            drawChart () {
                console.log('2')
                this.charts =echarts.init(document.getElementById('mydataServiceCountTrend'), 'westeros')
                this.charts.off('click');
                this.charts.setOption({
                    backgroundColor: '#fff',
                    title: {
                        text: '各时间段数据使用情况',
                        top: 'top',
                        left: 'center',
                        textStyle: {
                            color: '#999',
                            fontSize: 18
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        backgroundColor: "#FAFAFA",
                        bottom: '5%',
                        left: '5%',
                        /*data: this.deptLegend,*/
                    },
                    grid: {
                        top: '15%',
                        left: '8%',
                        right: '10%',
                        bottom: '15%',
                        // containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            },
                        },
                    },

                    xAxis: [{
                        interval: 0,//显示x轴显示完整
                        name:this.dateShow,
                        type: 'category',
                        data:this.xAxisText,
                        axisLine: {
                            lineStyle: {
                                color: 'red'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            /*interval: 0,  显示所有x轴*/
                            textStyle: {
                                color: 'black'
                            },
                            margin: 15
                        },
                        boundaryGap: false,
                        minInterval : 1,
                        boundaryGap : [ 0, 0.1 ]
                    }],
                    dataZoom: [{
                        type: 'slider',
                        show: this.zoomShow, //flase直接隐藏图形
                        xAxisIndex: [0],
                        left: '9%', //滚动条靠左侧的百分比
                        bottom: -10,
                        start: 0,//滚动条的起始位置
                        end: this.endValue, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                        zoomLock: true, //控制面板是否进行缩放
                    }],
                    yAxis: [{
                        name:'次数',
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'black'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'black'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        minInterval : 1,
                        boundaryGap : [ 0, 0.1 ],
                    }],
                    series: [ {
                        type: 'line',
                        data: this.ServicesCalledNumTrend,
                        symbolSize: 6,
                        symbol: 'circle',
                        smooth: true,
                        lineStyle: {
                            color: '#9E87FF'
                        },
                        itemStyle: {
                            normal: {
                                color: '#9E87FF',
                                borderColor: '#9E87FF'
                            }
                        },
                        //显示折线上文字
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#6c50f3',
                            }
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#9E87FFb3'
                            },
                                {
                                    offset: 1,
                                    color: '#9E87FF03'
                                }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.5,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#9E87FF'
                                    },
                                        {
                                            offset: 0.4,
                                            color: '#9E87FF'
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#fff'
                                        }, {
                                            offset: 0.7,
                                            color: '#fff'
                                        }, {
                                            offset: 0.8,
                                            color: '#fff'
                                        }, {
                                            offset: 1,
                                            color: '#fff'
                                        }
                                    ]
                                },
                                borderColor: '#9E87FF',
                                borderWidth: 2
                            }
                        }
                    }
                    ]


                })
                //图表点击事件
                let that=this;
                this.charts.on('click', function (params) {
                    that.dialogTableVisible = true;
                    that.saveParams=params;
                    that.getServicesCalledNumTrendDetail(that.saveParams);

                })
                window.onresize = this.charts.resize
            },

关键代码： this.charts.on('click', function (params) {  })

发现问题：会多次调用点击事件？

解决：echarts 点击事件，在图表重新渲染后会累加点击事件，解决方法是在渲染前关闭点击事件，跟计时器一样 ，解决重复点击会多次累加问题
关键代码：this.myChart.off(‘click’) // 点击之前先关闭！！解决重复点击
放在这个代码：this.myChart.setOption({}）前面