echarts饼状图点击选择功能

我们在使用echarts的时候，不免会遇到点击饼状图进而让其他地方数据发生变化的功能，这时候我们就需要将当前点击的饼状图区域放大显示（选中状态）。

1.vue

<div ref="csRef"></div>

2.方法

const csRef = ref()
let mychart=""
const chartIndex = ref()
//渲染
const renderFun = ()=>{
      if (mychart!= '') {
        mychart.dispose() //销毁
      }
      let option={}
       mychart= echarts.init(csRef.value)
       option && mychart.setOption(option)
       //点击事件
      mychart.on('click', function (param) {
        //点击选中
        if (param.dataIndex != chartIndex.value) {
          myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: chartIndex.value,
        });
    }
    chartIndex.value = param.dataIndex;
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: param.dataIndex,
    });
      })
}        

3.效果展示

 黄色区域点击放大了。