企业管理系统定制开发Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理

Vue 之 echarts 企业管理系统定制开发图表常用的一些图表/动态图表/3D企业管理系统定制开发图表的简单整理

目录

（含代码）

一、简单介绍

Vue 企业管理系统定制开发开发的一些知识整理，企业管理系统定制开发方便后期遇到类似的问题，企业管理系统定制开发能够及时查阅使用。

本节介绍，vue 中添加 echarts ，然后在 vue 企业管理系统定制开发中简单使用一些 echarts企业管理系统定制开发中常用的图表，企业管理系统定制开发包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

ECharts 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

Echarts 官网文档：

Echarts 官网示例：

操作环境：

  • win 10
  • node v14.20.0
  • npm 8.5.3
  • @vue/cli 5.0.6
  • vue 2.6.14
  • echarts 5.3.3
  • echarts-liquidfill 3.1.0
  • echarts-gl 2.0.9

二、效果预览

（有若干图表其实是动态的）

三、注意事项

1、使用水球图时（echarts-liquidfil插件），echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

  1. npm引入：
  2. npm install echarts
  3. npm install echarts-liquidfill
  4.  
  5. cdn引入：
  6. <script src='echarts.js'></script>
  7. <script src='echarts-liquidfill.js'></script>

2、使用 echarts 3D 的时候，同时也注意下版本匹配，echarts-gl@2 版本匹配 echarts@5 版本，echarts-gl@1 版本匹配 echarts@4 版本

四、各种 echarts 图表（含代码）

1、水球图

注意：除了需要 echarts，还要 echarts-liquidfil 配合

  1. <template>
  2. 	<div class="wrap-container">
  3. 		<div class="wp-content">
  4. 			<div class="wp-title">水球图</div>
  5. 			<div class="wp-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-polo'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	// 注意 echartsLiquidfill ver3对应echarts 版本 5；（echartsLiquidfill ver2对应echarts 版本 4）
  16. 	// eslint-disable-next-line
  17. 	import echartsLiquidfill from "echarts-liquidfill";
  18. 	export default {
  19. 		name: 'water-polo',
  20. 		data() {
  21. 			return {
  22. 				option: null
  23. 			}
  24. 		},
  25. 		mounted() {
  26. 			this.getEchart()
  27. 		},
  28. 		methods: {
  29. 			getEchart() {
  30. 				// 获取渲染元素，创建 chart
  31. 				let myChart = this.$echarts.init(document.getElementById('chart-polo'))
  32. 				this.option = {
  33. 					series: [{
  34. 						// 水球图类型
  35. 						type: 'liquidFill',
  36. 						// 名称
  37. 						name: "测试",
  38. 						// 水波值，可多个
  39. 						data: [0.75],
  40. 						// 球相对渲染元素的宽高的半径比
  41. 						radius: '75%',
  42. 						// 水波颜色
  43. 						color: ['#00B9F5'],
  44. 						// 水波背景的样式
  45. 						backgroundStyle: {
  46. 							// 背景颜色
  47. 							color: 'rgba(0,0,0,0.5)',
  48. 							// 边框颜色
  49. 							borderColor: '#007bff',
  50. 							// 边框宽度
  51. 							borderWidth: 3,
  52. 							shadowColor: 'rgba(0,123,225,.4)',
  53. 							shadowBlur: 20
  54. 						},
  55. 						// 是否显示外轮廓
  56. 						outline: {
  57. 							show: true
  58. 						},
  59. 						
  60. 					}],
  61. 					// 鼠标进入是否显示提示
  62. 					tooltip:{
  63. 						show: true
  64. 					}
  65. 				}
  66.  
  67. 				myChart.setOption(this.option, true)
  68. 				window.addEventListener('resize', () => {
  69. 					myChart.resize()
  70. 				})
  71. 				// 第二种 水球图
  72. 				// const dataOption = {
  73. 				// 	value: 0.30,
  74. 				// 	itemStyle: { //渐变水球颜色
  75. 				// 	color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
  76. 				// 				offset: 0,
  77. 				// 				color: "pink",
  78. 				// 			},
  79. 				// 			{
  80. 				// 				offset: 1,
  81. 				// 				color: "skyblue",
  82. 				// 			},
  83. 				// 		]),
  84. 				// 	},
  85. 				// };
  86. 				// this.option = {
  87. 				// 	series: [{
  88. 				// 		type: "liquidFill",
  89.  
  90. 				// 		// 这三个属性值设置为false静止的波浪
  91. 				// 		// waveAnimation: false, //静止的波浪效果
  92. 				// 		animationDuration: 1000, // 波浪初始上涨时间
  93. 				// 		// eslint-disable-next-line
  94. 				//  	    // animationDurationUpdate: 0,//静止的波浪效果
  95. 				// 		// 这三个属性值设置为false静止的波浪
  96.  
  97. 				// 		amplitude: "5%", //振幅波浪大小
  98. 				// 		name: "一级预警",
  99. 				// 		data: [dataOption],
  100. 				// 		waveLength: "60%", //波浪长度
  101. 				// 		// eslint-disable-next-line
  102. 				// 		outline: {
  103. 				// 				//隐藏轮廓
  104. 				// 				show: false,
  105. 				// 			},
  106. 				// 		label: {
  107. 				// 			//字体内容、字体颜色、字体大小属性
  108. 				// 			formatter: "测试",
  109. 				// 			color: "#fff",
  110. 				// 			fontSize: 30,
  111. 				// 		},
  112. 				// 		backgroundStyle: {
  113. 				// 			//水球图背景
  114. 				// 			color: "#101fff",
  115. 				// 		},
  116.  
  117. 				// 		// color: ["#F87900"],
  118. 				// 	}, ],
  119. 				// 	tooltip: {
  120. 				// 		//鼠标滑过展示数据
  121. 				// 		show: true,
  122. 				// 	},
  123. 				// };
  124. 				
  125. 				// myChart.setOption(this.option);
  126. 			}
  127. 		}
  128. 	}
  129. </script>
  130.  
  131. <style lang="scss" scoped>
  132. 	.wp-title{
  133. 		text-align: center;
  134. 		color: white;
  135. 	}
  136. 	.wrap-container {
  137. 		width: 400px;
  138. 		height: 400px;
  139.  
  140. 		.chartsdom {
  141. 			width: 100%;
  142. 			height: 100%;
  143. 		}
  144. 	}
  145. </style>

2、滚动弧线图

 

  1. <template>
  2. 	<div class="wrap-container ra-container">
  3. 		<div class="ra-content">
  4. 			<div class="ra-title">滚动弧线图</div>
  5. 			<div class="ra-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-rollArc'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'roll-arcline',
  17. 		data() {
  18. 			return {
  19. 				option: null,
  20. 				xIndex: 0,
  21. 				timer: null,
  22. 				xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  23. 				yData: [54, 86, 46, 77, 96, 89, 88, 23, 38, 3, 66, 98]
  24. 			}
  25. 		},
  26.  
  27. 		mounted() {
  28. 			this.getEchart()
  29. 		},
  30.  
  31. 		methods: {
  32. 			getEchart() {
  33. 				// 图标渲染体
  34. 				const chartRollArc = document.getElementById('chart-rollArc')
  35. 				// 初始化图表
  36. 				let myChart = this.$echarts.init(chartRollArc)
  37. 				this.option = {
  38. 					tooltip: {
  39. 						trigger: 'axis',
  40. 						showContent: true,
  41. 						axiosPointer: {
  42. 							type: 'shadow',
  43. 							shadowStyle: {
  44. 								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  45. 										offset: 1,
  46. 										color: '#5d83ff'
  47. 									},
  48. 									{
  49. 										offset: 0,
  50. 										color: 'rgba(255,255,255,0)'
  51. 									}
  52. 								])
  53. 							}
  54. 						},
  55. 						
  56. 						// 重新构造图标信息显示（不写会有默认的格式）
  57. 						formatter: (params) => {
  58. 							// console.log(params)
  59. 							params = params[0]
  60. 							if (params.seriesIndex === 0)
  61. 							// console.log(' origin '+ this.xIndex)
  62. 								this.xIndex = parseInt(params.name) - 1
  63. 								// console.log(' fuzhi '+ this.xIndex)
  64. 							return params.name + '月</br>' + params.seriesName + '：' + params.value + ' 人'
  65. 						},
  66. 					},
  67.  
  68. 					color: ['#5d83ff'],
  69. 					grid: {
  70. 						top: 30,
  71. 						left: 30,
  72. 						right: 20,
  73. 						bottom: 20,
  74. 						containerLabel: true
  75. 					},
  76. 					xAxis: {
  77. 						type: 'category',
  78. 						data: this.xData,
  79. 						boundaryGap: false,
  80. 						axisTick: {
  81. 							show: false
  82. 						},
  83. 						axisLabel: {
  84. 							formatter: '{value} 月'
  85. 						},
  86. 						axisLine: {
  87. 							lineStyle: {
  88. 								color: '#999'
  89. 							}
  90. 						}
  91. 					},
  92. 					yAxis: {
  93. 						type: 'value',
  94. 						axisLine: {
  95. 							show: false,
  96. 							lineStyle: {
  97. 								color: '#999'
  98. 							}
  99. 						},
  100. 					},
  101. 					series: [{
  102. 						name: '人数',
  103. 						type: 'line',
  104. 						data: this.yData,
  105. 						symbolSize: 10,
  106. 						itemStyle: {
  107. 							opacity: 0,
  108. 						},
  109. 						emphasis: {
  110. 							label: {
  111. 								show: true,
  112. 								color: '#fff',
  113. 								fontSize: 20
  114. 							},
  115. 							itemStyle: {
  116. 								color: '#5d83ff',
  117. 								borderColor: '#fff',
  118. 								borderWidth: 2,
  119. 								opacity: 1
  120. 							},
  121. 						},
  122. 						areaStyle: {
  123. 							normal: {
  124. 								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  125. 									offset: 0,
  126. 									color: '#5d83ff'
  127. 								}, {
  128. 									offset: 1,
  129. 									color: 'rgba(0, 0, 0, 0)'
  130. 								}]),
  131. 							}
  132. 						},
  133. 						smooth: true,
  134. 					}]
  135.  
  136. 				}
  137.  
  138. 				// 绘制图表
  139. 				myChart.setOption(this.option, true);
  140.  
  141. 				// 监听窗口变化
  142. 				window.addEventListener('resize', () => {
  143. 					myChart.resize();
  144. 				});
  145.  
  146. 				// 开启自动显示信息
  147. 				this.startChartAutoShowTip(myChart)
  148. 				
  149. 				// 鼠标进入停止自动显示信息
  150. 				chartRollArc.onmouseover = () => {
  151. 					// console.log('mouseover')
  152. 					// alert('mouseover')
  153. 					this.stopChartAutoShowTip()
  154. 				}
  155. 				// 退出 chartRollArc 继续自动显示信息
  156. 				chartRollArc.onmouseout = () => {
  157. 					// console.log('mouseout')
  158. 					// alert('mouseout')
  159. 					this.startChartAutoShowTip(myChart);
  160. 				}
  161.  
  162. 			},
  163.  
  164. 			/**
  165. 			 * 自动显示图标信息函数
  166. 			 * @param {Object} myChart
  167. 			 */
  168. 			startChartAutoShowTip(myChart) {
  169. 				this.stopChartAutoShowTip()
  170.  
  171. 				this.timer = setInterval(() => {
  172. 					// 显示图标信息
  173. 					myChart.dispatchAction({
  174. 						type: 'showTip',
  175. 						seriesIndex: 0,
  176. 						dataIndex: this.xIndex
  177. 					});
  178.  
  179. 					this.xIndex++;
  180. 					// console.log(this.xIndex)
  181. 					if (this.xIndex > this.yData.length) {
  182. 						this.xIndex = 0;
  183. 					}
  184. 				}, 1000);
  185.  
  186. 			},
  187. 			
  188. 			/**
  189. 			 * 停止自动显示图标信息函数
  190. 			 */
  191. 			stopChartAutoShowTip() {
  192. 				if (this.timer != null) {
  193. 					clearInterval(this.timer)
  194. 					this.timer = null
  195. 				}
  196. 			}
  197. 		},
  198.  
  199. 		beforeDestroy() {
  200. 			// 销毁自动显示信息
  201. 			this.stopChartAutoShowTip()
  202. 		}
  203. 	}
  204. </script>
  205.  
  206. <style lang='scss' scoped>
  207. 	/* 标题居中 */
  208. 	.ra-title {
  209. 		text-align: center;
  210. 		color: white;
  211. 	}
  212.  
  213. 	/* 内容宽高 */
  214. 	.wrap-container {
  215. 		width: 895px;
  216. 		height: 400px;
  217.  
  218. 		.chartsdom {
  219. 			width: 100%;
  220. 			height: 90%;
  221. 		}
  222. 	}
  223. </style>

