vue3+ts的tabs也切换的时候，echarts点击事件改变的颜色取消掉？

Question

这个是tabs页，引入了两个echarts的组件

这是tabs页切换的事件

这个是其中一个echarts组件的代码
点击以后有选中效果，如何切换tabs页以后上一个页面点击事件选中的效果消失？

我在tabs页切换的时候，让红色选中的效果消失，从新调用一次initChartsMonitor函数，不是相当于重新setOption一次吗？

const initChartsMonitor = () => {
  const myChart = echarts.init(chartsMonitorRef.value);
  if(Object.keys(props.ThreatStatDataTactic).length === 0) {
    const option = {
      grid: {
        top: 30,
        right: '4%',
        bottom: 70,
        left: '4%',
      },
      tooltip: {
        trigger: 'item'
      },
      title: {
        text: '战术统计'
      },
      series: [
        {
          // name: '战术统计',
          type: 'pie',
          radius: ['40%', '80%'],
          label: {
            show: true,
            formatter: '{b}',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15
          },
          labelLine: {
            length: 5,
            length2: 15,
            maxSurfaceAngle: 40
          },
          avoidLabelOverlap: false,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          data: []
        }
      ]
    };
    myChart.setOption(option);
    state.myCharts.push(myChart);
  } else {
    myChart.setOption(setOptionEchate());
    state.myCharts.push(myChart);
    myChart.off('click')
    let arr:any = []
    Array.prototype.removeByValue = function (val:any) {
      for (var i = 0; i < this.length; i++) {
        if (this[i] == val) {
          this.splice(i, 1);
          break;
        }
      }
    }
    myChart.on('click',  function(param:any) {
      if (arr.length === 1 && arr.indexOf(param.dataIndex) != -1) {
        myChart.dispatchAction({
          type: 'downplay',//取消高亮
          seriesIndex: 0,  // 显示第几个series
          dataIndex: param.dataIndex // 显示第几个数据
        })
        arr.removeByValue(param.dataIndex)
      }
      else if (arr.length == 1 && arr.indexOf(param.dataIndex) == -1) {
        myChart.dispatchAction({
          type: 'downplay',//取消高亮
          seriesIndex: 0,  // 显示第几个series
          dataIndex: arr[0] // 显示第几个数据
        })
        myChart.dispatchAction({
          type: 'highlight',//高亮
          seriesIndex: 0,  // 显示第几个series
          dataIndex: param.dataIndex  // 显示第几个数据
        });
        arr.removeByValue(arr[0])
        arr.push(param.dataIndex)
      } else {
        myChart.dispatchAction({
          type: 'highlight',//高亮
          seriesIndex: 0,  // 显示第几个series
          dataIndex: param.dataIndex  // 显示第几个数据
        });
        arr.push(param.dataIndex)
      }
      // myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: param.dataIndex});
      emit('tacticChange',param.name)
    });
  }
};

饼图如何取消

Answer 1

是的, 不论是点击柱图改变颜色与选中颜色消失都是重新渲染的