vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来

最新推荐文章于 2024-09-06 17:10:13 发布

原创最新推荐文章于 2024-09-06 17:10:13 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript #前端 #前端框架

在Vue项目中使用Echarts绘制折线图时，若需要在鼠标悬浮时同时显示两个X轴和对应Y轴的数据，可以利用tooltip的formatter方法。通过定义formatter回调函数，结合数据数组，如that.drawLineData.xAxis和that.drawLineData.compareTime，可以实现详细信息的完整展示。

vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来：

只要修改一个地方，用formatter方法

tooltip: {
         trigger: 'axis',
         axisPointer: {
               type: 'cross'
             },
             padding: [5, 10],
         formatter: function(params, ticket, callback) {
           return that.drawLineData.xAxis[params[0].dataIndex] + "<br />" +  params[0].seriesName + "：" + params[0].value+ "<br />"+that.drawLineData.compareTime[params[1].dataIndex] + "<br />" +  params[1].seriesName + "：" + params[1].value;
       }
       }

其中that.drawLineData.xAxis和that.drawLineData.compareTime分别为两个X轴的数组