3、旋转饼状图

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">旋转的饼状图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="pie">
  8. 						<div class="pies pie1"></div>
  9. 						<div class="pies pie2"></div>
  10. 						<div class="pies pie3"></div>
  11. 						<div class="pie4"></div>
  12. 						<div class="chartsdom" id='chart-pie'></div>
  13. 					</div>
  14. 					
  15. 				</div>
  16. 			</div>
  17. 		</div>
  18. 	</div>
  19. </template>
  20.  
  21. <script>
  22. 	export default {
  23. 		name: 'rotate-pie',
  24. 		data() {
  25. 			return {
  26.  
  27. 			}
  28. 		},
  29. 		mounted() {
  30. 			this.getEchart()
  31. 		},
  32.  
  33. 		methods: {
  34. 			getEchart() {
  35. 				let myChart = this.$echarts.init(document.getElementById('chart-pie'));
  36. 				this.option = {
  37. 					tooltip: {
  38. 						trigger: 'item',
  39. 						formatter: '{a} <br/>{b} : {c} ({d}%)',
  40. 					},
  41. 					legend: {
  42. 						show: true,
  43. 						orient: 'vertical',
  44. 						left: 'center',
  45. 						top: 'middle',
  46. 						data: ['内存', '存储'],
  47. 						textStyle: {
  48. 							color: '#4ce5ff',
  49. 							fontSize: 14,
  50. 						},
  51. 						itemWidth: 20,
  52. 						itemHeight: 10
  53. 					},
  54. 					label: {
  55. 						normal: {
  56. 							show: false
  57. 						},
  58. 					},
  59. 					labelLine: {
  60. 						normal: {
  61. 							show: false
  62. 						}
  63. 					},
  64. 					series: [{
  65. 						name: '磁盘空间',
  66. 						type: 'pie',
  67. 						radius: [60, 110],
  68. 						center: ['50%', '50%'],
  69. 						roseType: 'area',
  70. 						label: {
  71. 							show: false
  72. 						},
  73. 						emphasis: {
  74. 							label: {
  75. 								show: false
  76. 							}
  77. 						},
  78. 						data: [{
  79. 							value: 6.5,
  80. 							name: '内存',
  81. 							itemStyle: {
  82. 								normal: {
  83. 									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  84. 										offset: 0,
  85. 										color: '#387ed3'
  86. 									}, {
  87. 										offset: 1,
  88. 										color: '#bc8b68'
  89. 									}])
  90. 								}
  91. 							}
  92. 						}, {
  93. 							value: 3.5,
  94. 							name: '存储',
  95. 							itemStyle: {
  96. 								normal: {
  97. 									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  98. 										offset: 0,
  99. 										color: '#188bfd'
  100. 									}, {
  101. 										offset: 1,
  102. 										color: '#51eeff'
  103. 									}])
  104. 								}
  105. 							}
  106. 						}, {
  107. 							value: 3,
  108. 							name: '其他',
  109. 							itemStyle: {
  110. 								normal: {
  111. 									color: 'rgba(0, 0, 106, 1)'
  112. 								}
  113. 							}
  114. 						}, {
  115. 							value: 0,
  116. 							name: '其他1',
  117. 							itemStyle: {
  118. 								normal: {
  119. 									color: 'rgba(0, 0, 0, 0)'
  120. 								}
  121. 							}
  122. 						}, {
  123. 							value: 0,
  124. 							name: '其他2',
  125. 							itemStyle: {
  126. 								normal: {
  127. 									color: 'rgba(0, 0, 0, 0)'
  128. 								}
  129. 							}
  130. 						}, {
  131. 							value: 0,
  132. 							name: '其他3',
  133. 							itemStyle: {
  134. 								normal: {
  135. 									color: 'rgba(0, 0, 0, 0)'
  136. 								}
  137. 							}
  138. 						}]
  139. 					}]
  140. 				}
  141.  
  142. 				myChart.setOption(this.option, true);
  143.  
  144. 				window.addEventListener('resize', () => {
  145. 					myChart.resize();
  146. 				});
  147. 			}
  148. 		}
  149. 	}
  150. </script>
  151. <style lang="scss" scoped>
  152. 	.sn-title {
  153. 		text-align: center;
  154. 		color: white;
  155. 	}
  156. 	.sn-container{
  157. 		border:5px solid aqua;
  158. 		border-radius: 25px;
  159. 	}
  160. 	.wrap-container {
  161. 		background: 'rgba(1,1,1,0)';
  162. 		width: 432px;
  163. 		height: 400px;
  164. 		
  165.  
  166. 		.chartsdom {
  167. 			width: 100%;
  168. 			height: 100%;
  169. 		}
  170.  
  171. 		.pie {
  172. 			position: relative;
  173. 			top: 0;
  174. 			width: 100%;
  175. 			height: 100%;
  176.  
  177. 			.pies {
  178. 				width: 100%;
  179. 				height: 100%;
  180. 				top: 0;
  181. 				left: 0;
  182. 				position: absolute;
  183. 				background-repeat: no-repeat;
  184. 				background-position: center center;
  185. 			}
  186.  
  187. 			.pie1 {
  188. 				background-image: url(../../assets/img/whcircle.png);
  189. 				animation: mymove 20s linear infinite;
  190. 				-webkit-animation: mymove 20s linear infinite;
  191. 			}
  192.  
  193. 			.pie2 {
  194. 				background-image: url(../../assets/img/circle2.png);
  195. 				animation: moveto 20s linear infinite;
  196. 				-webkit-animation: moveto 20s linear infinite;
  197. 			}
  198.  
  199. 			.pie3 {
  200. 				background-image: url(../../assets/img/inner.png);
  201. 			}
  202.  
  203. 			// 分割线 内存/存储
  204. 			.pie4 {
  205. 				position: absolute;
  206. 				top: 50%;
  207. 				left: 36%;
  208. 				width: 76px;
  209. 				height: 1px;
  210. 				background: linear-gradient(to right, rgb(31, 38, 103), rgb(90, 250, 253), rgb(31, 38, 103));
  211. 			}
  212.  
  213. 		}
  214. 	}
  215. 	
  216. 	/**
  217. 	* animation 动画
  218. 	*/
  219. 	@-webkit-keyframes mymove {
  220. 		0% {
  221. 			-webkit-transform-origin: center;
  222. 			transform-origin: center;
  223. 			-webkit-transform: rotate(0deg);
  224. 			transform: rotate(0deg)
  225. 		}
  226. 		
  227. 		100%{
  228. 			-webkit-transform-origin: center;
  229. 			transform-origin: center;
  230. 			-webkit-transform: rotate(360deg);
  231. 			transform: rotate(360deg);
  232. 		}
  233. 	}
  234. 	@keyframes mymove{
  235. 		0% {
  236. 			-webkit-transform-origin: center;
  237. 			transform-origin: center;
  238. 			-webkit-transform: rotate(0deg);
  239. 			transform: rotate(0deg);
  240. 		}
  241. 		100%{
  242. 			-webkit-transform-origin: center;
  243. 			transform-origin: center;
  244. 			-webkit-transform: rotate(360deg);
  245. 			transform: rotate(360deg);
  246. 		}
  247. 	}
  248. 	
  249. 	@-webkit-keyframes moveto {
  250. 		0% {
  251. 			-webkit-transform-origin: center;
  252. 			transform-origin: center;
  253. 			-webkit-transform: rotate(0deg);
  254. 			transform: rotate(0deg)
  255. 		}
  256. 		
  257. 		100%{
  258. 			-webkit-transform-origin: center;
  259. 			transform-origin: center;
  260. 			-webkit-transform: rotate(-360deg);
  261. 			transform: rotate(-360deg);
  262. 		}
  263. 	}
  264. 	@keyframes moveto{
  265. 		0% {
  266. 			-webkit-transform-origin: center;
  267. 			transform-origin: center;
  268. 			-webkit-transform: rotate(0deg);
  269. 			transform: rotate(0deg);
  270. 		}
  271. 		100%{
  272. 			-webkit-transform-origin: center;
  273. 			transform-origin: center;
  274. 			-webkit-transform: rotate(-360deg);
  275. 			transform: rotate(-360deg);
  276. 		}
  277. 	}
  278. </style>

