大数据可视化实验 —— 动态柱状图&饼图

最新推荐文章于 2023-11-04 17:35:42 发布

forward7777

最新推荐文章于 2023-11-04 17:35:42 发布

阅读量1.2k

点赞数

分类专栏：大数据可视化

本文链接：https://blog.csdn.net/Justice_God/article/details/115679640

版权

本文介绍了大数据可视化的实验，通过动态柱状图和饼图展示福布斯全球富豪排行榜前20名的数据。实验中使用了setTimeout函数定时刷新数据，并讨论了值域设置、颜色映射以及存在的优化空间，如动态时间轴交互问题和柱状图的暂停功能。同时提到了数据源管理的问题，当baseOption组件中dataset配置多组source时，可能引发options组件内series数据展示异常。

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

大数据可视化

福布斯全球富豪排行榜（分析前20名）

实验结果
在这里插入图片描述

刷新数据的方法（ setTimeout（“函数名”,3000））

function函数封装option组件
setTimeout(“a2012()”, 3000); 设置等待刷新时间
myChart.setOption(option); 刷新页面数据

值域选择（全局设置）

min：10
max：200
值域颜色：绿色：红色 == 低收入：高收入
注：options组件内的title作用域小于 baseOption组件里的title作用域！

有待优化的地方

下方动态时间轴的按钮无法点击触发跳转。
柱状图不能暂停。
若用 timeline组件存放数据源会出现刷新数据问题
– baseOption组件中,dataset组件配置多组source数据源。
– 造成options组件中的多组series显示数据出问题。（柱状图y/x轴坐标的数据超过了20条）

源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Experiment</title>
		<!-- 使用在线js -->
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
		<!-- 注意：学校实验平台里的echarts.min.js资源无法正常显示，需从上面网站下载 -->
		<!-- <script type="text/javascript" src="js/echarts.min.js"></script> -->
	</head>
	<body>
		<h1>大数据可视化实验</h1>
		<div id="container" style="width: 1500px;height: 640px;">

			<!-- 数据配置 -->
			<script type="text/javascript">
				// 计时当前延迟总时间
				var sleepTime = 3000;
				// 每次延迟时间
				var intervalTime = 3000;

				// 坐标轴名字
				const xAxisName = "money";
				const yAxisName = "peopleName";
				const weightName = "score";

				// 值域范围
				minWeightArea = 10;
				maxWeightArea = 200;

				// 标题名字
				var titleName = [];
				var year = 2011;
				for (var i = 0; i < 11; i++) {
   
					var str = year + "福布斯全球富豪排行榜";
					titleName[i] = str;
					year += 1;
				};

				// 子标题名字
				var subTitleName = "数据来自MBA智库百科";

				// 时间轴坐标值以及样式
				const axisData = [
					'2011-01-01', '2012-01-01', '2013-01-01',
					{
   
						value: '2014-01-01',
						symbol: 'diamond',
						symbolSize: 16 //点大小
					},
					'2015-01-01', '2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01',
					{
   
						value: '2020-01-01',
						symbol: 'diamond',
						symbolSize: 16
					}, '2021-01-01',
				];

				//source每年数据设置
				const source2011 = [
					[weightName, xAxisName, yAxisName],
					[74, 740, 'Carlos Slim Helu'],
					[56, 560, 'Bill Gates'],
					[50, 500, 'Warren Buffett'],
					[41, 410, 'Bernard Arnault'],
					[39.5, 395, 'Larry Ellison'],
					[31.1, 311, 'Lakshmi Mittal'],
					[31, 310, 'Amancio Ortega'],
					[30, 300, 'Eike Batista'],
					[27, 270, 'Mukesh Ambani'],
					[26.5, 265, 'Christy Walton'],
					[26, 260, 'Ka-shing Li'],
					[25.5, 255, 'Karl Albrecht'],
					[24.5, 245, 'Stefan Persson'],
					[24, 240, 'Vladimir Lisin'],
					[23.5, 235, 'Liliane Bettencourt'],
					[23.3, 233, 'Sheldon Adelson'],
					[23, 230, 'David Thomson'],
					[22, 220, 'Charles Koch'],
					[22, 220, 'David Koch'],
					[21.3, 213, 'Jim Walton'],
				];

				const source2012 = [
					[weightName, xAxisName, yAxisName],
					[69, 690, "Carlos Slim Helu"],
					[61, 610, "Bill Gates"],
					[44, 440, "Warren Buffett"],
					[41, 410, "Bernard Arnault"],
					[37.5, 375, "Amancio Ortega"],
					[36, 360, "Larry Ellison"],
					[30, 300, "Eike Batista"],
					[26, 260, "Stefan Persson"],
					[25.5, 255, "Li Ka-shing"],
					[25.4, 254, "Karl Albrecht"],
					[25.3, 253, "Christy Walton"],
					[25, 250, "Charles Koch"],
					[25, 250, "David Koch"],
					[24.9, 249, "Sheldon Adelson"],
					[24, 240, "Liliane Bettencourt"],
					[23.7, 237, "Jim Walton"],
					[23.3, 233, "Alice Walton"],
					[23.1, 231, "S. Robson Walton"],
					[22.3, 223, "Mukesh Ambani"],
					[22, 220, "Michael Bloomberg"],
				];

				const source2013 = [
					[weightName, xAxisName, yAxisName],
					[73, 730, "Carlos Slim Helu"],
					[67, 670, "Bill Gates"],
					[57, 570, "Amancio Ortega"],
					[53.5, 535, "Warren Buffett"],
					[43, 430, "Larry Ellison"],
					[34, 340, "Charles Koch"],
					[34, 340, "David Koch"],
					[31, 310, "Li Ka-shing"],
					[30, 300, "Liliane Bettencourt"],
					[29, 290, "Bernard Arnault"],
					[28.2, 282, "Christy Walton"],
					[28, 280, "Stefan Persson"],
					[27, 270, "Michael Bloomberg"],
					[26.7, 267, "Jim Walton"],
					[26.5, 265, "Sheldon Adelson"],
					[26.3, 263, "Alice Walton"],
					[26.1, 261, "S. Robson Walton"],
					[26, 260, "Karl Albrecht"],
					[25.2, 252, "Jeff Bezos"],
					[23, 230, "Larry Page"],
				];

				const source2014 = [
					[weightName, xAxisName, yAxisName],
					[76, 760, "Bill Gates"],
					[72, 720, "Carlos Slim Helu"],
					[64, 640, "Amancio Ortega"],
					[58.2, 582, "Warren Buffett"],
					[48, 480, "Larry Ellison"],
					[40, 400, "Charles Koch"],
					[40, 400, "David Koch"],
					[38,

最低0.47元/天解锁文章

forward7777

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
大数据可视化实验 —— 动态柱状图&饼图

大数据可视化实验二：福布斯全球富豪排行榜（分析前20名）采用timeline组件会出现刷新数据问题baseOption组件中,dataset组件配置多组source数据源。造成options组件中的多组series显示数据出问题。（柱状图y/x轴坐标出现更多的数据）刷新数据的方法（核心 setTimeout（“函数名”,3000））function函数封装option组件setTimeout(“a2012()”, 3000); 设置等待刷新时间myChart.setOptio
复制链接

扫一扫

专栏目录