devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ECharts数据可视化：入门、实战与进阶干货_echarts 数据可视化:入门、实战与进阶.pdf

作者：小丑西瓜9 | 2024-04-02 21:01:21

赞

踩

echarts 数据可视化:入门、实战与进阶.pdf

ECharts数据可视化：入门、实战与进阶干货

定义

     ECharts，Enterprise Charts，商业级数据图表，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 端和移动端的绝大部分浏览器上，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

特性

  1. 丰富的可视化类型（统计数据可视化、地理数据可视化、关系数据可视化）
  2. 多种数据格式无需转换直接使用（二维表、key-value键值对）
  3. 千万数据的前端展示
  4. 移动端优化，交互和布局适配，按需打包
  5. 跨平台使用（PC端、移动端、微信小程序）
  6. 绚丽的特效
  7. ......

ECharts 基本使用

快速上手五部曲

  • 引入 echarts.js 文件
  • 准备一个呈现图表的盒子
  • 基于 DOM 容器，初始化 echarts 实例对象
  • 指定配置项和数据
  • 将配置项设置给 echarts 实例对象

基础配置

首先 ECharts 的图形化呈现主要是通过配置方法来实现的 setOption，然后是对图形标签进行初始化，最后把配置方法 setOption 赋值到初始化图形中，详细的配置文件请戳这里 https://echarts.apache.org/zh/option.html#title

编程实操

HTML基本模板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. 	<title>HTML基本页面模板</title>
  8. </head>
  9. <body>
  10. 	<!-- 1.引入echarts.js文件，通过CDN引入 -->
  11. 	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  12. 	<!-- 2.准备一个呈现图表的盒子，必须设置宽高 -->
  13. 	<div id="main" style="width:600px;height:450px;"></div>
  14. 	<script>
  15. 		// 3.获取DOM元素，初始化echarts实例
  16. 		var myChart = echarts.init(document.getElementById('main'));
  17. 		// 4.指定图表的配置项和数据
  18. 		var option = {
  19. 			// ...
  20. 		}
  21. 		// 5.使用指定的配置项和数据显示图表
  22. 		myChart.setOption(option);
  23. 	</script>
  24. </body>
  25. </html>

折线图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. 	<title>echarts折线图示例</title>
  8. </head>
  9. <body>
  10. 	<!-- 1.引入echarts.js文件 -->
  11. 	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  12. 	<!-- 2.准备一个呈现图表的盒子 -->
  13. 	<div id="main" style="width:600px;height:450px;"></div>
  14. 	<script>
  15. 		// 3.获取DOM元素，初始化echarts实例
  16. 		var myChart = echarts.init(document.getElementById('main'));
  17. 		// 4.指定图表的配置项和数据
  18. 		var option = {
  19. 			title: { // 标题
  20. 				text: 'Echarts入门示例'
  21. 			},
  22. 			tooltip: {
  23. 				trigger: 'axis', // 坐标轴触发
  24. 				axisPointer: { // 坐标轴指示器
  25. 		            type: 'cross',
  26. 		            label: {
  27. 		                backgroundColor: '#283b56'
  28. 		            }
  29. 		        }
  30. 			}, // 提示框
  31. 			legend: {
  32. 				data: ['区块链应用']
  33. 			}, // 图例
  34. 			xAxis: { // 直角坐标系x轴
  35. 				data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '敏捷指控']
  36. 			},
  37. 			yAxis: {
  38. 				name: '注册用户（个）',
  39. 			}, // 直角坐标系y轴
  40. 			series: [{ // 系列列表
  41. 				name: '区块链应用', // 系列名称
  42. 				type: 'line', // 图表类型
  43. 				smooth: true, // 平滑曲线显示
  44. 				data: [48, 18, 9, 25, 2], // 数据内容数组 
  45. 			}]
  46. 		}
  47. 		// 5.使用指定的配置项和数据显示图表
  48. 		myChart.setOption(option);
  49. 	</script>
  50. </body>
  51. </html>

柱状图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. 	<title>echarts柱状图示例</title>
  8. </head>
  9. <body>
  10. 	<!-- 1.引入echarts.js文件 -->
  11. 	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  12. 	<!-- 2.准备一个呈现图表的盒子 -->
  13. 	<div id="main" style="width:600px;height:450px;"></div>
  14. 	<script>
  15. 		// 3.获取DOM元素，初始化echarts实例
  16. 		var myChart = echarts.init(document.getElementById('main'));
  17. 		// 4.指定图表的配置项和数据
  18. 		var option = {
  19. 			title: { // 标题
  20. 				text: 'Echarts入门示例'
  21. 			},
  22. 			tooltip: {
  23. 				trigger: 'axis', // 坐标轴触发
  24. 				axisPointer: { // 坐标轴指示器
  25. 		            type: 'shadow',
  26. 		            label: {
  27. 		                backgroundColor: '#283b56'
  28. 		            }
  29. 		        }
  30. 			}, // 提示框
  31. 			legend: {
  32. 				data: ['区块链应用']
  33. 			}, // 图例
  34. 			xAxis: { // 直角坐标系x轴
  35. 				data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '敏捷指控']
  36. 			},
  37. 			yAxis: {
  38. 				name: '注册用户（个）',
  39. 			}, // 直角坐标系y轴
  40. 			series: [{ // 系列列表
  41. 				name: '区块链应用', // 系列名称
  42. 				type: 'bar', // 图表类型
  43. 				data: [48, 18, 9, 25, 2], // 数据内容数组 
  44. 			}]
  45. 		}
  46. 		// 5.使用指定的配置项和数据显示图表
  47. 		myChart.setOption(option);
  48. 	</script>
  49. </body>
  50. </html>

