echarts重写图例点击事件

<div class="acountEchart">
          <!-- 图例tab -->
          <ul class="tabWrap">
            <li v-for="(item, index) in legendList" :key="index" :class="!item.active ? 'noBgcolor' : ''" @click="tabCilck(item)">{{ item.tab }}</li>
          </ul>
          <v-chart ref="myChart" :options="option" :autoresize="true" />
        </div>

css代码：

 .acountEchart {
      margin-top: 28px;
      width: 100%;
      height: 252px;
      position: relative;
      .echarts {
        width: 100%;
        height: 100%;
      }
    }
.tabWrap{
  display:flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top:-10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  z-index:999;
  li{
    width: 22%;
    padding: 5px 0;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 16px;
    color: #fff;
    background:#4DB9FF;
    border-radius:4px;
    cursor: pointer;
    &.noBgcolor{
      background:#ddd;
      color: #000;
    }
  }
}

  option: {
        color: ['#5A8EF9', '#5AD7A6', '#F6BD16', '#E7674A'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          show: false,
          icon: 'none',
          itemGap: 0,
          data: ['用水总量', '取水许可', '取水计划', '监测水量'],
          textStyle: {
            fontSize: 12,
            color: '#fff',
            backgroundColor: '#5A8EF9',
            borderRadius: 4,
            padding: 5
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2019', '2020', '2021', '2022', '2023']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(mm³)',
            axisLine: {
              show: false
            },
            axisTick: { show: false } // 是否展示y轴坐标刻度
          }
        ],
        series: [
          {
            name: '用水总量',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '取水许可',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '取水计划',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '监测水量',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          }
        ]
      },
      legendList: [
        {
          tab: '用水总量',
          active: true
        },
        {
          tab: '取水许可',
          active: true
        },
        {
          tab: '取水计划',
          active: true
        },
        {
          tab: '监测水量',
          active: true
        }
      ]
      methods: {
    tabCilck(item) {
      item.active = !item.active
      const myChart = this.$refs.myChart.chart
      myChart.dispatchAction({
        type: item.active ? 'legendSelect' : 'legendUnSelect',
        // 图例名称
        name: item.tab
      })
    }
  }

效果如下：