4、环状饼图

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">环形饼图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container ring-pie">
  7. 					<div class="back-chart">
  8. 						<svg width="100%" height="100%" viewBox="0 0 150 150" version="1.1"
  9. 							xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  10. 							<path id="svg_2"
  11. 								d="m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z"
  12. 								stroke="#2de6af" fill-opacity="null" fill="none"></path>
  13. 						</svg>
  14.  
  15. 					</div>
  16. 					<div class="chartsdom" id="chart_rp"></div>
  17. 					<div class="arrow-cir1">
  18. 						<div class="arrow-cir11"></div>
  19. 					</div>
  20. 					<div class="arrow-cir2">
  21. 						<div class=" arrow-cir22"></div>
  22. 					</div>
  23.  
  24. 				</div>
  25. 			</div>
  26. 		</div>
  27. 	</div>
  28. </template>
  29.  
  30. <script>
  31. 	export default {
  32. 		name: 'ring-pie',
  33.  
  34. 		mounted() {
  35. 			this.getEchart();
  36. 		},
  37. 		methods: {
  38. 			getEchart() {
  39. 				let myChart = this.$echarts.init(document.getElementById('chart_rp'));
  40. 				this.option = {
  41. 					tooltip:{
  42. 						show:true
  43. 					},
  44. 					series: [{
  45. 						name: '环形饼图',
  46. 						type: 'pie',
  47. 						radius: ['68%', '80%'],
  48. 						hoverAnimation: true,
  49. 						avoidLabelOverlap: false,
  50. 						label: {
  51. 							show: false,
  52. 							position: 'center'
  53. 						},
  54. 						emphasis: {
  55. 							label: {
  56. 								show: true
  57. 							}
  58. 						},
  59. 						labelLine: {
  60. 							show: true
  61. 						},
  62. 						data: [{
  63. 							value: 6,
  64. 							name: '区块链',
  65. 							itemStyle: {
  66. 								normal: {
  67. 									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  68. 										offset: 0,
  69. 										color: '#6984fe'
  70. 									}, {
  71. 										offset: 1,
  72. 										color: '#24d1fd'
  73. 									}])
  74. 								}
  75. 							}
  76. 						}, {
  77. 							value: 4,
  78. 							name: '大数据',
  79. 							itemStyle: {
  80. 								normal: {
  81. 									color: '#ee2'
  82. 								}
  83. 							}
  84. 						}]
  85. 					}]
  86. 				}
  87.  
  88. 				myChart.setOption(this.option, true);
  89.  
  90. 				window.addEventListener('resize', () => {
  91. 					myChart.resize();
  92. 				});
  93. 			}
  94. 		},
  95. 	}
  96. </script>
  97.  
  98. <style lang="scss" scoped>
  99. 	.sn-title {
  100. 		text-align: center;
  101. 		color: white;
  102. 	}
  103.  
  104. 	.sn-container {
  105. 		width: 432px;
  106. 		height: 400px;
  107. 		border: 5px solid aqua;
  108. 		border-radius: 25px;
  109. 	}
  110.  
  111. 	.wrap-container {
  112. 		position: relative;
  113. 		width: 432px;
  114. 		height: 400px;
  115.  
  116. 		.back-chart {
  117. 			position: absolute;
  118. 			top: 0;
  119. 			left: 0;
  120. 			right: 0;
  121. 			bottom: 0;
  122. 			margin: auto;
  123. 			width: 300px;
  124. 			height: 300px;
  125. 			background: url(../../assets/img/back_chart.png) no-repeat center;
  126.  
  127. 		}
  128.  
  129. 		.chartsdom {
  130. 			position: absolute;
  131. 			top: 0;
  132. 			left: 0;
  133. 			right: 0;
  134. 			bottom: 0;
  135. 			margin: auto;
  136. 			width: 300px;
  137. 			height: 300px;
  138. 			z-index: 9999;
  139. 		}
  140. 		
  141. 		.arrow-cir1 {
  142. 			// border: 5px solid red;
  143. 			// border-radius: 25px;
  144. 			width: 300px;
  145. 			height: 300px;
  146. 			offset-distance: 0%;
  147. 			position: absolute;
  148. 			top: 0;
  149. 			left: 0;
  150. 			right: 0;
  151. 			bottom: 0;
  152. 			margin: auto;
  153. 			-webkit-animation: arrow-cir1 5s linear infinite;
  154. 			animation: arrow-cir1 5s linear infinite;
  155. 			.arrow-cir11 {
  156. 				position: absolute;
  157. 				width: 15px;
  158. 				height: 15px;
  159. 				top: 0.5%;
  160. 				left: 50%;
  161. 				background: url(../../assets/img/icon_04.png) no-repeat 50% 50%;
  162. 				background-color: blue;
  163. 			}
  164. 		}
  165. 		
  166. 		.arrow-cir2 {
  167. 			// border: 5px solid red;
  168. 			// border-radius: 25px;
  169. 			width: 300px;
  170. 			height: 300px;
  171. 			offset-distance: 0%;
  172. 			position: absolute;
  173. 			top: 0;
  174. 			left: 0;
  175. 			right: 0;
  176. 			bottom: 0;
  177. 			margin: auto;
  178. 			-webkit-animation: arrow-cir2 5s linear infinite;
  179. 			animation: arrow-cir2 5s linear infinite;
  180. 			.arrow-cir22 {
  181. 				position: absolute;
  182. 				width: 15px;
  183. 				height: 15px;
  184. 				top: 0.5%;
  185. 				left: 50%;
  186. 				background: url(../../assets/img/icon_04.png) no-repeat 50% 50%;
  187. 				background-color: yellow;
  188. 			}
  189. 			
  190. 		}
  191.  
  192. 	}
  193. 	
  194. @-webkit-keyframes arrow-cir1{
  195. 	0%{
  196. 		-webkit-transform-origin: center;
  197. 		transform-origin: center;
  198. 		-webkit-transform: rotate(0deg);
  199. 		transform: rotate(0deg)
  200. 	}
  201. 	100% {
  202. 		-webkit-transform-origin: center;
  203. 		transform-origin: center;
  204. 		-webkit-transform: rotate(360deg);
  205. 		transform: rotate(360deg);
  206. 	}
  207. }
  208.  
  209. @keyframes arrow-cir1{
  210. 	0%{
  211. 		-webkit-transform-origin: center;
  212. 		transform-origin: center;
  213. 		-webkit-transform: rotate(0deg);
  214. 		transform: rotate(0deg)
  215. 	}
  216. 	100% {
  217. 		-webkit-transform-origin: center;
  218. 		transform-origin: center;
  219. 		-webkit-transform: rotate(360deg);
  220. 		transform: rotate(360deg);
  221. 	}
  222. }
  223.  
  224. @-webkit-keyframes arrow-cir2{
  225. 	0%{
  226. 		-webkit-transform-origin: center;
  227. 		transform-origin: center;
  228. 		-webkit-transform: rotate(0deg);
  229. 		transform: rotate(0deg)
  230. 	}
  231. 	100% {
  232. 		-webkit-transform-origin: center;
  233. 		transform-origin: center;
  234. 		-webkit-transform: rotate(-360deg);
  235. 		transform: rotate(-360deg);
  236. 	}
  237. }
  238.  
  239. @keyframes arrow-cir2{
  240. 	0%{
  241. 		-webkit-transform-origin: center;
  242. 		transform-origin: center;
  243. 		-webkit-transform: rotate(0deg);
  244. 		transform: rotate(0deg)
  245. 	}
  246. 	100% {
  247. 		-webkit-transform-origin: center;
  248. 		transform-origin: center;
  249. 		-webkit-transform: rotate(-360deg);
  250. 		transform: rotate(-360deg);
  251. 	}
  252. }
  253. </style>

 5、彩虹饼状图

 

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">彩虹饼状图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-rainbow'></div>
  8.  
  9. 					<div class="preinfo" v-for='(item,ind) in arrData' :key='ind' :class="`preinfo${ind}`">
  10. 						<span>{{ item.percent }}%</span>
  11. 						<span>{{ item.name }}</span>
  12. 					</div>
  13.  
  14. 					<div class="preinfos" :class="`pre${i}`" v-for="(v, i) in arrData" :key='i'>
  15. 						<span></span>
  16. 						<span></span>
  17. 					</div>
  18. 				</div>
  19. 			</div>
  20. 		</div>
  21. 	</div>
  22. </template>
  23.  
  24. <script>
  25. 	export default {
  26. 		name: 'ranbow-pies',
  27. 		data() {
  28. 			return {
  29. 				option: null,
  30. 				arrData: [{
  31. 					name: '食品类',
  32. 					percent: 73
  33. 				}, {
  34. 					name: '工业类',
  35. 					percent: 20
  36. 				}, {
  37. 					name: '医疗类',
  38. 					percent: 32
  39. 				}, {
  40. 					name: '政务类',
  41. 					percent: 60
  42. 				}, {
  43. 					name: '金融类',
  44. 					percent: 14
  45. 				}]
  46. 			}
  47. 		},
  48. 		mounted() {
  49. 			this.getEchart();
  50. 		},
  51. 		methods: {
  52. 			getEchart() {
  53. 				let myChart = this.$echarts.init(document.getElementById('chart-rainbow'));
  54. 				let itemStyle = {
  55. 					normal: {
  56. 						color: 'rgba(0, 0, 0, 0)',
  57. 					}
  58. 				}
  59.  
  60. 				this.option = {
  61. 					color: ['#125ec1', '#3fa5c0', '#d68639', '#ad5b68', '#6082a5'],
  62. 					series: [{
  63. 						name: '金融类',
  64. 						type: 'pie',
  65. 						clockWise: false,
  66. 						startAngle: 90,
  67. 						hoverAnimation: false,
  68. 						radius: ['85%', '90%'],
  69. 						center: ['50%', '50%'],
  70. 						label: {
  71. 							normal: {
  72. 								show: false
  73. 							},
  74. 						},
  75. 						labelLine: {
  76. 							normal: {
  77. 								show: false
  78. 							}
  79. 						},
  80. 						itemStyle: {
  81. 							shadowColor: '#125ec1',
  82. 							shadowBlur: 15
  83. 						},
  84. 						data: [{
  85. 							value: 15,
  86. 							name: '15%',
  87. 							itemStyle: {
  88. 								normal: {
  89. 									color: '#125ec1'
  90. 								}
  91. 							}
  92. 						}, {
  93. 							value: 85,
  94. 							name: '50%',
  95. 							itemStyle: itemStyle
  96. 						}]
  97. 					}, {
  98. 						name: '政务类',
  99. 						type: 'pie',
  100. 						clockWise: false,
  101. 						startAngle: 90,
  102. 						hoverAnimation: false,
  103. 						radius: ['72%', '77%'],
  104. 						center: ['50%', '50%'],
  105. 						label: {
  106. 							normal: {
  107. 								show: false
  108. 							},
  109. 						},
  110. 						labelLine: {
  111. 							normal: {
  112. 								show: false
  113. 							}
  114. 						},
  115. 						itemStyle: {
  116. 							shadowColor: '#3fa5c0',
  117. 							shadowBlur: 15
  118. 						},
  119. 						data: [{
  120. 							value: 60,
  121. 							name: '60%',
  122. 							itemStyle: {
  123. 								normal: {
  124. 									color: '#3fa5c0'
  125. 								}
  126. 							}
  127. 						}, {
  128. 							value: 40,
  129. 							name: '40%',
  130. 							itemStyle: itemStyle
  131. 						}]
  132. 					}, {
  133. 						name: '医疗类',
  134. 						type: 'pie',
  135. 						clockWise: false,
  136. 						startAngle: 90,
  137. 						hoverAnimation: false,
  138. 						radius: ['59%', '64%'],
  139. 						center: ['50%', '50%'],
  140. 						label: {
  141. 							normal: {
  142. 								show: false
  143. 							},
  144. 						},
  145. 						labelLine: {
  146. 							normal: {
  147. 								show: false
  148. 							}
  149. 						},
  150. 						itemStyle: {
  151. 							shadowColor: '#d68639',
  152. 							shadowBlur: 15
  153. 						},
  154. 						data: [{
  155. 							value: 32,
  156. 							name: '32%',
  157. 							itemStyle: {
  158. 								normal: {
  159. 									color: '#d68639'
  160. 								}
  161. 							}
  162. 						}, {
  163. 							value: 68,
  164. 							name: '68%',
  165. 							itemStyle: itemStyle
  166. 						}]
  167. 					}, {
  168. 						name: '工业类',
  169. 						type: 'pie',
  170. 						clockWise: false,
  171. 						startAngle: 90,
  172. 						hoverAnimation: false,
  173. 						radius: ['46%', '51%'],
  174. 						center: ['50%', '50%'],
  175. 						label: {
  176. 							normal: {
  177. 								show: false
  178. 							},
  179. 						},
  180. 						labelLine: {
  181. 							normal: {
  182. 								show: false
  183. 							}
  184. 						},
  185. 						itemStyle: {
  186. 							shadowColor: '#ad5b68',
  187. 							shadowBlur: 15
  188. 						},
  189. 						data: [{
  190. 							value: 20,
  191. 							name: '20%',
  192. 							itemStyle: {
  193. 								normal: {
  194. 									color: '#ad5b68'
  195. 								}
  196. 							}
  197. 						}, {
  198. 							value: 80,
  199. 							name: '80%',
  200. 							itemStyle: itemStyle
  201. 						}]
  202. 					}, {
  203. 						name: '食品类',
  204. 						type: 'pie',
  205. 						clockWise: false,
  206. 						startAngle: 90,
  207. 						hoverAnimation: false,
  208. 						radius: ['33%', '38%'],
  209. 						center: ['50%', '50%'],
  210. 						label: {
  211. 							normal: {
  212. 								show: false
  213. 							},
  214. 						},
  215. 						labelLine: {
  216. 							normal: {
  217. 								show: false
  218. 							}
  219. 						},
  220. 						itemStyle: {
  221. 							shadowColor: '#6082a5',
  222. 							shadowBlur: 15
  223. 						},
  224. 						data: [{
  225. 							value: 73,
  226. 							name: '73%',
  227. 							itemStyle: {
  228. 								normal: {
  229. 									color: '#6082a5'
  230. 								}
  231. 							}
  232. 						}, {
  233. 							value: 27,
  234. 							name: '27%',
  235. 							itemStyle: itemStyle
  236. 						}]
  237. 					}]
  238. 				}
  239.  
  240. 				// 使用制定的配置项和数据显示图表
  241. 				myChart.setOption(this.option, true);
  242.  
  243. 				window.addEventListener('resize', () => {
  244. 					myChart.resize();
  245. 				});
  246. 			}
  247. 		},
  248. 	}
  249. </script>
  250.  
  251. <style lang="scss" scoped>
  252. 	.sn-title {
  253. 		text-align: center;
  254. 		color: white;
  255. 	}
  256.  
  257. 	.sn-container {
  258. 		border: 5px solid aqua;
  259. 		border-radius: 25px;
  260. 	}
  261.  
  262. 	.wrap-container {
  263. 		position: relative;
  264. 		width: 432px;
  265. 		height: 400px;
  266.  
  267. 		.chartsdom {
  268. 			width: 100%;
  269. 			height: 100%;
  270. 		}
  271.  
  272. 		.preinfo {
  273. 			position: absolute;
  274. 			left: 68%;
  275. 			top: 5%;
  276. 			margin-left: -2.5em;
  277. 			-webkit-transform: translate(0%, -50%);
  278. 			-moz-transform: translate(0%, -50%);
  279. 			-ms-transform: translate(0%, -50%);
  280. 			-o-transform: translate(0%, -50%);
  281. 			transform: translate(0%, -50%);
  282. 			white-space: nowrap;
  283. 			font-size: 13px;
  284.  
  285. 			span {
  286. 				&:nth-child(1) {
  287. 					margin-right: 10px;
  288. 				}
  289. 			}
  290.  
  291. 			&.preinfo0 {
  292. 				color: rgb(99, 139, 176);
  293. 				margin-top: 25%;
  294. 			}
  295.  
  296. 			&.preinfo1 {
  297. 				color: rgb(180, 91, 111);
  298. 				margin-top: 19%;
  299. 			}
  300.  
  301. 			&.preinfo2 {
  302. 				color: rgb(232, 138, 50);
  303. 				margin-top: 13%;
  304. 			}
  305.  
  306. 			&.preinfo3 {
  307. 				color: rgb(70, 179, 200);
  308. 				margin-top: 7%;
  309. 			}
  310.  
  311. 			&.preinfo4 {
  312. 				color: rgb(19, 98, 201);
  313. 				margin-top: 1%;
  314. 			}
  315. 		}
  316.  
  317. 		.preinfos {
  318. 			position: absolute;
  319. 			left: 50%;
  320. 			top: 50%;
  321. 			width: 1px;
  322. 			height: 58px;
  323. 			background-color: rgb(99, 139, 176);
  324. 			-webkit-transform-origin: 50% 0;
  325. 			-moz-transform-origin: 50% 0;
  326. 			-ms-transform-origin: 50% 0;
  327. 			-o-transform-origin: 50% 0;
  328. 			transform-origin: 50% 0;
  329.  
  330. 			span {
  331. 				&:nth-child(1) {
  332. 					width: 8px;
  333. 					height: 8px;
  334. 					-webkit-border-radius: 100%;
  335. 					-moz-border-radius: 100%;
  336. 					border-radius: 100%;
  337. 					position: absolute;
  338. 					left: -3px;
  339. 					top: 50%;
  340. 				}
  341.  
  342. 				&:nth-child(2) {
  343. 					width: 0;
  344. 					height: 0;
  345. 					border-width: 12px 5px 5px 5px;
  346. 					border-style: solid;
  347. 					position: absolute;
  348. 					left: -5px;
  349. 					top: 100%;
  350. 				}
  351. 			}
  352.  
  353. 			&.pre0 {
  354. 				height: 55px;
  355. 				background-color: rgb(99, 139, 176);
  356. 				transform: rotate(-62.614deg);
  357.  
  358. 				span {
  359. 					&:nth-child(1) {
  360. 						background-color: rgb(99, 139, 176);
  361. 					}	
  362.  
  363. 					&:nth-child(2) {
  364. 						border-color: rgb(99, 139, 176) transparent transparent;
  365. 					}
  366. 				}
  367. 			}
  368.  
  369. 			&.pre1 {
  370. 				height: 85px;
  371. 				background-color: rgb(180, 91, 111);
  372. 				transform: rotate(125.593deg);
  373.  
  374. 				span {
  375. 					&:nth-child(1) {
  376. 						background-color: rgb(180, 91, 111);
  377. 					}
  378.  
  379. 					&:nth-child(2) {
  380. 						border-color: rgb(180, 91, 111) transparent transparent;
  381. 					}
  382. 				}
  383. 			}
  384.  
  385. 			&.pre2 {
  386. 				height: 109px;
  387. 				background-color: rgb(232, 138, 50);
  388. 				transform: rotate(86.2006deg);
  389.  
  390. 				span {
  391. 					&:nth-child(1) {
  392. 						background-color: rgb(232, 138, 50);
  393. 					}
  394.  
  395. 					&:nth-child(2) {
  396. 						border-color: rgb(232, 138, 50) transparent transparent;
  397. 					}
  398. 				}
  399. 			}
  400.  
  401. 			&.pre3 {
  402. 				height: 131px;
  403. 				background-color: rgb(70, 179, 200);
  404. 				transform: rotate(-18.845deg);
  405.  
  406. 				span {
  407. 					&:nth-child(1) {
  408. 						background-color: rgb(70, 179, 200);
  409. 					}
  410.  
  411. 					&:nth-child(2) {
  412. 						border-color: rgb(70, 179, 200) transparent transparent;
  413. 					}
  414. 				}
  415. 			}
  416.  
  417. 			&.pre4 {
  418. 				height: 158px;
  419. 				background-color: rgb(19, 98, 201);
  420. 				transform: rotate(149.666deg);
  421.  
  422. 				span {
  423. 					&:nth-child(1) {
  424. 						background-color: rgb(19, 98, 201);
  425. 					}
  426.  
  427. 					&:nth-child(2) {
  428. 						border-color: rgb(19, 98, 201) transparent transparent;
  429. 					}
  430. 				}
  431. 			}
  432. 		}
  433. 	}
  434. </style>

 6、动态柱状图

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">动态柱状图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-dynamic-bar'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'dynamic-bar',
  17. 		data() {
  18. 			return {
  19. 				option: null,
  20. 				dataMap: {}
  21. 			}
  22. 		},
  23.  
  24. 		mounted() {
  25. 			this.getEchart();
  26. 		},
  27. 		methods: {
  28. 			dataFormatter(obj) {
  29. 				let pList = ['长沙', '湘潭', '株洲', '岳阳', '邵阳', '衡阳', '益阳', '娄底', '怀化', '湘西', '张家界', '郴州', '常德', '永州'];
  30. 				let temp;
  31. 				for (let x = 0; x < 3; x++) {
  32. 					let max = 0;
  33. 					let sum = 0;
  34. 					temp = obj[x];
  35. 					for (let i = 0, l = temp.length; i < l; i++) {
  36. 						max = Math.max(max, temp[i]);
  37. 						sum += temp[i];
  38. 						obj[x][i] = {
  39. 							name: pList[i],
  40. 							value: temp[i]
  41. 						};
  42. 					}
  43. 					obj[x + 'max'] = Math.floor(max / 100) * 100;
  44. 					obj[x + 'sum'] = sum;
  45. 				}
  46. 				return obj;
  47. 			},
  48. 			getEchart() {
  49. 				let myChart = this.$echarts.init(document.getElementById('chart-dynamic-bar'));
  50. 				let itemStyle = {
  51. 					barBorderRadius: [15, 0],
  52. 					color: '#0084ff'
  53. 				}
  54.  
  55. 				this.dataMap.dataType = this.dataFormatter({
  56. 					2: [124, 145, 261, 54, 195, 131, 150, 39, 11, 40, 23, 51, 45, 88],
  57. 					1: [136, 159, 205, 41, 306, 7, 77, 101, 24, 34, 8, 15, 14, 9],
  58. 					0: [118, 128, 220, 47, 92, 14, 9, 11, 113, 61, 11, 22, 33, 5],
  59. 				});
  60. 				
  61. 				console.log("this.dataMap.dataType", this.dataMap.dataType)
  62. 				
  63. 				this.option = {
  64. 					baseOption: {
  65. 						timeline: {
  66. 							axisType: 'category',
  67. 							autoPlay: true,
  68. 							playInterval: 1000,
  69. 							data: ['一类', '二类', '三类'],
  70. 							left: 80,
  71. 							right: 80,
  72. 							bottom: 30,
  73. 							lineStyle: {
  74. 								color: '#179bf1'
  75. 							},
  76. 							label: {
  77. 								color: '#fff'
  78. 							},
  79. 							checkpointStyle: {
  80. 								color: '#01d8ff',
  81. 								symbolSize: 10,
  82. 								borderColor: 'rgba(1, 216, 255, 0.5)',
  83. 								borderWidth: 5,
  84. 							},
  85. 							controlStyle: {
  86. 								show: false,
  87. 							},
  88. 							itemStyle: {
  89. 								borderColor: '#004b85',
  90. 								borderWidth: 1,
  91. 								shadowColor: 'rgba(1, 216, 225, 0.5)',
  92. 								shadowBlur: 5
  93. 							},
  94. 							emphasis: {
  95. 								label: {
  96. 									color: '#01d8ff',
  97. 									show: false
  98. 								},
  99. 								checkpointStyle: {
  100. 									color: '#01d8ff',
  101. 									borderColor: 'rgba(1, 216, 255, 0.5)',
  102. 									borderWidth: 5,
  103. 								},
  104. 								itemStyle: {
  105. 									color: '#01d8ff',
  106. 								borderColor: 'rgba(1, 216, 225, 0.5)',
  107. 									borderWidth: 5
  108. 								}
  109. 							}
  110. 						},
  111. 						calculable: true,
  112. 						grid: {
  113. 							top: '10%',
  114. 							bottom: '35%'
  115. 						},
  116. 						xAxis: [{
  117. 							type: 'category',
  118. 							axisLabel: {
  119. 								interval: 0
  120. 							},
  121. 							data: ['长沙', '湘潭', '株洲', '岳阳', '邵阳', '衡阳', '益阳', '娄底', '怀化', '湘西', '张家界', '郴州',
  122. 								'常德', '永州'
  123. 							],
  124. 							splitLine: {
  125. 								show: false
  126. 							},
  127. 							axisTick: {
  128. 								show: false
  129. 							},
  130. 							axisLine: {
  131. 								show: true,
  132. 								lineStyle: {
  133. 									color: '#2867a8',
  134. 								}
  135. 							},
  136. 						}],
  137. 						yAxis: [{
  138. 							type: 'value',
  139. 							name: '家',
  140. 							splitLine: {
  141. 								show: false
  142. 							},
  143. 							axisTick: {
  144. 								show: false
  145. 							},
  146. 							axisLine: {
  147. 								show: true,
  148. 							lineStyle: {
  149. 									color: '#2867a8'
  150. 								}
  151. 							}
  152. 						}],
  153. 						series: [{
  154. 							name: '一类',
  155. 							type: 'bar',
  156. 							barWidth: 15,
  157. 							legendHoverLink: true,
  158. 							label: {
  159. 								show: true,
  160. 								position: 'top',
  161. 								color: '#fff'
  162. 							},
  163. 						}]
  164. 					},
  165. 					options: [{
  166. 						series: [{
  167. 							data: this.dataMap.dataType['0'],
  168. 							itemStyle: itemStyle
  169. 						}]
  170. 					}, {
  171. 						series: [{
  172. 							data: this.dataMap.dataType['1'],
  173. 							itemStyle: itemStyle
  174. 						}]
  175. 					}, {
  176. 						series: [{
  177. 							data: this.dataMap.dataType['2'],
  178. 							itemStyle: itemStyle
  179. 						}]
  180. 					}]
  181. 				}
  182.  
  183. 				myChart.setOption(this.option, true);
  184.  
  185. 				window.addEventListener('resize', () => {
  186. 					myChart.resize();
  187. 				});
  188. 			}
  189. 		}
  190. 	}
  191. </script>
  192.  
  193. <style lang='scss' scoped>
  194. 	.sn-title{
  195. 		text-align: center;
  196. 		color: white;
  197. 	}
  198. 	.sn-container{
  199. 		border: 5px solid aqua;
  200. 		border-radius: 20px;
  201. 	}
  202. 	.wrap-container{
  203. 		width:  586px;
  204. 		height: 400px;
  205. 		
  206. 		.chartsdom{
  207. 			width: 100%;
  208. 			height: 100%;
  209. 		}
  210. 	}
  211. </style>

