vue中echarts图标点击事件（x轴）及重绘时候dom的销毁

一、初始化

  init() {
            this.echartLine = echarts.init(this.$refs['lineChart'])
            window.addEventListener('resize', () => {
                this.echartLine && this.echartLine.resize()
            })
              this.optionsLine = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff', // 提示框背景
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    color: [
                        'rgb(71,78,125)',
                        'rgb(65,169,203)',
                        'rgb(105,193,135)',
                        'rgb(246,126,60)',
                        'rgb(102,102,102)',
                    ],
                    legend: {
                        data: ['3s内', '3-15s', '15-60s', '60s以上', '总数'],
                        left: 'right',
                        selectedMode: false, //取消图例上的点击事件
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.linexAxis,
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            //y轴
                            show: false,
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false,
                        },
                    },
                    series: [
                            {
                                name: '3s内',
                                type: 'line',
                                data: this.lineSeries[0],
                            },
                            {
                                name: '3-15s',
                                type: 'line',
                                data: this.lineSeries[1],
                            },

                            {
                                name: '15-60s',
                                type: 'line',
                                data: this.lineSeries[2],
                            },
                            {
                                name: '60s以上',
                                type: 'line',
                                data: this.lineSeries[3],
                            },
                            {
                                name: '总数',
                                type: 'line',
                                data: this.lineSeries[4],
                            },
                    ],
                }
            this.echartLine.setOption(this.optionsLine)
        },

 watch: {
        productList: {
            //监听到数据，重绘echarts
            deep: true, //深度监听设置为 true
            handler: function (newV, oldV) {
               //监听到数据了，相应的数据获取
                })
              this.echartLine.dispose() //dom的摧毁
              this.init()
              this.echartLine.on('click', (params)=> {
                   //点击的相应逻辑
			 });
            },
        },
    },