echarts折线图踩坑记录

已于 2023-12-15 17:31:15 修改
阅读量664 收藏 5
点赞数
分类专栏： 前端 文章标签： echarts 前端 javascript
于 2023-12-15 17:17:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35712610/article/details/135015982
版权
文章详细描述了如何在ECharts折线图中实现鼠标焦点强调、定制tooltip显示内容、控制空白区域行为以及优化legend显示，包括使用emphasis、formatter和dispatchAction等技巧。

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

echarts折线图踩坑记录

问题及期望

问题期望效果
折线添加强调效果强调鼠标所指折线
tooltip.trigger='axis’时，tooltip显示所有的折线在当前x坐标的数据tooltip只显示当前鼠标所指折线的点的数据
鼠标移动到折线图空白处，所有的折线都会被强调鼠标移动到折线图空白处，不强调任何折线
折线数量过多导致legend覆盖折线图legend正常显示，与折线展示分离
legend中文本太长优化legend文本显示效果，显示固定长度内容

实现方法

强调鼠标所指折线

问题简述

折线添加强调效果

期望效果

鼠标移动到折线处，折线出现强调效果，更清晰的展示折线内容
在这里插入图片描述

代码实现

只需要给所有的serie在创建的时候后增加一个emphasis的属性

// An highlighted block
emphasis: {
	focus: 'series'
},;

更多emphasis可以实现的效果参考官方文档

tooltip只显示当前鼠标所在折线数据

问题简述

tooltip在tooltip.trigger='axis'情况下，会展示所有折线在当前鼠标所指位置x轴的数据。如下图
图1
在折线过多的情况下，会造成视觉上的混乱，找不到所需折线信息。

期望效果

仅显示鼠标所指曲线的当前位置数据
在这里插入图片描述

代码实现
// option部分，设置formatter，以自定义数据展示内容和条件
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;
};

// 设置鼠标mousemove事件，当鼠标移动到数据上时触发，获取其所属的seriesName
myChart.on('mousemove', function(params) {
  window.selectSeries = params.seriesName;
});

// 设置鼠标mouseout事件，当鼠标移出折线触发，避免鼠标移到空白上还有tooltip显示。
myChart.on('mouseout', function (params) {
  window.selectSeries = '';
});

参考：

鼠标在折线图空白处，不强调任何折线

问题简述

鼠标停留在折线图的空白处，所有折线都会出现强调效果。（可以通过垂直于x轴的虚线判断此时鼠标是否在折线图上）
鼠标在折线图外：
在这里插入图片描述
鼠标在某条折线上：
在这里插入图片描述
鼠标在折线图空白处：
在这里插入图片描述

期望效果

鼠标在折现空白处，取消所有折线的强调效果。保证只有鼠标指向了某个折线，才会出现折线的强调效果
在这里插入图片描述

代码实现
// option部分，设置formatter，以自定义数据展示内容和条件
 formatter:function(params){                
    if (myChart && params.length > 0) {
    	myChart.dispatchAction({
        	type: "downplay",
        	seriesName: countries,//这里注意，和参考资料不同
    	})
	    for (var i =0;i<params.length;i++){
	        var series = params[i];                          
	        if (series.seriesName == window.selectSeries){               
	            myChart.dispatchAction({
	            	type: "highlight",
	            	seriesIndex: series.seriesIndex,
	            	dataIndex: series.dataIndex
	            });
	            break;
	        }                    
	    }                
	    return res;
	}
}

// 设置鼠标mousemove事件，当鼠标移动到数据上时触发，获取其所属的seriesName
myChart.on('mousemove', function(params) {
  window.selectSeries = params.seriesName;
});

// 设置鼠标mouseout事件，当鼠标移出折线触发，避免鼠标移到空白上还有tooltip显示。
myChart.on('mouseout', function (params) {
  window.selectSeries = '';
});

这里注意非常关键的一点：

myChart.dispatchAction({
	type: "downplay",
	seriesName: countries,//这里注意，和参考资料不同
	//dataIndex: params[0].dataIndex,//这里是参考文章的写法
})

这里是通过seriesName属性来设置作用到哪条折线，seriesName支持列表参数。当使用dataIndex属性设置触发事件的作用对象时，会出现mouseover事件无法获取到折线上的数据点，以至于tooltip无法显示的问题。（设置dataIndex属性导致鼠标事件无法触发问题的原因有待进一步探究）

ECharts 中支持的图表行为，通过 dispatchAction 触发相应的事件。例如这里我们希望：
（1）指针指向空白处的时候，取消所有折线的强调效果，可以使用myChart.dispatchAction.type= 'downplay'来达成
（2）指针指向某个折线再将其高亮，可以通过myChart.dispatchAction.type= 'highlight'来达成