7、仪表盘

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">仪表盘</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-gauge'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'gauge-chart',
  17. 		data() {
  18. 			return {
  19. 				option: null,
  20. 				timer: null
  21. 			}
  22. 		},
  23. 		mounted() {
  24. 			this.getEchart()
  25. 		},
  26. 		methods: {
  27. 			getEchart() {
  28. 				let myChart = this.$echarts.init(document.getElementById('chart-gauge'))
  29. 				this.option = {
  30. 					tooltip: {
  31. 						formatter: '{a} <br/>{c} {b}'
  32. 					},
  33. 					series: [{
  34. 						name: '速度',
  35. 						type: 'gauge',
  36. 						min: 0,
  37. 						max: 220,
  38. 						splitNumber: 11,
  39. 						// radius: '50%',
  40. 						axisLine: { // 坐标轴线
  41. 							lineStyle: { // 属性lineStyle控制线条样式
  42. 							color: [
  43. 								[0.09, 'lime'],
  44. 								[0.82, '#1e90ff'],
  45. 								[1, '#ff4500']
  46. 							],
  47. 							width: 3,
  48. 								// shadowColor: '#fff', //默认透明
  49. 								shadowBlur: 10
  50. 							}
  51. 						},
  52. 						axisLabel: { // 坐标轴小标记
  53. 							fontWeight: 'bolder',
  54. 							color: '#fff',
  55. 							shadowColor: '#fff', //默认透明
  56. 							shadowBlur: 10
  57. 						},
  58. 						axisTick: { // 坐标轴小标记
  59. 							length: 15, // 属性length控制线长
  60. 							lineStyle: { // 属性lineStyle控制线条样式
  61. 							color: 'auto',
  62. 								// shadowColor: '#fff', //默认透明
  63. 								shadowBlur: 10
  64. 							}
  65. 						},
  66. 						splitLine: { // 分隔线
  67. 							length: 25, // 属性length控制线长
  68. 							lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
  69. 								width: 3,
  70. 								color: '#fff',
  71. 								// shadowColor: '#fff', //默认透明
  72. 								shadowBlur: 10
  73. 							}
  74. 						},
  75. 						pointer: { // 分隔线
  76. 							// shadowColor: '#fff', //默认透明
  77. 							shadowBlur: 5
  78. 						},
  79. 						title: {
  80. 							textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  81. 								fontWeight: 'bolder',
  82. 								fontSize: 20,
  83. 								fontStyle: 'italic',
  84. 								color: '#fff',
  85. 								shadowColor: '#fff', //默认透明
  86. 								shadowBlur: 10
  87. 							}
  88. 						},
  89. 						detail: {
  90. 							// backgroundColor: 'rgba(30,144,255,0.8)',
  91. 							// borderWidth: 1,
  92. 							// borderColor: '#fff',
  93. 							// shadowColor: '#fff', //默认透明
  94. 							// shadowBlur: 5,
  95. 							offsetCenter: [0, '50%'], // x, y，单位px
  96. 							textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  97. 								fontWeight: 'bolder',
  98. 								fontSize: 25,
  99. 								color: '#fff'
  100. 							}
  101. 						},
  102. 						data: [{
  103. 							value: 40,
  104. 							name: 'km/h'
  105. 						}]
  106. 					}]
  107. 				}
  108.  
  109.  
  110. 				myChart.setOption(this.option, true);
  111.  
  112. 				window.addEventListener('resize', () => {
  113. 					myChart.resize();
  114. 				});
  115. 				
  116. 				this.timer = setInterval(()=>{
  117. 					this.option.series[0].data[0].value = (Math.random()*200).toFixed(2) -0
  118. 					myChart.setOption(this.option, true)
  119. 				},1000)
  120. 			}
  121. 		},
  122. 		beforeDestroy() {
  123. 			clearInterval(this.timer);
  124. 		}
  125. 	}
  126. </script>
  127.  
  128. <style lang="scss" scoped>
  129. 	.sn-title{
  130. 		text-align: center;
  131. 		color: white;
  132. 	}
  133. 	.wrap-container{
  134. 		width: 432px;
  135. 		height: 400px;
  136. 		.chartsdom{
  137. 			width: 100%;
  138. 			height: 100%;
  139. 		}
  140. 	}
  141. </style>