饼图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. 	<title>echarts柱状图示例</title>
  8. </head>
  9. <body>
  10. 	<!-- 1.引入echarts.js文件 -->
  11. 	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  12. 	<!-- 2.准备一个呈现图表的盒子 -->
  13. 	<div id="main" style="width:600px;height:450px;"></div>
  14. 	<script>
  15. 		// 3.获取DOM元素，初始化echarts实例
  16. 		var myChart = echarts.init(document.getElementById('main'));
  17. 		// 4.指定图表的配置项和数据
  18. 		var option = {
  19. 			title: { // 标题
  20. 				text: 'Echarts入门示例'
  21. 			},
  22. 			tooltip: {
  23. 				trigger: 'item', // 数据项图形触发
  24. 				formatter: '{a} <br/>{b} : {c} ({d}%)'
  25. 			}, // 提示框
  26. 			legend: {
  27. 				data: ['区块链应用']
  28. 			}, // 图例
  29. 			series: [{ // 系列列表
  30. 				name: '区块链应用', // 系列名称
  31. 				type: 'pie', // 图表类型
  32. 				data: [
  33. 					{
  34. 						value: 48, name: '天河数通'
  35. 					},
  36. 					{
  37. 						value: 18, name: '地质大数据'
  38. 					},
  39. 					{
  40. 						value: 9, name: '自主可控公链'
  41. 					},
  42. 					{
  43. 						value: 20, name: '优版权'
  44. 					},
  45. 					{
  46. 						value: 2, name: '敏捷指控'
  47. 					}
  48. 				] 
  49. 			}]
  50. 		}
  51. 		// 5.使用指定的配置项和数据显示图表
  52. 		myChart.setOption(option);
  53. 	</script>
  54. </body>
  55. </html>

