Echarts 堆叠折线图鼠标移入折线圆点，提示框显示当前选中数据，单击图例加载选中图例数据

最新推荐文章于 2025-08-15 15:29:11 发布

原创

最新推荐文章于 2025-08-15 15:29:11 发布 · 4.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

本文介绍如何在Echarts中创建堆叠折线图，并实现鼠标悬停时显示当前选中数据的提示框，以及点击图例加载对应图例数据的功能。通过JavaScript深入探讨Echarts的交互配置与实现细节。

var chartDom = document.getElementById('tbgl');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
          title: {
            text: this.select.name+'-监测数据过程线',
            left:'center',
            top:'top'
          },
          tooltip: {
            trigger: 'axis',            
            formatter:function(params){                
                var res = "";
                for (var i =0;i<params.length;i++){
                    var series = params[i];                          
                    if (series.seriesName == window.selectSeries){
                        res = series.axisValue +"<br/>" + series.marker + series.seriesName + ":" +series.dat