8、动态折线图

 

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">动态折线图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-dynamic-line'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'dynamic-line',
  17. 		data() {
  18. 			return {
  19. 				option: null,
  20. 				timer: null,
  21. 				xData: [],
  22. 				now: new Date(2019, 1, 1),
  23. 				value: Math.random() * 1000,
  24. 				oneDay: 24 * 3600 * 1000
  25. 			}
  26. 		},
  27.  
  28. 		mounted() {
  29. 			this.getEchart();
  30. 		},
  31.  
  32. 		methods: {
  33. 			randomData() {
  34. 				this.now = new Date(+this.now + this.oneDay)
  35. 				this.value = this.value + Math.random() * 25 - 10
  36. 				return {
  37. 					name: this.now.toString(),
  38. 					value: [
  39. 						[this.now.getFullYear(), this.now.getMonth() , this.now.getDate()].join('/'),
  40. 						Math.round(this.value)
  41. 					]
  42. 				}
  43. 			},
  44.  
  45. 			getEchart() {
  46. 				let myChart = this.$echarts.init(document.getElementById('chart-dynamic-line'));
  47. 				for (let i = 0; i < 1000; i++) {
  48. 				this.xData.push(this.randomData());
  49. 			}
  50.  
  51. 				this.option = {
  52. 					tooltip: {
  53. 						trigger: 'axis',
  54. 						axisPointer: {
  55. 							type: 'cross',
  56. 							axisPointer: {
  57. 								type: 'cross',
  58. 								label: {
  59. 									backgroundColor: '#283b56'
  60. 								}
  61. 							}
  62. 						}
  63. 					},
  64. 					grid: {
  65. 						top: '15%',
  66. 						left: '10%',
  67. 						right: '12%',
  68. 						bottom: '15%',
  69. 						containLabel: true
  70. 					},
  71. 					color: ['#b54c5d'],
  72. 					calculable: true,
  73. 					xAxis: {
  74. 						type: 'time',
  75. 						name: '年-月-日',
  76. 						boundaryGap: false,
  77. 						splitNumber: 5,
  78. 						axisLabel: {
  79. 							formatter(value) {
  80. 								let date = new Date(value);
  81. 								return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  82. 							}
  83. 						},
  84. 						axisTick: {
  85. 							show: false
  86. 						},
  87. 						axisLine: {
  88. 							show: true,
  89. 							lineStyle: {
  90. 								color: '#0084ff'
  91. 							}
  92. 						},
  93. 						splitLine: {
  94. 							show: false
  95. 						}
  96. 					},
  97. 					yAxis: {
  98. 						type: 'value',
  99. 						scale: true,
  100. 						name: '比特币（美元）',
  101. 						min: 0,
  102. 						boundaryGap: false,
  103. 						axisTick: {
  104. 							show: false
  105. 						},
  106. 						axisLine: {
  107. 							show: true,
  108. 							lineStyle: {
  109. 								color: '#0084ff'
  110. 							}
  111. 						},
  112. 						splitLine: {
  113. 							show: false
  114. 						},
  115. 					},
  116. 					series: [{
  117. 						name: '实时交易',
  118. 						type: 'line',
  119. 						xAxisIndex: 0,
  120. 						yAxisIndex: 0,
  121. 						itemStyle: {
  122. 							opacity: 0,
  123. 						},
  124. 						data: this.xData,
  125. 						smooth: true
  126. 					}]
  127. 				}
  128.  
  129. 				myChart.setOption(this.option, true);
  130.  
  131. 				window.addEventListener('resize', () => {
  132. 					myChart.resize();
  133. 				});
  134. 				
  135. 				this.timer = setInterval(() => {
  136. 					for (let i = 0; i < 5; i++){
  137. 						this.xData.shift();
  138. 						this.xData.push(this.randomData());
  139. 					}
  140. 					myChart.setOption(this.option, true);
  141. 				},200)
  142. 			}
  143. 		},
  144. 		beforeDestroy() {
  145. 			clearInterval(this.timer);
  146. 		}
  147. 	}
  148. </script>
  149.  
  150. <style lang="scss" scoped>
  151. 	.sn-title{
  152. 		text-align: center;
  153. 		color: white;
  154. 	}
  155. 	.wrap-container{
  156. 		width: 586px;
  157. 		height: 400px;
  158. 		.chartsdom{
  159. 			width: 100%;
  160. 			height: 100%;
  161. 		}
  162. 	}
  163. </style>

9、雷达图

 

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">雷达图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-radar'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'radar-chart',
  17. 		data() {
  18. 			return {
  19. 				Option: null,
  20. 				timer: null
  21. 			}
  22. 		},
  23. 		mounted() {
  24. 			this.getEchart()
  25. 		},
  26. 		methods: {
  27. 			getEchart() {
  28. 				let myChart = this.$echarts.init(document.getElementById('chart-radar'))
  29. 				this.option = {
  30. 					tooltip: {
  31. 						trigger: 'axis'
  32. 					},
  33. 					radar: [{
  34. 						indicator: [
  35. 							{
  36. 								text: '外观',
  37. 								max: 100
  38. 							},
  39. 							{
  40. 								text: '拍照',
  41. 								max: 100
  42. 							},
  43. 							{
  44. 								text: '系统',
  45. 								max: 100
  46. 							},
  47. 							{
  48. 								text: '性能',
  49. 								max: 100
  50. 							},
  51. 							{
  52. 								text: '屏幕',
  53. 								max: 100
  54. 							},
  55. 							{
  56. 								text: '折叠',
  57. 								max: 100
  58. 							},
  59. 						],
  60. 						radius: '75%',
  61. 						center: ['50%', '50%'],
  62. 						name: {
  63. 							textStyle: {
  64. 								color: '#1883ff'
  65. 							}
  66. 						},
  67. 						axisTick: {
  68. 							show: false
  69. 						},
  70. 						axisLabel: {
  71. 							show: false
  72. 						},
  73. 						axisLine: {
  74. 							show: true,
  75. 							symbol: 'arrow',
  76. 							symbolSize: [5, 7.5],
  77. 							lineStyle: {
  78. 							color: '#1883ff',
  79. 								type: 'dashed'
  80. 							}
  81. 						},
  82. 						splitArea: {
  83. 							show: false
  84. 						},
  85. 						splitLine: {
  86. 							show: false
  87. 						}
  88. 					}],
  89.  
  90. 					series: [{
  91. 						type: 'radar',
  92. 						areaStyle: {},
  93. 						symbol: 'none',
  94. 						itemStyle: {
  95. 							normal: {
  96. 								areaStyle: {
  97. 									type: 'default'
  98. 								}
  99. 							}
  100. 						},
  101. 						lineStyle: {
  102. 							opacity: 0,
  103. 						},
  104. 						data: [
  105. 							{
  106. 								value: [75, 50, 30, 90, 40, 45],
  107. 								name: '智能手机',
  108. 								itemStyle: {
  109. 									normal: {
  110. 										color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  111. 											offset: 0,
  112. 											color: '#9c6b4e'
  113. 										}, {
  114. 											offset: 1,
  115. 											color: '#2a59ac'
  116. 										}]),
  117. 										lineStyle: {
  118. 											color: '#2a59ac'
  119. 										}
  120. 									}
  121. 								}
  122. 							},
  123. 							// {
  124. 							// 	value: [70, 40, 55, 55, 30, 55],
  125. 							// 	name: '5G手机',
  126. 							// 	itemStyle: {
  127. 							// 		normal: {
  128. 							// 			color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  129. 							// 				offset: 0,
  130. 							// 				color: '#0855ca'
  131. 							// 			}, {
  132. 							// 				offset: 1,
  133. 							// 				color: '#36a6c7'
  134. 							// 			}]),
  135. 							// 			lineStyle: {
  136. 							// 				color: '#36a6c7'
  137. 							// 			}
  138. 							// 		}
  139. 							// 	}
  140. 							// }
  141. 						]
  142. 						
  143. 					}]
  144. 				}
  145. 				myChart.setOption(this.option, true);
  146. 				window.addEventListener('resize', () => {
  147. 					myChart.resize();
  148. 				});
  149. 				
  150. 				this.timer = setInterval(()=>{
  151. 					let valueArr = this.option.series[0].data[0].value
  152. 					for (var i = 0; i < valueArr.length; i++) {
  153. 						valueArr[i] = parseInt((Math.random()*100))
  154. 					}
  155. 					this.option.series[0].data[0].value = valueArr
  156. 					myChart.setOption(this.option, true)
  157. 				},1000)
  158. 			}
  159. 		},
  160. 		beforeDestroy(){
  161. 			clearInterval(this.timer)
  162. 		}
  163. 	}
  164. </script>
  165.  
  166. <style lang="scss" scoped>
  167. 	.sn-container{
  168. 		text-align: center;
  169. 		color: white;
  170. 	}
  171. 	.wrap-container {
  172. 		width: 432px;
  173. 		height: 400px;
  174.  
  175. 		.chartsdom {
  176. 			width: 100%;
  177. 			height: 100%;
  178. 		}
  179. 	}
  180. </style>

