Echarts夺标联动

最新推荐文章于 2024-07-30 23:06:43 发布

81071890

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量100

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/2301_81071890/article/details/137635036

版权

本文通过ECharts图表展示了王者荣耀中赵云和狂铁在生存能力、输出强度以及上手难度方面的数据比较，帮助玩家了解两位英雄的特点。

摘要由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
				},
			},

			xAxis: [{
				data: ["生存能力","输出强度","上手难度"
				],
				axisLabel: {
					interval: 0
				}
			}],
			yAxis: [{
				type: 'value',
			}],
			series: [{ // 配置第1个图表的数据系列
				
				type: 'bar',
				barWidth: 40, // 设置柱状图中每个柱子的宽度
				data: [70,85,55],
			}]
		};
		// 基于准备好的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
			},

			xAxis: [{
				data: ["生存能力","输出强度","上手难度"
				],
				axisLabel: {
					interval: 0
				}
			}],
			yAxis: [{
				type: 'value',
			}],
			series: [{ // 配置第2个图表的数据系列
				
				type: 'bar',
				barWidth: 40, // 设置柱状图中每个柱子的宽度
				data: [80,85,60],
			}]
		};
		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>

运行结果如下