王者荣耀人物分析柱状图

我喜欢秋天716

已于 2024-04-15 09:56:52 修改

阅读量81

点赞数 1

文章标签：前端 javascript html

于 2024-04-15 09:50:16 首次发布

本文链接：https://blog.csdn.net/2302_80385440/article/details/137767227

版权

<!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>
	<!-- 第一个水印 -->
  <div class="watermark1"></div>
  <!-- 第二个水印 -->
  <div class="watermark2"></div>
	<!-- <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: gray; font-size: small;">发财糕</div> -->
	<script type="text/javascript">
		// 基于准备好的dom，初始化ECharts图表
		var myChart1 = echarts.init(document.getElementById("main1"));
		var waterMarkText = '略略略'; // 设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.globalAlpha = 0.08;
		ctx.font = '30px Microsoft Yahei'; // 设置水印文字的字体
		ctx.translate(50, 50); // 设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0); // 设置填充水印		
		var option1 = { // 指定第1个图表的配置项和数据
			//color: ['pink', 'black', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', // rgba设置透明度0.1
			title: {
				text: '王者荣耀人物分析',
				left: 40,
				top: 5
			},
            tooltip: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { 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
                                '#FA897B','#FFDD94','#D0E6A5','#FFDD94','#4675C0'
								];
								return colorList[params.dataIndex]
							},
						}
					},
				barWidth: 40, // 设置柱状图中每个柱子的宽度
                emphasis: {
                label: {
                    fontSize: 25
                }
                },    //高亮样式
 
				data: [164, 262, 80, 175, 108],
			}]
		};
		// 基于准备好的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: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
			legend: {
				data: ['西施'],
				left: 422,
				color:'pink',
				top: 8
			},
			xAxis: [{
				data: ["生存能力", "输出能力", "控制能力",
					"移动能力", "技能效果"
				],
				axisLabel: {
					interval: 0
				}
			}],
			yAxis: [{
				type: 'value',
			}],
			series: [{ // 配置第2个图表的数据系列
				name: '西施',
				type: 'scatter',
				itemStyle: { // 设置柱状图颜色
						normal: {
							color: function (params) {
								var colorList = [ //build a color map as your need
                                '#FA897B','#FFDD94','#D0E6A5','#FFDD94','#4675C0'
								];
								return colorList[params.dataIndex]
							},
						}
					},
				barWidth: 40, // 设置柱状图中每个柱子的宽度
                emphasis: {
                label: {
                    fontSize: 25
                }
                },    //高亮样式
				data: [225, 222, 98, 56, 250],
 
			}]
		};
		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>