Echarts动态更新数据和动态显示最后1分钟数据区域

217 阅读1分钟

Echarts通过setOption动态更新数据,并动态设置dataZoom显示最后1分钟数据区域时tooltip出现无法固定数据的问题。

场景:

myChart.current?.setOption({
    ...,
    tooltip: {
        triggerOn: "mousemove",
    },
    series: [...],
    dataZoom: {
        start: Math.floor((last / chartData.length) * 100),
        end: 100,
    }
});

大概场景如下: 鼠标移入显示某个tooltip后,随着数据和数据区域动态更新会偶现鼠标不移动,但tooltip获得的显示数据会更新。

image.png

可以通过监听鼠标事件,手动控制tooltip显示隐藏:

  // 监听控制tooltip显示
  myChart.current?.on('mouseover', function (params: any) {
    if (params.componentType === 'series') {
      myChart.current.dispatchAction({
        type: 'showTip',
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex
      });
    }
  });
  // 手动隐藏tooltip和轴指示器
  myChart.current?.on('mouseout', (params: any) => {
    if (params.componentType === 'series') {
      myChart.current.dispatchAction({
        type: 'hideTip'
      });
      myChart.current.dispatchAction({
        type: 'updateAxisPointer',
        currTrigger: 'leave',
        xAxisIndex: 0,
        yAxisIndex: 0
      });
    }
  });

设置tooltip.triggerOn为"none"