我们在使用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.效果展示
黄色区域点击放大了。
标签:chartIndex,mychart,param,点击,dataIndex,echarts,状图 From: https://www.cnblogs.com/lisir-blogshare/p/18002553