echarts图例完全自定义（不用自带的图例）以及点击某一个图例只显示当前折线的功能

最新推荐文章于 2023-12-05 16:58:52 发布

lixiaonaaa

最新推荐文章于 2023-12-05 16:58:52 发布

阅读量2.3k

点赞数 3

分类专栏： echarts 文章标签： echarts js

本文链接：https://blog.csdn.net/lixiaonaaa/article/details/119755134

版权

echarts 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1，主要问题

堆叠折线图的图例又多又长，echarts上的图例过多时是有分页，但是我这个分页又太多，看最后一条要点击好久，所以想着有滚动条方便一些。而且点击某一个图例只显示当前的折线，取消某一条的点击时展现所有折线。如下图（下图是想要的最终效果）。

下面不多说，直接上代码吧，主要是应用legendselectchanged和chart.dispatchAction，大家可查看官网。

2，代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .leged-inner{
      height: 200px;
      overflow: auto;
      padding: 0 10px 10px;
    }
    .leged-item {
      text-align: left;
      font-size: 12px;
      color: #999;
      line-height: 20px;
    }
    .leged-item .leged-text {
      cursor: pointer;
      display: inline-block;
      width: 95%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    .leged-item .leged-text:hover{
      color: #0086ed;
    }
    .leged-item .leged-icon {
      display: inline-block;
      width: 15px;
      height: 4px;
      margin: 3px 5px;
      vertical-align: middle;
    }

    .leged-text.active{
      color: #333;
    }
  </style>
</head>
<body>
  
<div id="echart" style="width: 600px; height: 500px;"></div>
<div id="echart_leaged"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>

<script>
$(function() {
  var chart = echarts.init(document.getElementById('echart'));
  var colors = ['#5470C6', '#91CC75', '#FAC858'];
  var data = [{
				name: '邮件营销',
				type: 'line',
				stack: '总量',
				data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
				name: '联盟广告',
				type: 'line',
				stack: '总量',
				data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
				name: '视频广告',
				type: 'line',
				stack: '总量',
				data: [150, 232, 201, 154, 190, 330, 410]
			},
			{
				name: '直接访问',
				type: 'line',
				stack: '总量',
				data: [320, 332, 301, 334, 390, 330, 320]
			},
			{
				name: '搜索引擎',
				type: 'line',
				stack: '总量',
				data: [820, 932, 901, 934, 1290, 1330, 1320]
			}
		]
  var legedHtml = '';
  var c=0;
  for(var i=0; i<data.length; i++) {
    if (isInteger(c/3)) c = 0;  //颜色
    c++;
    legedHtml += "<div class='leged-item'><span class='leged-icon' style='background: "+colors[c-1]+"'></span><span class='leged-text active' title='"+data[i].name+"'>"+data[i].name+"</span></div>"
  }
  $('#echart_leaged').html(legedHtml); //自定义图例
	// for blog example - from https://www.echartsjs.com/examples/zh/editor.html?c=line-stack
	options = {
		title: {
			text: '折线图堆叠'
		},
        color: colors,
		tooltip: {
			trigger: 'item'
		},
		legend: {
			data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
			// selectedMode: 'single'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		},
		yAxis: {
			type: 'value'
		},
		series: data
	};
	chart.setOption(options, true);
	chart.on('legendselectchanged', function(obj) {
		var selected = obj.selected;
		var name = obj.name;
		var trueNum = 0;
		var lengthArr = [];
        $('.leged-text').removeClass('active');
        $(".leged-text[title='"+name+"']").addClass('active');
		if (selected != undefined) {

			for (x in selected) {
				//判断是否有选中
				if (selected[x]) {
					trueNum++;
				}
				lengthArr.push({
					'name': x
				});
				if (x == name) {
					chart.dispatchAction({
						type: 'legendSelect',
						name: x
					})
				} else {
					chart.dispatchAction({
						type: 'legendUnSelect',
						name: x
					})
				}
			}

			//如果一个选中的都没有,则显示全部
			if (trueNum == 0) {
				chart.dispatchAction({
					type: 'legendSelect',
					// 图例名称
					batch: lengthArr
				})
               $('.leged-text').addClass('active');
			}
		}
	})

	$(".leged-item").click(function(){
		chart.dispatchAction({
		    type: 'legendToggleSelect',
		    // 图例名称 
		    name: $(this).find('.leged-text').text()  // 此处为series的data中设置的name属性
		})
	})

  function isInteger(obj) {
    return obj%1 === 0
  }

})
</script>
</body>
</html>

3，结果

点击其中一个图例：

lixiaonaaa

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
echarts图例完全自定义（不用自带的图例）以及点击某一个图例只显示当前折线的功能

1，主要问题图例又多又长，如下图，echarts上的图例过多时是有分页，但是我这个分页又太多，看最后一条要点击好久，所以想着有滚动条方便一些。而且点击某一个图例只显示当前的折线，取消某一条的点击时展现左右折现。下面不多说，直接上代码吧，主要是应用legendselectchanged和chart.dispatchAction，大家可查看官网。2，代码<!DOCTYPE html><html lang="en"><head> <meta.
复制链接

扫一扫