10、柱状图和饼图联动

 

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">柱状和饼状图联动</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-bar-pie'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'union-bar-pie',
  17. 		data() {
  18. 			return {
  19. 				option: null,
  20. 				dataMap: {}
  21. 			}
  22. 		},
  23. 		mounted() {
  24. 			this.getEchart()
  25. 		},
  26. 		methods: {
  27. 			dataFormatter(obj) {
  28. 				let pList = ['金融类', '政务类', '医疗类', '互联网类']
  29. 				let temp
  30. 				for (let y = 2016; y <= 2020; y++) {
  31. 					let max = 0;
  32. 					let sum = 0;
  33. 					temp = obj[y];
  34. 					for (let i = 0, l = temp.length; i < l; i++) {
  35. 						max = Math.max(max, temp[i]);
  36. 						sum += temp[i];
  37. 						obj[y][i] = {
  38. 							name: pList[i],
  39. 							value: temp[i]
  40. 						};
  41. 					}
  42. 					obj[y + 'max'] = Math.floor(max / 100) * 100;
  43. 					obj[y + 'sum'] = sum;
  44. 				}
  45. 				return obj;
  46. 			},
  47.  
  48. 			getEchart() {
  49. 				let myChart = this.$echarts.init(document.getElementById('chart-bar-pie'));
  50. 				let itemStyleJR = {
  51. 					color: '#d6d638'
  52. 				}
  53. 				let itemStyleZW = {
  54. 					color: '#00c86c'
  55. 				}
  56. 				let itemStyleYL = {
  57. 					color: '#07d8ff'
  58. 				}
  59. 				let itemStyleIT = {
  60. 					color: '#0c71cf'
  61. 				}
  62.  
  63. 				this.dataMap.dataJR = this.dataFormatter({
  64. 					//max : 4000,
  65. 					2020: [136, 159, 905, 305],
  66. 					2019: [124, 145, 562, 285],
  67. 					2018: [118, 128, 207, 265],
  68. 					2017: [112, 122, 234, 245],
  69. 					2016: [101, 110, 804, 225]
  70. 				});
  71.  
  72. 				this.dataMap.dataZW = this.dataFormatter({
  73. 					//max : 26600,
  74. 					2020: [752, 928, 126, 210],
  75. 					2019: [388, 840, 707, 208],
  76. 					2018: [855, 987, 959, 207],
  77. 					2017: [626, 709, 701, 206],
  78. 					2016: [509, 892, 201, 205]
  79. 				});
  80.  
  81. 				this.dataMap.dataYL = this.dataFormatter({
  82. 					//max : 25000,
  83. 					2020: [363, 219, 483, 505],
  84. 					2019: [600, 438, 123, 405],
  85. 					2018: [179, 405, 668, 305],
  86. 					2017: [375, 2886, 276, 205],
  87. 					2016: [236, 250, 408, 105]
  88. 				});
  89.  
  90. 				this.dataMap.dataIT = this.dataFormatter({
  91. 					//max : 26600,
  92. 					2020: [752, 928, 126, 255],
  93. 					2019: [388, 840, 707, 245],
  94. 					2018: [855, 987, 959, 235],
  95. 					2017: [626, 709, 701, 225],
  96. 					2016: [509, 892, 201, 215]
  97. 				});
  98.  
  99. 				this.option = {
  100. 					baseOption: {
  101. 						timeline: {
  102. 							axisType: 'category',
  103. 							autoPlay: true,
  104. 							playInterval: 2000,
  105. 							data: ['2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01', '2020-01-01'],
  106. 							lineStyle: {
  107. 								color: '#179bf1'
  108. 							},
  109. 							left: 30,
  110. 							right: 30,
  111. 							bottom: 30,
  112. 							label: {
  113. 								color: '#2867a8',
  114. 								formatter(s) {
  115. 									return (new Date(s)).getFullYear();
  116. 								}
  117. 							},
  118. 							checkpointStyle: {
  119. 								color: '#01d8ff',
  120. 								symbolSize: 10,
  121. 								borderColor: 'rgba(1, 216, 255, 0.5)',
  122. 								borderWidth: 5,
  123. 							},
  124. 							controlStyle: {
  125. 								showPlayBtn: false,
  126. 								borderColor: '#01bde6',
  127. 								itemGap: 20
  128. 							},
  129. 							itemStyle: {
  130. 								// color: '#004b85',
  131. 								borderColor: '#004b85',
  132. 								borderWidth: 1,
  133. 								shadowColor: 'rgba(1, 216, 225, 0.5)',
  134. 								shadowBlur: 5
  135. 							},
  136. 							emphasis: {
  137. 								label: {
  138. 									color: '#01d8ff',
  139. 									show: false
  140. 								},
  141. 								checkpointStyle: {
  142. 									color: '#01d8ff',
  143. 									borderColor: 'rgba(1, 216, 255, 0.5)',
  144. 									borderWidth: 5,
  145. 								},
  146. 								controlStyle: {
  147. 									borderColor: 'rgba(1, 216, 255, 0.5)'
  148. 								},
  149. 								itemStyle: {
  150. 									color: '#01d8ff',
  151. 									borderColor: 'rgba(1, 216, 225, 0.5)',
  152. 									borderWidth: 5
  153. 								}
  154. 							}
  155. 						},
  156.  
  157. 						// tooltip: {
  158. 						//   trigger: 'item'
  159. 						// },
  160. 						grid: {
  161. 							bottom: '30%',
  162. 							right: "42%"
  163. 						},
  164. 						calculable: true,
  165. 						xAxis: [{
  166. 							type: 'category',
  167. 							data: ['金融类', '政务类', '医疗类', '互联网类'],
  168. 							splitLine: {
  169. 								show: false
  170. 							},
  171. 							axisTick: {
  172. 								show: false
  173. 							},
  174. 							axisLine: {
  175. 								show: true,
  176. 								lineStyle: {
  177. 									color: '#0084ff',
  178. 								}
  179. 							},
  180. 						}],
  181. 						yAxis: [{
  182. 							type: 'value',
  183. 							name: '区块链应用（个）',
  184. 							splitLine: {
  185. 								show: false
  186. 							},
  187. 							axisTick: {
  188. 								show: false
  189. 							},
  190. 							axisLine: {
  191. 								show: true,
  192. 								lineStyle: {
  193. 									color: '#0084ff'
  194. 								}
  195. 							},
  196. 						}],
  197.  
  198. 						series: [{
  199. 								name: '联盟链',
  200. 								type: 'bar',
  201. 								barMaxWidth: 15,
  202. 								center: ['20%', '65%'],
  203. 								seriesLayoutBy: 'row',
  204. 								markPoint: {
  205. 									symbol: 'pin',
  206. 									itemStyle: {
  207. 										normal: {
  208. 											color: '#eb9b44',
  209. 											shadowColor: '#eb9b44',
  210. 											shadowBlur: 15
  211. 										}
  212. 									},
  213. 									data: [{
  214. 											type: 'max',
  215. 											name: '最大值'
  216. 										},
  217. 										{
  218. 											type: 'min',
  219. 											name: '最小值'
  220. 										}
  221. 									]
  222. 								}
  223. 								// label: {
  224. 								//   show: true,
  225. 								//   position: 'top'
  226. 								// },
  227. 							},
  228. 							{
  229. 								name: '应用占比',
  230. 								type: 'pie',
  231. 								center: ['76%', '20%'],
  232. 								radius: '28%',
  233. 								z: 100
  234. 							}
  235. 						]
  236. 					},
  237.  
  238. 					options: [{
  239. 							series: [{
  240. 									data: [{
  241. 										name: '金融类',
  242. 										value: this.dataMap.dataJR['2016sum'],
  243. 										itemStyle: itemStyleJR
  244. 									}, {
  245. 										name: '政务类',
  246. 										value: this.dataMap.dataZW['2016sum'],
  247. 										itemStyle: itemStyleZW
  248. 									}, {
  249. 										name: '医疗类',
  250. 										value: this.dataMap.dataYL['2016sum'],
  251. 										itemStyle: itemStyleYL
  252. 									}, {
  253. 										name: '互联网类',
  254. 										value: this.dataMap.dataIT['2016sum'],
  255. 										itemStyle: itemStyleIT
  256. 									}],
  257. 								},
  258. 								{
  259. 									data: [{
  260. 										name: '金融类',
  261. 										value: this.dataMap.dataJR['2016sum'],
  262. 										itemStyle: itemStyleJR
  263. 									}, {
  264. 										name: '政务类',
  265. 										value: this.dataMap.dataZW['2016sum'],
  266. 										itemStyle: itemStyleZW
  267. 									}, {
  268. 										name: '医疗类',
  269. 										value: this.dataMap.dataYL['2016sum'],
  270. 										itemStyle: itemStyleYL
  271. 									}, {
  272. 										name: '互联网类',
  273. 										value: this.dataMap.dataIT['2016sum'],
  274. 										itemStyle: itemStyleIT
  275. 									}]
  276. 								}
  277. 							]
  278. 						},
  279. 						{
  280. 							series: [{
  281. 									data: [{
  282. 										name: '金融类',
  283. 										value: this.dataMap.dataJR['2017sum'],
  284. 										itemStyle: itemStyleJR
  285. 									}, {
  286. 										name: '政务类',
  287. 										value: this.dataMap.dataZW['2017sum'],
  288. 										itemStyle: itemStyleZW
  289. 									}, {
  290. 										name: '医疗类',
  291. 										value: this.dataMap.dataYL['2017sum'],
  292. 										itemStyle: itemStyleYL
  293. 									}, {
  294. 										name: '互联网类',
  295. 										value: this.dataMap.dataIT['2017sum'],
  296. 										itemStyle: itemStyleIT
  297. 									}],
  298. 								},
  299. 								{
  300. 									data: [{
  301. 										name: '金融类',
  302. 										value: this.dataMap.dataJR['2017sum'],
  303. 										itemStyle: itemStyleJR
  304. 									}, {
  305. 										name: '政务类',
  306. 										value: this.dataMap.dataZW['2017sum'],
  307. 										itemStyle: itemStyleZW
  308. 									}, {
  309. 										name: '医疗类',
  310. 										value: this.dataMap.dataYL['2017sum'],
  311. 										itemStyle: itemStyleYL
  312. 									}, {
  313. 										name: '互联网类',
  314. 										value: this.dataMap.dataIT['2017sum'],
  315. 										itemStyle: itemStyleIT
  316. 									}]
  317. 								}
  318. 							]
  319. 						},
  320. 						{
  321. 							series: [{
  322. 									data: [{
  323. 										name: '金融类',
  324. 										value: this.dataMap.dataJR['2018sum'],
  325. 										itemStyle: itemStyleJR
  326. 									}, {
  327. 										name: '政务类',
  328. 										value: this.dataMap.dataZW['2018sum'],
  329. 										itemStyle: itemStyleZW
  330. 									}, {
  331. 										name: '医疗类',
  332. 										value: this.dataMap.dataYL['2018sum'],
  333. 										itemStyle: itemStyleYL
  334. 									}, {
  335. 										name: '互联网类',
  336. 										value: this.dataMap.dataIT['2018sum'],
  337. 										itemStyle: itemStyleIT
  338. 									}]
  339. 								},
  340. 								{
  341. 									data: [{
  342. 										name: '金融类',
  343. 										value: this.dataMap.dataJR['2018sum'],
  344. 										itemStyle: itemStyleJR
  345. 									}, {
  346. 										name: '政务类',
  347. 										value: this.dataMap.dataZW['2018sum'],
  348. 										itemStyle: itemStyleZW
  349. 									}, {
  350. 										name: '医疗类',
  351. 										value: this.dataMap.dataYL['2018sum'],
  352. 										itemStyle: itemStyleYL
  353. 									}, {
  354. 										name: '互联网类',
  355. 										value: this.dataMap.dataIT['2018sum'],
  356. 										itemStyle: itemStyleIT
  357. 									}]
  358. 								}
  359. 							]
  360. 						},
  361. 						{
  362. 							series: [{
  363. 									data: [{
  364. 										name: '金融类',
  365. 										value: this.dataMap.dataJR['2019sum'],
  366. 										itemStyle: itemStyleJR
  367. 									}, {
  368. 										name: '政务类',
  369. 										value: this.dataMap.dataZW['2019sum'],
  370. 										itemStyle: itemStyleZW
  371. 									}, {
  372. 										name: '医疗类',
  373. 										value: this.dataMap.dataYL['2019sum'],
  374. 										itemStyle: itemStyleYL
  375. 									}, {
  376. 										name: '互联网类',
  377. 										value: this.dataMap.dataIT['2019sum'],
  378. 										itemStyle: itemStyleIT
  379. 									}]
  380. 								},
  381. 								{
  382. 									data: [{
  383. 										name: '金融类',
  384. 										value: this.dataMap.dataJR['2019sum'],
  385. 										itemStyle: itemStyleJR
  386. 									}, {
  387. 										name: '政务类',
  388. 										value: this.dataMap.dataZW['2019sum'],
  389. 										itemStyle: itemStyleZW
  390. 									}, {
  391. 										name: '医疗类',
  392. 										value: this.dataMap.dataYL['2019sum'],
  393. 										itemStyle: itemStyleYL
  394. 									}, {
  395. 										name: '互联网类',
  396. 										value: this.dataMap.dataIT['2019sum'],
  397. 										itemStyle: itemStyleIT
  398. 									}]
  399. 								}
  400. 							]
  401. 						},
  402. 						{
  403. 							series: [{
  404. 									data: [{
  405. 										name: '金融类',
  406. 										value: this.dataMap.dataJR['2020sum'],
  407. 										itemStyle: itemStyleJR
  408. 									}, {
  409. 										name: '政务类',
  410. 										value: this.dataMap.dataZW['2020sum'],
  411. 										itemStyle: itemStyleZW
  412. 									}, {
  413. 										name: '医疗类',
  414. 										value: this.dataMap.dataYL['2020sum'],
  415. 										itemStyle: itemStyleYL
  416. 									}, {
  417. 										name: '互联网类',
  418. 										value: this.dataMap.dataIT['2020sum'],
  419. 										itemStyle: itemStyleIT
  420. 									}]
  421. 								},
  422. 								{
  423. 									data: [{
  424. 										name: '金融类',
  425. 										value: this.dataMap.dataJR['2020sum'],
  426. 										itemStyle: itemStyleJR
  427. 									}, {
  428. 										name: '政务类',
  429. 										value: this.dataMap.dataZW['2020sum'],
  430. 										itemStyle: itemStyleZW
  431. 									}, {
  432. 										name: '医疗类',
  433. 										value: this.dataMap.dataYL['2020sum'],
  434. 										itemStyle: itemStyleYL
  435. 									}, {
  436. 										name: '互联网类',
  437. 										value: this.dataMap.dataIT['2020sum'],
  438. 										itemStyle: itemStyleIT
  439. 									}]
  440. 								}
  441. 							]
  442. 						}
  443. 					]
  444. 				}
  445.  
  446. 				myChart.setOption(this.option, true);
  447. 				
  448. 				window.addEventListener('resize', () => {
  449. 					myChart.resize();
  450. 				});
  451. 			}
  452. 		}
  453. 	}
  454. </script>
  455.  
  456. <style lang="scss" scoped>
  457. 	.sn-title {
  458. 		text-align: center;
  459. 		color: white;
  460. 	}
  461.  
  462. 	.wrap-container {
  463. 		width: 586px;
  464. 		height: 400px;
  465.  
  466. 		.chartsdom {
  467. 			width: 100%;
  468. 			height: 100%;
  469. 		}
  470. 	}
  471. </style>

