526互联

echarts 数据密集，如果设置sampling: 'average' 会导致提示框（tooltip）无法正常显示，但是不设置sampling属性，数据很多时又会很卡，该怎么解决

发布时间 2023-04-24 13:10:28作者: 小小菜鸟04

如果数据比较密集，设置sampling: 'average'确实可以加速绘图，但同时也可能导致提示框无法正常显示的问题。这个问题的原因是，sampling会对数据进行抽样，因此不会显示原始的数据点，而是将数据点以一定规律进行采样，取平均值或最大或其他值，因此提示框的内容可能不准确。

不过，有一个简单的方法可以解决这个问题，即给提示框设置一个触发条件，只有当鼠标所在的数据点非常接近或者落在采样后采样数据的点附近时才显示提示框。

具体来说，可以通过在tooltip中设置trigger: 'axis'来实现，在这种模式下，鼠标在折线图的数据点附近时就会显示提示框，可以非常精准地指示鼠标所在的数据点。同时，为了更好的显示数据点的密集程度，可以将提示框的position属性设置为'top'或者'bottom'。

代码示例：

 
option = {
  xAxis: {
    type: 'category',
    // ... 省略其他配置
  },
  yAxis: {
    type: 'value',
    // ... 省略其他配置
  },
  tooltip: {
    trigger: 'axis',
    position: 'top', // 提示框在顶部显示
    // ... 省略其他配置
  },
  series: [{
    type: 'line',
    data: [] // 数据
  }]
}

通过这种方式，即使启用了sampling: 'average'，也能够准确地显示数据点的位置，并且提示框也能正常显示。