参考：

解决legend过多的堆叠问题

问题简述

legend中折线示例过多，导致内容重叠、标签混乱
在这里插入图片描述

期望效果

legend整齐有序美观。这里时通过增加分页的方式对标签进行整理。
在这里插入图片描述

代码实现
// 设置option中的legend属性
 legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: data.legendData
 }

可以通过调整legend的height属性，控制每页的长度

参考：

legend文本视觉效果优化

问题简述

折线的标签中，各折线名字长度不一致，影响美观
在这里插入图片描述

期望效果

过长的文本自动增加省略号，鼠标悬浮会显示全称
在这里插入图片描述

代码实现
// 
// 格式化文本方式一
formatter: function (name) {
	return echarts.format.truncateText(name, 50, '14px Microsoft Yahei', '…');
},
// 格式化文本方式二
formatter: function (name) {
 return name.length > 17 ? name.substr(0, 17) + '...' : name
}
//开启tooltip
tooltip: {
	show: true
};

在option.legend中设置其formatter和tooltip

参考：

完整实现

// 在echarts官网示例基础上修改得到
// https://echarts.apache.org/examples/zh/editor.html?c=line-race
$.get(
  ROOT_PATH + '/data/asset/data/life-expectancy-table.json',
  function (_rawData) {
    run(_rawData);
  }
);
function run(_rawData) {
  // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
  const countries = [
    'Finland',
    'France',
    'Germany',
    'Iceland',
    'Norway',
    'Poland',
    'Russia',
    'United Kingdom'
  ];
  const datasetWithFilters = [];
  const seriesList = [];
  echarts.util.each(countries, function (country) {
    var datasetId = 'dataset_' + country;
    datasetWithFilters.push({
      id: datasetId,
      fromDatasetId: 'dataset_raw',
      transform: {
        type: 'filter',
        config: {
          and: [
            { dimension: 'Year', gte: 1950 },
            { dimension: 'Country', '=': country }
          ]
        }
      }
    });
    seriesList.push({
      type: 'line',
      datasetId: datasetId,
      showSymbol: false,
      name: country,
      endLabel: {
        show: true,
        formatter: function (params) {
          return params.value[3] + ': ' + params.value[0];
        }
      },
      labelLayout: {
        moveOverlap: 'shiftY'
      },
      emphasis: { focus: 'series',lineStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        } },
      encode: {
        x: 'Year',
        y: 'Income',
        label: ['Country', 'Income'],
        itemName: 'Year',
        tooltip: ['Income']
      }
    });
  });
  option = {
    animationDuration: 1000,
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      // top: 20,
      bottom: '10%',
      formatter: function (name) {
    　　return echarts.format.truncateText(name, 50, '14px Microsoft Yahei', '…');
　　　},
    　//开启tooltip
    　tooltip: {
        show: true
    　}
    },
    dataset: [
      {
        id: 'dataset_raw',
        source: _rawData
      },
      ...datasetWithFilters
    ],
    title: {
      text: 'Income of Germany and France since 1950'
    },
    tooltip: {
      order: 'valueDesc',
      trigger: 'axis',
      formatter:function(params){                
        var res = "";
        if (myChart && params.length > 0) {
        myChart.dispatchAction({
            type: "downplay",
            seriesName: countries,
            // dataIndex: params[0].dataIndex
        })
        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/>";                        
                myChart.dispatchAction({
                  type: "highlight",
                  seriesIndex: series.seriesIndex,
                  dataIndex: series.dataIndex
                });
                break;
            }                    
        }                
        return res;
      }
    },
    },
    xAxis: {
      type: 'category',
      nameLocation: 'middle'
    },
    yAxis: {
      name: 'Income'
    },
    grid: {
      right: 140
    },
    series: seriesList
  };
  myChart.setOption(option);
}

myChart.on('mousemove', function(params) {
  window.selectSeries = params.seriesName;
});

myChart.on('mouseout', function (params) {
  window.selectSeries = '';
});

本文所有截图和代码主题主要来自于ECharts官网示例

参考资料

  1. ECharts官方网站
  2. echarts折线图tooltip中如何仅展示鼠标当前位置相应的指标数据
  3. event事件官方文档
  4. dispatchAction图表行为官方文档
  5. echarts堆叠图tooltip中如何仅展示鼠标当前位置相应的指标数据
  6. echarts 图例文本太长、或者数量太多溢出的处理
