Echarts自定义Legend按钮实现以及Demo

前段时间,一个朋友问能不能做出这样的Echarts图,大概是这样:

他有个需求,有4条线分别代表:缓存100时方案A的曲线,缓存200时方案A的曲线,缓存100时方案B的曲线,缓存200时方案B的曲线,按常规模式这个时候Echarts的Legend会有4个按钮(缓存100方案A,缓存200方案A,缓存100方案B,缓存200方案B),它们分别控制一条线,但是他不想这样,他想要这样的4个按钮:缓存100,缓存200,方案A,方案B,每个按钮可以关闭对应的两条线。相当于他想要的展示维度和Echarts不一样,他的展示效果在分类上更合理。

当时之前我也没有做过,我也不知道能不能实现,直到后面有一天突然看到Echarts3.0的API,发现Echarts是提供了Legend点击事件方法的!然后马上去翻看2.0的,结果发现在用户手册上方一点的位置也明确写了的,只是从来没有注意到罢了…(-_-|||),不仅如此,Echarts还提供了线条开关的API!

既然这样,那这个需求就有可能实现了,可以自定义4个Legend按钮,然后在自己写方法来控制曲线,于是,没过多久,就有了这篇文章,先看看DEMO。下面开始解释代码:

1,自定义Legend标签,创建4个自定义标签

legend: {
	data:
	[
		{
			name: '缓存100',
			icon : 'image://icon.jpg',  // 必须将icon设置为一张白底的图片,否则前面会有个曲线颜色的小图标
			textStyle: {color: 'black'}
		},
		{
			name: '缓存200',
			icon : 'image://icon.jpg',
			textStyle: {color: 'black'}
		},
		{
			name: '方案A',
			icon : 'image://icon.jpg',
			textStyle: {color: 'black'}
		},
		{
			name: '方案B',
			icon : 'image://icon.jpg',
			textStyle: {color: 'black'}
		}
	],
	selected: {  // 自定义的4个标签并没有曲线对应,加载后是没有选中的(灰色),设置为选中
		'缓存100': true,
		'缓存200': true,
		'方案A': true,
		'方案B': true
	}
}

2,设置线条的数据(模拟数据)

series : [
	{
		name:'缓存100方案A', // 线条的真实名称不能和自定义名称匹配
		type:'line',
		data:[5.0, 8.9, 10.0, 12.2, 5.6, 7.7, 5.6],
		itemStyle : seriesItemStyle  // itemStyle设置节点标签,用于在最后一个节点展示线条名称,如“缓存100方案A”,方法代码在下面给出
	},
	{
		name:'缓存100方案B',
		type:'line',
		data:[21, 21, 25, 23, 22, 33, 30],
		itemStyle : seriesItemStyle
	},
	{
		name:'缓存200方案A',
		type:'line',
		data:[40.6, 48.9, 49.0, 56.4, 48.7, 57.7, 47.6],
		itemStyle : seriesItemStyle
	},
	{
		name:'缓存200方案B',
		type:'line',
		data:[74.6, 76, 87.0, 77.4, 80.7, 66.7, 62.6],
		itemStyle : seriesItemStyle
	}
]

3,绑定Legend按钮hover和click事件,click时可以开关线条,hover是为了改变标签颜色

$(function(){

	myChart = echarts.init(document.getElementById('chart-box')); 
	myChart.setOption(option); 

	// 绑定事件
	// 点击自定义legend图标
	myChart.on(echarts.config.EVENT.LEGEND_SELECTED,function(params){ // echarts.config.EVENT.LEGEND_SELECTED是一个常量,表示标签被点击的标识
		var target = params.target;  // 获取当前被点击的标签
		if (!isInLegends(target)) return;  // 判断标签是否为自定义的标签(isInLegends方法后面给出),因为线条开关时会自动触发click事件,如果不做此判断,会进入死循环
		for (var i in lines) {
			var line = lines[i];
			if (line.indexOf(target) > -1) {  // 如果线条真实名称包含标签名称,那么就认为应该被该标签控制,我是这么做的,可以有其他控制方案
				myChart.component.legend.setSelected(line, params.selected[target]); // 设置线条的开关,setSelected是Echarts的API,params.selected是返回该标签处于的开关状态
			}
		}
	});
	
	// hover自定义legend图标
	myChart.on(echarts.config.EVENT.LEGEND_HOVERLINK,function(params){
		var target = params.target;
		if (!isInLegends(target)) return;  // 判断的原因同上
		myChart.component.legend.setColor(target, '#76db71'); // 设置hover时的颜色
		myChart.refresh();  // 需要刷新图才会显示颜色
	});	
});

4,展示线条具体名称的方法,因为现在Legend被自定义了,下面的线条到底是什么名字还没有显示,我想了个办法,就是显示在最后一个节点的Label上,当然也可以显示在Legend中,也可以通过滚动条计算,然后显示在不同节点Label上,不过方法都不是很完美,但是足够了

var seriesItemStyle =   // 该方法在options中series设置中每条线的itemStyle属性使用的
		{
		normal : {
			label : {
				show : true,
				formatter : 
					function (params) {
						// 在某个x节点label显示线条标签
						// 查找是否该label
						var isThisLabel = (function(xName) {  // Echarts实现在生成每个节点时会运行一次这个formatter,就可以判断是否到要显示线条名称的节点,如果是就显示
							var thisLabelIndex = xAxis.length - 1;
							if (getXAxisIndex(xName) == thisLabelIndex) return true; // getXAxisIndex方法后面给出,返回当前x轴名称是第几个节点,这里Echarts没有在params里面放index,考虑不周到
							return false;
						})(params.name);
				
						if (isThisLabel) {
								return params.series.name
						} else {
								return '';
						}
					}
				}
			},
		};

6,其他方法

// 判断当前legend的target是不是在自定义的legends数组中
function isInLegends(target) {
	var targetInLegends = false;
	for (var i in legends) {  // legends自定义Legend名称数组
		if (target == legends[i]) {
			targetInLegends = true;
			break;
		}
	}
	return targetInLegends;
}

// 获取当前name在xAxis数组中的索引
function getXAxisIndex(name) {
	for (var i in xAxis) {  // xAxis x轴名称数组
		if (name == xAxis[i]) return i;
	}
	return -1;
}

按照这样写代码,就能做出这个需求的Echarts图了。代码有些多,但是多看看API就可以搞定了。

不得不说,刚开始使用Echarts的时候觉得好难,但是之后用过几次,再多思考思考,特别是仔细看过API后,才发觉,Echarts真的是很强大的,反正可以这么说,对于直方图我已经基本上定制成想要的了,Echarts还有很多的图形种类,估计还会强大到无法想象!

本文《Echarts自定义Legend按钮实现以及Demo》来自 www.juwends.com ,欢迎转载或CV操作,但请注明出处,谢谢!