Echarts多表联动图-CSDN博客

本文链接：https://blog.csdn.net/2303_77733754/article/details/137628669

本文介绍了如何使用ECharts库在HTML页面中创建两个图表，分别展示角色的生命值、攻击力等属性，包括配置项设置、数据系列定义和多图表之间的联动功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<script type="text/javascript" src='../js/echarts.js'></script>
</head>
 <body>
	<div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化ECharts图表
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = { // 指定第1个图表的配置项和数据
			//color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', // rgba设置透明度0.1
			
			title: {
				text: '丹恒.饮月',
				left: 40,
				top: 5
			},
			tooltip: {
				tooltip: {
					show: true
				},
			},
			legend: {
				data: ['丹恒.饮月角色详情'],
				left: 422,
				color:'pink',
				top: 8
			},
			xAxis: [{
				data: ["生命值", "攻击力", "防御力",
					"速度", "暴击率", "暴击伤害"
				],
				axisLabel: {
					interval: 0
				}
			}],
			yAxis: [{
				type: 'value',
			}],
			series: [{ // 配置第1个图表的数据系列
				name: '丹恒.饮月角色详情',
				type: 'bar',
				itemStyle: { // 设置柱状图颜色
						normal: {
							color: function (params) {
								var colorList = [ //build a color map as your need
									'#fe9f4f', '#fead33', '#feca2b', '#fed728', '#c5ee4a',
									'#87ee4a', '#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8',
									'#4586d8', '#4f68d8', '#F4E001', '#F0805A', '#26C0C0'
								];
								return colorList[params.dataIndex]
							},
						}
					},
				barWidth: 40, // 设置柱状图中每个柱子的宽度
				data: [3543, 3138, 969, 102, 85.1, 166.6],
			}]
		};
		// 基于准备好的dom,初始化ECharts图表
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = { // 指定第2个图表的配置项和数据
			//color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', // rgba设置透明度0.1
			title: {
				text: '黄泉.巡海游侠',
				left: 40,
				top: 8
			},
			tooltip: {
				show: true
			},
			legend: {
				data: ['黄泉角色详情'],
				left: 422,
				color:'pink',
				top: 8
			},
			xAxis: [{
				data: ["生命值", "攻击力", "防御力",
					"速度", "暴击率", "暴击伤害"
				],
				axisLabel: {
					interval: 0
				}
			}],
			yAxis: [{
				type: 'value',
			}],
			series: [{ // 配置第2个图表的数据系列
				name: '黄泉角色详情',
				type: 'line',
				itemStyle: { // 设置柱状图颜色
						normal: {
							color: function (params) {
								var colorList = [ //build a color map as your need
									'#fe9f4f', '#fead33', '#feca2b', '#fed728', '#c5ee4a',
									'#87ee4a', '#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8',
									'#4586d8', '#4f68d8', '#F4E001', '#F0805A', '#26C0C0'
								];
								return colorList[params.dataIndex]
							},
						}
					},
				data: [3466, 3043, 1278, 130, 73.8, 176.7],
 
			}]
		};
		myChart1.setOption(option1); // 为myChart1对象加载数据
		myChart2.setOption(option2); // 为myChart2对象加载数据
		// 多图表联动配置方法1：分别设置每个echarts对象的group值
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
		// 多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
		echarts.connect([myChart1,myChart2]);
	</script>
</body>
</html>