【Echarts】多条折线图 y轴数值与实际值不一致，tooltip提示框--自定义小圆点/formatter分别显示多个数值
qq_26780317的博客
03-03 8829
【Echarts】多条折线图 y轴数值与实际值不一致，tooltip提示框--自定义小圆点/formatter分别显示多个数值
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
Echarts折线图的tooltip样式，背景，位置，折线颜色渐变（自定义样式）
LBY_XK的博客
10-14 5318
效果图 //24小时发车趋势图 var trend = document.getElementById('fachetrend') var trenddata = [['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'], [5, 40, 30, 40, 20, 28, 32, 22, 18, 30, 33, 30]] function t
echart 折线图tooltip
JunJiu0420的博客
05-16 313
【代码】echart 折线图tootip。
echarts双折线图，tooltip展示自定义内容和样式
qq_38711726的博客
01-02 2714
上图中，分别滑过2023-12-25和2024-0101的tooltip的日期展示区间是不一致的。这里就可以在formatter中随意添加数据，dom元素，自定义样式了。正常echarts的折线图的tooltip有默认的展示内容，是固定的。（2） 格式化tooltip展示内容及样式。祝大家所有的bug都能解决！showStr自定义字段。
echarts -- tooltip
m0_65930596的博客
09-19 2858
如果trigger的值为axis时，可以通过{a0}，{a1}，这样添加索引的方式来表达。axis 一般用于多组数据，比如堆叠折线图或者堆叠柱状图，会显示那一组的数据。可以通过console.log打印一下params具体的内容，根据自己需求设置显示内容。缺点：不能显示出横轴纵轴以外隐藏的数据，不够灵活。常见变量有 {a}, {b}，{c}，{d}2、axisPointer：设置鼠标悬停后echarts对应列的背景展示。值：shadow 会展示柱状阴影。4、formatter：可以定义提示框显示的内容。
echarts折线图line动态显示阈值警
07-20
根据实时数据变换markLine的展示效果。比如温度超过设置的警戒线，就会出现警报效果
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
接着，"Echarts折线图"部分则涵盖了如何使用Echarts库创建动态、交互式的折线图。Echarts提供了一系列参数供开发者配置，如`series`定义数据序列，`xAxis`和`yAxis`定义坐标轴，`tooltip`定义提示框等。通过灵活调整...
uni-app封装echarts折线图，安卓真机测试可以使用
02-09
1. 创建一个uni-app的Vue组件，例如`EchartsLine.vue`，用于封装ECharts折线图。 2. 在组件中引入ECharts的JS库，并配置好需要的图表选项。 3. 使用uni-app的`uni.createSelectorQuery()`方法获取canvas元素，这是...
Echarts 折线图修改特定点颜色，tooltip添加滚动条
Griner_的博客
07-04 420
/value 值，itemStyle 样式 ，symbol 点形状triangle/square/diamond/circle ，symbolSize大小。1.echarts 示例修改。2.tooltip添加滚动条。
echarts折线图设置tooltip属性实现鼠标滑过显示提示框内容
徊忆羽菲
08-06 4410
echarts折线图tooltip属性设置显示提示框内容效果图具体代码 效果图 具体代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%">&l
echarts ( 折线图，柱状图 ) 和 饼图 tooltip 文字样式修改
最新发布
天命爱心职责的博客
08-19 919
echarts自定义tooltip显示内容;echarts ( 折线图，柱状图 ) 和 饼图 tooltip 文字样式修改
设置echarts折线图悬浮框显示的数据tooltip
weixin_38999134的博客
05-08 1040
【代码】设置echarts折线图悬浮框显示的数据tooltip。
echarts 自定义tooltip（折线图）
m0_65681650的博客
08-02 691
echarts 自定义tooltip、添加图标（折线图）
echarts折线图多条曲线 单独设置tooltip提示框
qq_44686742的博客
07-04 2908
echars学习
echarts 折线图百分比 tooltip 实例 两种方法
qq_35363709的博客
08-12 2700
图表请求数据失败!在知道有几个类型时：下面有五个类型。在不知道几个类型时： 自定义类型。name: '日期',name:'登录率',
ECharts折线图tooltip提示框格式自定义
resign007的博客
10-14 6198
tooltip.formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 1、字符串模板 模板变量 折线（区域）图、柱状（条形）图、K线图 :{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） 散点图（气泡）图 :{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） 地图 :{a}（系列名称），{b}（区域名称），{c...
echarts折线图tooltip自定义formatter
FormAda的博客
03-09 9973
若想自定义tooltip就要用到formatter，如何实现呢？formatter中的params到底是啥呢？ 如图所示： 打断点看params是这样的。 这个params中的数据取决于我们series中的数据，也就是这个。 在seriesData中的data我们通常是这样的[123,456,789,147,852,963],这种包含数字的数组，如果想要实现自定义formatter我们就要将data里的数据处理一下写成数组对象的形式，如下： [ { name: "x...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值