echarts半圆扇形图 底部扇区 鼠标经过高亮只在第一次正常触发问题

业务需求做如图效果的图：

 使用echarts的扇形图实现效果后发现鼠标经过触发高亮行为异常

 底部的物联感知和融合发布扇区，只有在第一次触发的时候，能够正常触发高亮，其它时候如果鼠标从底部进入，必须经过文字才能触发。

 开始以为是文字遮挡导致无法触发，后面没看到文字相关api

并且我是用鼠标的mouseover事件触发外部转盘转动，鼠标高亮不正常的时候，mouseover事件也不正常

后面看到还有另外一个鼠标事件，mousemove,测试了一下，发现这个事件是能正常触发的，就再找了一下echarts的api中，有手动 触发高亮的方法

于是想到在mousemove事件手动触发高亮，mouseout取消高亮，代码如下

/**
 * @description: 绑定图表点击事件
 * @param chart 需要绑定点击事件的图表
 */
const handleHref = (chart: echarts.ECharts): void => {
  chart.on('mousemove', function (params) {
    if (refSector.value) {
      refSector.value.className = 'sector-box';
      refSector.value.classList.add(
        `sector-bg-rotate${45 * (params.dataIndex + 1)}`
      );
      chart.dispatchAction({
        type: 'highlight',
        // 用 index 或 id 或 name 来指定系列。
        // 可以使用数组指定多个系列。
        seriesIndex: 0,
        // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
        dataIndex: params.dataIndex,
      });
    }
  });
  chart.on('mouseout', function (params) {
    if (refSector.value) {
      refSector.value.className = 'sector-box';
    }
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: params.dataIndex,
    });
  });
};

/**
 * @description: 绘图
 * @param dom 元素domid
 * @param option 图表配置项
 */
const drawChart = (dom: HTMLElement, option: ECOption): void => {
  const oldCharts = echarts.getInstanceByDom(dom);
  if (oldCharts !== undefined) {
    oldCharts.dispose(); //销毁旧图表
  }
  const initChart = echarts.init(dom, undefined, {
    devicePixelRatio: 2
  });
  initChart.setOption(option, true);
  handleHref(initChart);
};