Echarts tooltip 吸附

起因

在一些特殊情况下,给图表提供的数据的时间是随机或者有偏差的,但是又需要能够按时间正确的展示数据。比方说,现在有一个折线图,从0点到24点,每个点都需要出现在对应的位置、即对应的时分秒上,这个时候就需要补点了。

补点的代码就不贴了,简单来说就是按展示粒度在横坐标上生成点,比如:如果数据按秒展示,时间跨度为1天的折线图上横坐标会有60*60*24=86400个点。点补好了之后,再搭配series-line.connectNulls就能展示一个点不连续的折线图了。

折线图虽然画好了,但是零星的点散落在图上各处,并且可被触发的区间极小,正常情况下鼠标从左到到右移动一遍都不一定能触发一次tooltip

思路

鼠标在图表上移动时获取位置信息并转换成横坐标的索引,再从数据列表去搜索最近一个存在数据的项的索引,根据索引把这一项的tooltip给展示出来。

解决方案

javascript 复制代码
// lineChart 为 echarts 实例
// 通过 getZr().on('mousemove') 获取鼠标在图表上移动时的位置信息
lineChart.getZr().on('mousemove', params => {
    const pointInPixel = [params.offsetX, params.offsetY]
    // 使用 convertFromPixel 获取鼠标所在位置对应的横坐标的索引(currentIndex)
    const pointInGrid = lineChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
    const currentIndex = pointInGrid[0];

    // 获取最近的一条数据的横坐标索引(closestIndex),
    // 最简单的方案就是遍历,这里不贴具体代码了
    // closestIndex = x

    // 如果能找到数据,调用 dispatchAction 展示对应数据的 tooltip
    if (closestIndex > -1) {
      lineChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: closestIndex,
      })
    }
  })

后续问题

以上的实现应付简单折线图够用了,但是有几个问题可供思考:

  • 如果产品对性能有要求,获取最近一条数据的响应速度怎么提高,在鼠标快速滑动时仍能保证交互的流畅度?
  • 同时存在多条折线时怎么去实现上述的功能,并保证性能呢?
相关推荐
wow_DG3 天前
【ECharts✨】解决Vue 中 v-show 导致组件 ECharts 样式异常问题
前端·javascript·vue.js·echarts
朝阳393 天前
echarts【实战】饼状图点击高亮,其他区域变暗
echarts
HashTang5 天前
2025年7月份实时最新获取地图边界数据方法,省市区县街道多级联动【文末附实时geoJson数据下载】
echarts·地图·geojson·全国geojson·经纬度·街道geojson·街道边界数据·矢量边界·乡镇geojson·乡镇边界数据·行政边界
全宝6 天前
🗾3分钟学会Echart地图下钻
前端·echarts
paopaokaka_luck9 天前
基于SpringBoot+Vue的汽车租赁系统(协同过滤算法、腾讯地图API、支付宝沙盒支付、WebsSocket实时聊天、ECharts图形化分析)
vue.js·spring boot·后端·websocket·算法·汽车·echarts
隐含9 天前
基于echarts的水球的样式。
前端·javascript·echarts
lianlian0110 天前
vue3+echarts 多Y轴折线图,通过图例legend动态控制对应Y轴所有数据显示隐藏
echarts
托马斯-酷涛10 天前
基于Echarts的气象数据可视化网站系统的设计与实现(Python版)
python·信息可视化·echarts
鱼钓猫11 天前
echarts 堆叠柱状图 柱与柱之间设置上下水平间隙
前端·echarts
小彭努力中12 天前
153.在 Vue 3 中使用 OpenLayers + Cesium 实现 2D/3D 地图切换效果
前端·javascript·vue.js·3d·ecmascript·echarts