初始化数据可视化项目

2025-04-27 08:48:28 +08:00
commit 1984d69e6d
41 changed files with 325354 additions and 0 deletions
--- a/experiment_5/task4/echarts模板/3_sales_region对照模板.html
+++ b/experiment_5/task4/echarts模板/3_sales_region对照模板.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+
+	<meta charset="utf-8">
+	<title>绘制第一个图表</title>
+	<script src="../js/echarts.min.js"></script>
+	<script src="../js/d3.min.js"></script>
+</head>
+
+<body>
+	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
+	<div id="main" style="width: 600px;height:400px;"></div>
+	<script>
+		var myChart = echarts.init(document.getElementById('main'));
+		var option = {
+			backgroundColor: '#323a5e', // 图表的背景颜色为 '#323a5e'
+			tooltip: {
+				trigger: 'axis',  // 表示提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息。
+				axisPointer: {
+					type: 'shadow' // 表示坐标轴指示器的样式为阴影，即鼠标悬停时，会在对应的数据点周围显示一个阴影区域。
+				},
+				textStyle: {// 提示框文本的样式，包括颜色（蓝色）和字体大小（10像素）。
+					color: '#0099FF',
+					fontSize: 10,
+				}
+			},
+			grid: {
+				left: '2%', // 图表距离容器左侧的距离为2%
+				right: '4%', // 图表距离容器右侧的距离为4%
+				bottom: '14%', // 图表距离容器底部的距离为14%
+				top: '16%', // 图表距离容器顶部的距离为16%
+				containLabel: true // 是否包含坐标轴刻度标签在内，设置为true表示包含
+			},
+			// 设置图例（legend）的样式和位置
+			legend: {
+				data: ['销售额', '利润'], // 表示图例中包含两个数据项
+				right: 10, // 图例距离容器右侧的距离为10
+				top: 12, // 图例距离容器顶部的距离为12
+				// 图例文本的颜色为白色，字体大小为10
+				textStyle: {
+					color: "#fff",
+					fontSize: 10,
+				},
+
+				itemWidth: 12, // 图例中每个数据项的宽度为12
+				itemHeight: 10, // 图例中每个数据项的高度为10
+				// itemGap: 35
+			},
+			xAxis: {
+				type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
+				data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
+				axisLine: {
+					lineStyle: {
+						color: 'white' // x轴线的颜色为白色
+
+					}
+				},
+				// x轴刻度标签的字体大小为8，颜色为蓝色
+				axisLabel: {
+					fontSize: 8,
+					color: '#2094CA',
+				},
+			},
+
+			yAxis: {
+				type: 'value', // y轴的类型为数值型，即显示的是连续的数据点
+				// y轴线显示，并且线的颜色为白色
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: 'white'
+					}
+				},
+				// y轴的分割线显示，分割线的颜色为半透明的白色
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: 'rgba(255,255,255,0.3)'
+					}
+				},
+				// y轴刻度标签的字体大小为8，颜色为蓝色
+				axisLabel: {
+					fontSize: 8,
+					color: '#2094CA',
+				},
+			},
+			series: [{
+				name: '销售额', // 图表的名称
+				type: 'bar', // 图表类型为柱状图
+				barWidth: '15%', // 柱子的宽度为图表宽度的15%
+				label: { show: false }, // 不显示柱子上的标签
+				// 柱子的颜色使用渐变色，从上到下由黄色（#fccb05）渐变为橙色（#f5804d），并且柱子的边框圆角半径为12
+				itemStyle: {
+					normal: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#fccb05'
+						}, {
+							offset: 1,
+							color: '#f5804d'
+						}]),
+						barBorderRadius: 12,
+					},
+
+				},
+				data: [400, 400, 300, 300, 300, 400, 400, 400, 300],  // 柱状图的数据
+			},
+			{
+				name: '利润', // 图表的名称
+				type: 'bar', // 图表类型为柱状图
+				barWidth: '15%', // 柱子的宽度为图表宽度的15%
+				label: { show: false }, // 不显示柱子上的标签
+				// 柱子的颜色使用渐变色，从上到下由绿色（#8bd46e）渐变为深蓝色（#09bcb7），并且柱子的边框圆角半径为11个单位
+				itemStyle: {
+					normal: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#8bd46e'
+						}, {
+							offset: 1,
+							color: '#09bcb7'
+						}]),
+						barBorderRadius: 11,
+					}
+				},
+				data: [400, 500, 500, 500, 500, 400, 400, 500, 500], // 柱状图的数据
+			}]
+		};
+		// 这段代码的作用是在 ECharts 图表中每隔 2 秒自动切换高亮的图形，并显示相应的提示框。
+		var currentIndex = -1;
+		setInterval(function () {
+			var dataLen = option.series[0].data.length;
+			// 取消之前高亮的图形
+			myChart.dispatchAction({
+				type: 'downplay',
+				seriesIndex: 0,
+				dataIndex: currentIndex
+			});
+			currentIndex = (currentIndex + 1) % dataLen;
+			// 高亮当前图形
+			myChart.dispatchAction({
+				type: 'highlight',
+				seriesIndex: 0,
+				dataIndex: currentIndex
+			});
+			// 显示 tooltip
+			myChart.dispatchAction({
+				type: 'showTip',
+				seriesIndex: 0,
+				dataIndex: currentIndex
+			});
+		}, 2000);
+
+		myChart.setOption(option)
+	</script>
+</body>
+
+</html>