用vue 和echarts 写一个echarts饼图点击图例，图例不会失去选中状态

你可以通过监听 echarts 的 `legendselectchanged` 事件，在事件回调函数中手动设置选中状态。具体实现代码如下：

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chartData: {
        legendData: ['A', 'B', 'C'],
        seriesData: [
          { value: 335, name: 'A' },
          { value: 310, name: 'B' },
          { value: 234, name: 'C' },
        ],
      },
    }
  },

  mounted() {
    this.initChart()
  },

  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        legend: {
          data: this.chartData.legendData,
        },
        series: [
          {
            type: 'pie',
            data: this.chartData.seriesData,
          },
        ],
      })

      // 监听图例选择事件
      this.chart.on('legendselectchanged', (params) => {
        const selected = params.selected

        // 遍历所有图例
        for (let i = 0; i < this.chartData.legendData.length; i++) {
          const name = this.chartData.legendData[i]

          // 如果图例未被选中，则手动设置选中状态
          if (!selected[name]) {
            this.chart.dispatchAction({
              type: 'legendSelect',
              name: name,
            })
          }
        }
      })
    },
  },
}
</script>

<style>
.chart-container {
  width: 500px;
  height: 500px;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>

在上述代码中，我们首先在模板中添加了一个 `div` 元素作为 echarts 容器。在 `mounted` 钩子函数中，我们调用 `initChart` 方法初始化 echarts 图表，并通过 `legendselectchanged` 事件监听图例选择事件。在事件回调函数中，我们通过 `params.selected` 获取当前被选中的图例状态，并遍历所有图例，如果当前图例未被选中，则手动设置选中状态。这样就可以保证图例不会失去选中状态了。