11、3D 柱状图

 

  1. <template>
  2. 	<div class="wrap-container trigle">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">3D柱状图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="bar bar-img"></div>
  8. 					<div class="bar bar-img1"></div>
  9. 					<div class="bar bar-img2"></div>
  10. 					
  11. 					<div class="chartsdom" id='chart-3d-bar'></div>
  12. 				</div>
  13. 			</div>
  14. 		</div>
  15. 	</div>
  16. </template>
  17.  
  18. <script>
  19. 	import 'echarts-gl'
  20. 	export default {
  21. 		name: 'three-d-bar',
  22. 		data() {
  23. 			return {
  24. 				option: null
  25. 			}
  26. 		},
  27.  
  28. 		mounted() {
  29. 			this.getEchart()
  30. 		},
  31.  
  32. 		methods: {
  33. 			getEchart() {
  34. 				let myChart = this.$echarts.init(document.getElementById('chart-3d-bar'));
  35. 				let xData = ['20-25', '25-30', '30-35', '35-40', '40-45', '45-50'];
  36. 				let days = ['1', '2', '3', '4', '5', '6'];
  37. 				let sex = ['女', '男'];
  38. 				let data = [
  39. 					[0, 0, 3, sex[0], xData[0], 500, 25],
  40. 					[0, 1, 2.5, sex[0], xData[3], 1000, 35],
  41. 					[0, 2, 1.5, sex[1], xData[4], 3000, 5],
  42. 					[0, 3, 1, sex[1], xData[1], 300, 15],
  43. 					[0, 4, 2, sex[0], xData[2], 500, 55],
  44. 					[0, 5, 3, sex[0], xData[3], 1500, 45],
  45.  
  46. 					[1, 5, 6, sex[1], xData[0], 300, 25],
  47. 					[1, 1, 4, sex[0], xData[1], 500, 22],
  48. 					[1, 2, 2, sex[0], xData[2], 1500, 38],
  49. 					[1, 3, 1.5, sex[1], xData[3], 2500, 25],
  50. 					[1, 4, 3, sex[0], xData[4], 3500, 49],
  51. 					[1, 0, 4, sex[1], xData[5], 5500, 15],
  52.  
  53. 					[2, 2, 3, sex[1], xData[0], 300, 25],
  54. 					[2, 1, 2, sex[0], xData[4], 1300, 25],
  55. 					[2, 2, 5, sex[0], xData[2], 900, 25],
  56. 					[2, 5, 1, sex[1], xData[3], 2000, 25],
  57. 					[2, 0, 3, sex[1], xData[1], 2300, 25],
  58. 					[2, 0, 10, sex[1], xData[5], 3500, 25],
  59.  
  60. 					[3, 2, 3, sex[0], xData[5], 500, 35],
  61. 					[3, 3, 2, sex[0], xData[4], 2300, 55],
  62. 					[3, 2, 1, sex[1], xData[3], 3300, 15],
  63. 					[3, 5, 5, sex[1], xData[2], 500, 10],
  64. 					[3, 1, 2, sex[1], xData[1], 1000, 35],
  65. 					[3, 0, 1, sex[0], xData[0], 300, 45],
  66.  
  67. 					[4, 2, 3, sex[1], xData[1], 600, 25],
  68. 					[4, 0, 5, sex[0], xData[0], 500, 15],
  69. 					[4, 1, 3.5, sex[1], xData[3], 4000, 5],
  70. 					[4, 4, 7, sex[0], xData[0], 300, 75],
  71. 					[4, 1, 0, sex[1], xData[5], 3000, 85],
  72. 					[3, 1, 3, sex[0], xData[2], 2500, 65],
  73.  
  74. 					[5, 2, 3, sex[0], xData[2], 500, 15],
  75. 					[5, 1, 2, sex[1], xData[3], 3300, 52],
  76. 					[5, 1, 5, sex[0], xData[4], 1000, 88],
  77. 					[5, 5, 8, sex[1], xData[0], 200, 12],
  78. 					[5, 2, 7, sex[0], xData[0], 300, 45],
  79. 					[3, 2, 2, sex[1], xData[1], 5000, 51]
  80. 				];
  81. 				
  82. 				this.option = {
  83. 					tooltip: {
  84. 						borderColor: '#8a704e',
  85. 						borderWidth: 1,
  86. 						padding: 15,
  87. 						formatter: (params) => {
  88. 							let html =
  89. 								`${params.seriesName} <br><span style="color: #f00;"> 性别：${params.value[3]} <br> 年龄：${params.value[4]}岁<br> 贷款金额：${params.value[5]} <br> 总人数：${params.value[6]}</span>`;
  90. 							return html;
  91. 						},
  92. 						textStyle: {
  93. 							color: '#8a704e',
  94. 							fontSize: 16
  95. 						}
  96. 					},
  97. 					xAxis3D: {
  98. 						type: 'category',
  99. 						data: xData
  100. 					},
  101. 					yAxis3D: {
  102. 						type: 'category',
  103. 						data: days
  104. 					},
  105. 					zAxis3D: {
  106. 						type: 'value'
  107. 					},
  108. 					grid3D: {
  109. 						show: true,
  110. 						boxWidth: 160,
  111. 						boxDepth: 80,
  112. 						viewControl: {
  113. 							alpha: 10,
  114. 							beta: 15
  115. 						}
  116. 					},
  117. 					series: [{
  118. 						type: 'bar3D',
  119. 						name: '当前值',
  120. 						// data: data,
  121. 						data: data.map((item) => {
  122. 							return {
  123. 								value: [item[1], item[0], item[2], item[3], item[4], item[5], item[6]],
  124. 							}
  125. 						}),
  126. 						shading: 'lambert',
  127. 						label: {
  128. 							show: false
  129. 						},
  130. 						itemStyle: {
  131. 							color: '#0084ff',
  132. 							opacity: 0.8
  133. 						},
  134. 						emphasis: {
  135. 							label: {
  136. 								show: false
  137. 							},
  138. 							itemStyle: {
  139. 								color: '#00eeff'
  140. 							}
  141. 						}
  142. 					}]
  143. 				}
  144. 				
  145. 				myChart.setOption(this.option, true);
  146. 				
  147. 				window.addEventListener('resize', () => {
  148. 					myChart.resize();
  149. 				});
  150. 			}
  151. 			
  152. 		}
  153. 	}
  154. </script>
  155.  
  156. <style lang="scss" scoped>
  157. 	.sn-title{
  158. 		text-align: center;
  159. 		color: white;
  160. 	}
  161. 	.wrap-container{
  162. 		position: relative;
  163. 		width: 620px;
  164. 		height: 400px;
  165. 		.chartsdom{
  166. 			width: 100%;
  167. 			height: 100%;
  168. 		}
  169. 		
  170. 		.bar{
  171. 			width: 100%;
  172. 			height: 100%;
  173. 			position: absolute;
  174. 			&.bar-img{
  175. 				bottom: 5%;
  176. 				background: url(../../assets/img/bk_circle.png) no-repeat center 97%;
  177. 				background-size: 100%;
  178. 				filter:hue-rotate(180deg)
  179. 			}
  180. 			&.bar-img1{
  181. 				bottom: 35%;
  182. 				background: url(../../assets/img/bk_circle1.png) no-repeat center 97%;
  183. 				background-size: 75%;
  184. 				filter: hue-rotate(180deg);
  185. 			}
  186. 			&.bar-img2 {
  187. 				bottom: 60%;
  188. 				background: url(../../assets/img/bk_circle2.png) no-repeat center 97%;
  189. 				background-size: 50%;
  190. 				filter: hue-rotate(180deg);
  191. 			}
  192. 		}
  193. 	}
  194. </style>

