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

Awkward゛

于 2021-11-29 15:17:50 发布

阅读量4.2k

点赞数 1

分类专栏：前端开发文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/Developer_ChengC/article/details/121610654

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.data +"<br/>";                        
                        break;
                    }                    
                }                
                return res;
            }