echarts的自定义图例的点击事件

// html部分
<ul class="legend">
   <li @click="changeLegend('1号井')">1号井</li>
   <li @click="changeLegend('2号井')">2号井</li>
   <li @click="changeLegend('3号井')">3号井</li>
 </ul>
 <div ref='bar'></div>

// js部分
import * as echarts from 'echarts'
data() {
	return {
		myBarChart: null,
		data1: []
	}
},
methods: {
	changeLegend(name) {
		if(this.myBarChart) {
          this.myBarChart.dispatchAction({
            type: 'legendToggleSelect',
            // 图例名称
            name: '1号井'
          })
        }
	},
	initEcharts() {
		const chart = this.$refs.bar;
        this.myBarChart= echarts.init(chart);
		const option = {
			title: {
	            show: false
	          },
	          legend: {// 必须配置并且设置为false,否则触发不了
		            show: false,
			  },
	          series: [{
	            name: '1号井',// 注意，name值必须和图例一一对应
	            data: this.data1,
	            barWidth: 10,
	            type: 'bar',
			},{
	            name: '2号井',
	            data: this.data1,
	            barWidth: 10,
	            type: 'bar',
			},{
	            name: '3号井',
	            data: this.data1,
	            barWidth: 10,
	            type: 'bar',
			}]
	}
}