12、彩色饼状图组合

 

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">彩色饼状图组合</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-colorful-pies'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'colorful-pies',
  17. 		mounted() {
  18. 			this.getEchart()
  19. 		},
  20. 		methods: {
  21. 			getEchart() {
  22. 				let myChart = this.$echarts.init(document.getElementById('chart-colorful-pies'))
  23. 				let option = {
  24. 					color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
  25. 					tooltip: {
  26. 						trigger: 'item',
  27. 						formatter: '{b} : {c} ({d}%)'
  28. 					},
  29. 					polar: {},
  30. 					angleAxis: {
  31. 						interval: 1,
  32. 						type: 'category',
  33. 						data: [],
  34. 						z: 10,
  35. 						axisLine: {
  36. 							show: false,
  37. 							lineStyle: {
  38. 								color: '#0B4A6B',
  39. 								width: 5,
  40. 								type: 'solid'
  41. 							},
  42. 						},
  43. 						axisLabel: {
  44. 							interval: 0,
  45. 							show: true,
  46. 							color: '#0B4A6B',
  47. 							margin: 8,
  48. 							fontSize: 16
  49. 						},
  50. 					},
  51. 					radiusAxis: {
  52. 						min: 40,
  53. 						max: 120,
  54. 						interval: 15,
  55. 						axisLine: {
  56. 							show: false,
  57. 							lineStyle: {
  58. 								color: '#0B3E5E',
  59. 								width: 1,
  60. 								type: 'solid'
  61. 							},
  62. 						},
  63. 						axisLabel: {
  64. 							formatter: '{value} %',
  65. 							show: false,
  66. 							padding: [0, 0, 20, 0],
  67. 							color: '#0B3E5E',
  68. 							fontSize: 16
  69. 						},
  70. 						splitLine: {
  71. 							lineStyle: {
  72. 								color: '#0B3E5E',
  73. 								width: 2,
  74. 								type: "solid"
  75. 							}
  76. 						}
  77. 					},
  78. 					calculable: true,
  79. 					series: [{
  80. 							type: 'pie',
  81. 							radius: ['6%', '10%'],
  82. 							hoverAnimation: false,
  83. 							labelLine: {
  84. 								normal: {
  85. 									show: false,
  86. 									length: 30,
  87. 									length2: 50
  88. 								},
  89. 								emphasis: {
  90. 									show: false
  91. 								}
  92. 							},
  93. 							tooltip: {
  94. 								show: false
  95. 							},
  96. 							data: [{
  97. 								name: '',
  98. 								value: 0,
  99. 								itemStyle: {
  100. 									normal: {
  101. 										color: '#004A6B'
  102. 									}
  103. 								}
  104. 							}]
  105. 						},
  106. 						{
  107. 							type: 'pie',
  108. 							radius: ['70%', '75%'],
  109. 							hoverAnimation: false,
  110. 							labelLine: {
  111. 								normal: {
  112. 									show: false,
  113. 									length: 30,
  114. 									length2: 50
  115. 								},
  116. 								emphasis: {
  117. 									show: false
  118. 								}
  119. 							},
  120. 							tooltip: {
  121. 								show: false
  122. 							},
  123. 							data: [{
  124. 								name: '',
  125. 								value: 0,
  126. 								itemStyle: {
  127. 									normal: {
  128. 										color: '#004A6B'
  129. 									}
  130. 								}
  131. 							}]
  132. 						},
  133. 						{
  134. 							stack: 'a',
  135. 							type: 'pie',
  136. 							radius: ['20%', '70%'],
  137. 							roseType: 'area',
  138. 							zlevel: 10,
  139. 							label: {
  140. 								normal: {
  141. 									show: true,
  142. 									formatter: '{b}',
  143. 									textStyle: {
  144. 										fontSize: 12,
  145. 									},
  146. 									position: 'outside'
  147. 								},
  148. 								emphasis: {
  149. 									show: true
  150. 								}
  151. 							},
  152. 							labelLine: {
  153. 								normal: {
  154. 								show: true,
  155. 									length: 15,
  156. 									length2: 50,
  157. 									lineStyle: {
  158. 										type: 'dotted'
  159. 									}
  160. 								},
  161. 								emphasis: {
  162. 									show: true
  163. 								}
  164. 							},
  165. 							data: [{
  166. 								value: 35,
  167. 								name: '湖南'
  168. 							}, {
  169. 								value: 28,
  170. 								name: '河北'
  171. 							}, {
  172. 								value: 23,
  173. 								name: '广东'
  174. 							}, {
  175. 								value: 18,
  176. 								name: '四川'
  177. 							}, {
  178. 								value: 13,
  179. 								name: '浙江'
  180. 							}, {
  181. 								value: 8,
  182. 								name: '江苏'
  183. 							}, {
  184. 								value: 5,
  185. 								name: '湖北'
  186. 							}]
  187. 						}
  188. 					]
  189. 				}
  190. 				
  191. 				myChart.setOption(option, true);
  192. 				window.addEventListener('resize', () => {
  193. 					myChart.resize();
  194. 				});
  195. 			}
  196.  
  197. 		}
  198. 	}
  199. </script>
  200.  
  201. <style lang="scss" scoped>
  202. 	.sn-title{
  203. 		text-align: center;
  204. 		color: white;
  205. 	}
  206. 	.wrap-container{
  207. 		width: 532px;
  208. 		height: 400px;
  209. 		.chartsdom{
  210. 			width: 100%;
  211. 			height: 100%;
  212. 		}
  213. 	}
  214. </style>

13、多彩柱状图

  1. <template>
  2. 	<div class="wrap-container sn-container">
  3. 		<div class="sn-content">
  4. 			<div class="sn-title">多彩的柱状图</div>
  5. 			<div class="sn-body">
  6. 				<div class="wrap-container">
  7. 					<div class="chartsdom" id='chart-colorful-bar'></div>
  8. 				</div>
  9. 			</div>
  10. 		</div>
  11. 	</div>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		name: 'colorful-bar',
  17.  
  18. 		mounted() {
  19. 			this.getEchart()
  20. 		},
  21. 		methods: {
  22. 			getEchart() {
  23. 				let myChart = this.$echarts.init(document.getElementById('chart-colorful-bar'))
  24. 				let charts = { // 按顺序排列从大到小
  25. 					cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车', '医疗互联', '物流行业'],
  26. 					cityData: [1500, 1200, 900, 600, 400, 300, 100]
  27. 				}
  28.  
  29. 				let top10CityList = charts.cityList;
  30. 				let top10CityData = charts.cityData;
  31. 				// bar 颜色rgba ，alpha 在后边 LinearGradient 补充
  32. 				let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19',
  33. 					'rgba(255,168,17', 'rgba(218,111,227'
  34. 				];
  35.  
  36. 				let lineY = [];
  37. 				for (let i = 0; i < charts.cityList.length; i++) {
  38. 					let x = i
  39. 					if (x > color.length - 1) {
  40. 						x = color.length - 1
  41. 					}
  42. 					let data = {
  43. 						name: charts.cityList[i],
  44. 						color: color[x] + ')',
  45. 						value: top10CityData[i],
  46. 						itemStyle: {
  47. 							normal: {
  48. 								show: true,
  49. 								color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  50. 									offset: 0,
  51. 									color: color[x] + ', 0.3)'
  52. 								}, {
  53. 									offset: 1,
  54. 									color: color[x] + ', 1)'
  55. 								}], false),
  56. 								barBorderRadius: 10
  57. 							},
  58. 							emphasis: {
  59. 								shadowBlur: 15,
  60. 								shadowColor: 'rgba(0, 0, 0, 0.1)'
  61. 							}
  62. 						}
  63. 					}
  64. 					
  65. 					lineY.push(data)
  66. 				}
  67.  
  68. 				// 指定配置和数据
  69. 				let option = {
  70. 					color: color,
  71. 					tooltip: {
  72. 						trigger: 'item',
  73. 					},
  74. 					// 图表网格相对html元素的上下左右边界距离
  75. 					grid: {
  76. 						borderWidth: 0,
  77. 						top: '15%',
  78. 						left: '12%',
  79. 						right: '12%',
  80. 						bottom: '10%',
  81. 						containLabel: true
  82. 					},
  83. 					xAxis: [{
  84. 						type: 'value',
  85. 						axisTick: {
  86. 						show: false
  87. 						},
  88. 						axisLine: {
  89. 							show: false
  90. 						},
  91. 						splitLine: {
  92. 							show: false
  93. 						},
  94. 						axisLabel: {
  95. 							show: false
  96. 						}
  97. 					}],
  98. 					yAxis: [{
  99. 						type: 'category',
  100. 						inverse: true,
  101. 						axisTick: {
  102. 							show: false
  103. 						},
  104. 						axisLine: {
  105. 							show: false
  106. 						},
  107. 						axisLabel: {
  108. 							show: true,
  109. 							inside: false,
  110. 							textStyle: {
  111. 								color: '#b3ccf8',
  112. 								fontSize: 13
  113. 							},
  114. 						},
  115. 						data: top10CityList
  116. 					}, {
  117. 						type: 'category',
  118. 						axisLine: {
  119. 							show: false
  120. 						},
  121. 						axisTick: {
  122. 							show: false
  123. 						},
  124. 						axisLabel: {
  125. 							show: true,
  126. 							inside: false,
  127. 							textStyle: {
  128. 							color: '#b3ccf8',
  129. 								fontSize: 13
  130. 							},
  131. 							formatter: (val) => {
  132. 								return `${val}`
  133. 							}
  134. 						},
  135. 						splitArea: {
  136. 							show: false
  137. 						},
  138. 						splitLine: {
  139. 							show: false
  140. 						},
  141. 						data: top10CityData.reverse()
  142. 					}],
  143. 					series: [{
  144. 						name: '',
  145. 						type: 'bar',
  146. 						zlevel: 2,
  147. 						barWidth: '10px',
  148. 						data: lineY,
  149. 						animationDuration: 1500,
  150. 						label: {
  151. 							normal: {
  152. 							color: '#b3ccf8',
  153. 								show: false,
  154. 								position: [0, '-15px'],
  155. 								textStyle: {
  156. 									fontSize: 13
  157. 								},
  158. 								formatter: (a) => {
  159. 									return a.name;
  160. 								}
  161. 							}
  162. 						}
  163. 					}]
  164. 				};
  165.  
  166. 				// 把配置给实例对象
  167. 				myChart.setOption(option, true);
  168. 				// 添加窗口尺寸变化监听
  169. 				window.addEventListener('resize', () => {
  170. 					myChart.resize();
  171. 				});
  172. 			}
  173. 		}
  174.  
  175. 	}
  176. </script>
  177.  
  178. <style lang="scss" scoped>
  179. 	.sn-title{
  180. 		text-align: center;
  181. 		color: white;
  182. 	}
  183. 	.wrap-container {
  184. 		width: 432px;
  185. 		height: 400px;
  186.  
  187. 		.chartsdom {
  188. 			width: 100%;
  189. 			height: 100%;
  190. 		}
  191. 	}
  192. </style>

五、工程代码

参考下载地址：

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发