地图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. 	<title>echarts实现地图数据展示</title>
  8. 	<style>
  9. 	html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label {
  10. 			margin: 0;
  11. 			padding: 0;
  12. 			border: 0;
  13. 			outline: 0;
  14. 			font-size: 100%;
  15. 			vertical-align: baseline;
  16. 			background: transparent
  17. 		}
  18. 		html,body {
  19. 			width: 100%;
  20. 			height: 100%;
  21. 		}
  22. 		#main {
  23. 			width: 1000px;
  24. 			height: 900px;
  25. 		}
  26. 	</style>
  27. </head>
  28. <body>
  29. 	<!-- 1.引入echarts.js文件 -->
  30. 	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  31. 	<script src="china.js"></script>
  32. 	<!-- <script src="world.js"></script> -->
  33. 	<!-- 2.准备一个呈现图表的盒子 -->
  34. 	<div id="main"></div>
  35. 	<script>
  36. 		// 3.获取DOM元素，初始化echarts实例
  37. 		var myChart = echarts.init(document.getElementById('main'));
  38. 		var dataList =  [
  39.             {name: '南海诸岛', value:0},
  40.             {name: '北京', value: randomValue()},
  41.             {name: '天津', value: randomValue()},
  42.             {name: '上海', value: randomValue()},
  43.             {name: '重庆', value: randomValue()},
  44.             {name: '河北', value: randomValue()},
  45.             {name: '河南', value: randomValue()},
  46.             {name: '云南', value: randomValue()},
  47.             {name: '辽宁', value: randomValue()},
  48.             {name: '黑龙江', value: randomValue()},
  49.             {name: '湖南', value: randomValue()},
  50.             {name: '安徽', value: randomValue()},
  51.             {name: '山东', value: randomValue()},
  52.             {name: '新疆', value: randomValue()},
  53.             {name: '江苏', value: randomValue()},
  54.             {name: '浙江', value: randomValue()},
  55.             {name: '江西', value: randomValue()},
  56.             {name: '湖北', value: randomValue()},
  57.             {name: '广西', value: randomValue()},
  58.             {name: '甘肃', value: randomValue()},
  59.             {name: '山西', value: randomValue()},
  60.             {name: '内蒙古', value: randomValue()},
  61.             {name: '陕西', value: randomValue()},
  62.             {name: '吉林', value: randomValue()},
  63.             {name: '福建', value: randomValue()},
  64.             {name: '贵州', value: randomValue()},
  65.             {name: '广东', value: randomValue()},
  66.             {name: '青海', value: randomValue()},
  67.             {name: '西藏', value: randomValue()},
  68.             {name: '四川', value: randomValue()},
  69.             {name: '宁夏', value: randomValue()},
  70.             {name: '海南', value: randomValue()},
  71.             {name: '台湾', value: randomValue()},
  72.             {name: '香港', value: randomValue()},
  73.             {name: '澳门', value: randomValue()}
  74.     	]
  75.  
  76. 		function randomValue() {
  77. 			return Math.round(Math.random() * 1000);
  78. 		}
  79.  
  80. 		// 指定图表的配置项和数据
  81. 		var option = {
  82. 			tooltip: {
  83. 				trigger: 'item', // 数据项图形触发
  84. 				// 数据格式化
  85. 		        // formatter: function(params, ticket, cb) {
  86.           //           return params.seriesName + '<br />' + params.name+ '：' + params.value;
  87.           //       }
  88. 		    },
  89. 		    visualMap: { // 视觉映射
  90.                 min: 0,
  91.                 max: 1000,
  92.                 left: 'left',
  93.                 top: 'bottom',
  94.                 text: ['高','低'], // 取值范围的文字
  95.                 realtime: false,  // 拖拽时，是否实时更新
  96.                 calculable: true,  // 是否显示拖拽用的手柄
  97.                 color: ['orangered', 'yellow', 'lightskyblue'],  
  98.                 // inRange: {
  99.                 //     color: ['#e0ffff', '#006edd'] // 取值范围的颜色
  100.                 // },
  101.                 // show: false // 图注
  102.             },
  103. 			series: [{
  104. 				name: '信息量',
  105. 				type: 'map', 
  106.             	map: 'china', // 地图类型
  107. 				roam: false, // 是否开启鼠标缩放和平移
  108. 				// zoom: 1.2, // 视角缩放比例
  109.             	label: {
  110.                     normal: {
  111.                         show: true,
  112.                         fontSize: '10',
  113.                         color: 'rgba(0, 0, 0, 0.7)',
  114.                         formatter: '{b} \n\n {c}'
  115. 					}
  116.                 },
  117.  
  118.                 itemStyle: {
  119.                     normal:{
  120.                         borderColor: 'rgba(0, 0, 0, 0.2)'
  121.                     },
  122.                     emphasis:{
  123.                         areaColor: '#f3e42e', // 鼠标选择区域颜色
  124.                         shadowOffsetX: 0,
  125.                         shadowOffsetY: 0,
  126.                         shadowBlur: 20,
  127.                         borderWidth: 0,
  128.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  129.                     }
  130.                 },
  131. 				data: dataList1
  132. 			}]
  133. 		}
  134. 		// 使用指定的配置项和数据显示图表
  135. 		myChart.setOption(option);
  136.  
  137. 		setInterval(() => {
  138. 			var dataList =  [
  139. 	            {name: '南海诸岛', value:0},
  140. 	            {name: '北京', value: randomValue()},
  141. 	            {name: '天津', value: randomValue()},
  142. 	            {name: '上海', value: randomValue()},
  143. 	            {name: '重庆', value: randomValue()},
  144. 	            {name: '河北', value: randomValue()},
  145. 	            {name: '河南', value: randomValue()},
  146. 	            {name: '云南', value: randomValue()},
  147. 	            {name: '辽宁', value: randomValue()},
  148. 	            {name: '黑龙江', value: randomValue()},
  149. 	            {name: '湖南', value: randomValue()},
  150. 	            {name: '安徽', value: randomValue()},
  151. 	            {name: '山东', value: randomValue()},
  152. 	            {name: '新疆', value: randomValue()},
  153. 	            {name: '江苏', value: randomValue()},
  154. 	            {name: '浙江', value: randomValue()},
  155. 	            {name: '江西', value: randomValue()},
  156. 	            {name: '湖北', value: randomValue()},
  157. 	            {name: '广西', value: randomValue()},
  158. 	            {name: '甘肃', value: randomValue()},
  159. 	            {name: '山西', value: randomValue()},
  160. 	            {name: '内蒙古', value: randomValue()},
  161. 	            {name: '陕西', value: randomValue()},
  162. 	            {name: '吉林', value: randomValue()},
  163. 	            {name: '福建', value: randomValue()},
  164. 	            {name: '贵州', value: randomValue()},
  165. 	            {name: '广东', value: randomValue()},
  166. 	            {name: '青海', value: randomValue()},
  167. 	            {name: '西藏', value: randomValue()},
  168. 	            {name: '四川', value: randomValue()},
  169. 	            {name: '宁夏', value: randomValue()},
  170. 	            {name: '海南', value: randomValue()},
  171. 	            {name: '台湾', value: randomValue()},
  172. 	            {name: '香港', value: randomValue()},
  173. 	            {name: '澳门', value: randomValue()}
  174. 	    	]
  175.  
  176. 	    	myChart.setOption({
  177. 	    		series: [{
  178. 	    			data: dataList
  179. 	    		}]
  180. 	    	});
  181. 		}, 3000)
  182. 	</script>
  183. </body>
  184. </html>

运行效果如下图所示：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/353804
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号