ECharts legend图例点击事件 + 通过legend点击事件排序

奇怪的芝士

已于 2022-04-26 10:49:29 修改

阅读量2.7k

点赞数 3

分类专栏： ECharts

于 2022-04-22 15:39:25 首次发布

本文链接：https://blog.csdn.net/qq_53702986/article/details/124346970

版权

echarts

ECharts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：实现通过点击图例进行排序
代码比较简单，有想法欢迎交流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECharts legend点击事件 + 排序</title>
		<script src="../../static/js/echarts.min-5.3.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="myChart" style="width: 100%; height: 100%; overflow: hidden;"></div>
		<script type="text/javascript">
			const rootData = [{
				name: '产品 A',
				indicatorOne: 11,
				indicatorTwo: 22
			}, {
				name: '产品 B',
				indicatorOne: 45,
				indicatorTwo: 63
			}, {
				name: '产品 C',
				indicatorOne: 30,
				indicatorTwo: 26
			}, {
				name: '产品 D',
				indicatorOne: 60,
				indicatorTwo: 32
			}, {
				name: '产品 E',
				indicatorOne: 80,
				indicatorTwo: 16
			}]

			var sort = [false, false]

			setTimeout(() => {
				initChart(rootData)
			})

			function initChart(res) {
				// 根据排序条件处理数据
				if (sort[0]) {
					res = ([].concat(rootData)).sort((a, b) => {
						return a.indicatorOne - b.indicatorOne
					})
				} else if (sort[1]) {
					res = ([].concat(rootData)).sort((a, b) => {
						return a.indicatorTwo - b.indicatorTwo
					})
				}

				let data = [{
						name: '指标一',
						data: res.map(v => v.indicatorOne)
					},
					{
						name: '指标二',
						data: res.map(v => v.indicatorTwo)
					}
				]
				let axis = res.map(v => v.name)
				let colors = ['#41d8c0', '#faa187']
				let richStyle = {
					a: {
						color: "#fff",
						fontSize: 25,
						fontWeight: 'bold',
						verticalAlign: 'middle'
					}
				}
				let legendSelected = {}
				let legendData = []
				data.forEach((v, i) => {
					legendSelected[v.name] = true // 默认选中所有图例
					legendData.push({
						name: data[i].name,
						selected: true,
						textStyle: {
							rich: {
								a: {
									color: sort[i] ? "#ffe774" : '#fff',
									fontSize: 25,
									fontWeight: 'bold',
									verticalAlign: 'middle'
								}
							}
						}
					})
				})
				let option = {
					backgroundColor: 'rgba(1, 27, 70, 0.7)',
					color: colors,
					legend: {
						textStyle: {
							color: '#fff',
							fontSize: 20
						},
						itemGap: 100,
						itemWidth: 18,
						itemHeight: 18,
						icon: 'rect',
						bottom: '5%',
						left: 'center',
						selected: legendSelected,
						data: legendData,
						formatter: name => `${name}  {a|⇅}`
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: '5%',
						left: '10%',
						right: '0%',
						bottom: '18%',
						width: '80%',
						height: '80%'
					},
					xAxis: {
						axisLine: {
							lineStyle: {
								color: '#0f3c67'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#0f3c67'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#fff',
								fontSize: 18
							}
						},
					},
					yAxis: {
						axisTick: {
							alignWithLabel: true,
						},
						axisLine: {
							lineStyle: {
								color: '#0f3c67'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#fff',
								fontSize: 18
							},
						},
						data: axis
					},
					series: [{
							name: data[0].name,
							type: 'bar',
							stack: 'one',
							barWidth: 30,
							data: data[0].data
						},
						{
							name: data[1].name,
							type: 'bar',
							stack: 'one',
							barWidth: 30,
							data: data[1].data
						},
					]
				};
				let myChart = echarts.init(document.getElementById('myChart'));
				myChart.setOption(option);

				myChart.off('legendselectchanged') // 取消事件，避免事件绑定重复导致多次触发
				myChart.on('legendselectchanged', e => {
					let index = data.findIndex(v => v.name === e.name)
					let flag = sort[index]
					sort = sort.map(v => false) // 全部重置为false，保证同时只能根据一个字段排序
					sort[index] = !flag
					initChart(rootData)
				})
			}
		</script>
	</body>
</html>