• Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理

    Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理

    目录

    Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理

    一、简单介绍

    二、效果预览

    三、注意事项

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

    五、工程代码

    一、简单介绍

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

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

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

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

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

    Echarts 官网文档：Handbook - Apache ECharts

    Echarts 官网示例：Examples - Apache 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 + '月
      '       + 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} 
      {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、彩虹饼状图

     

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

    五、工程代码

    参考下载地址：Vue之echarts图表数据可视化常用的一些图表动态图表3D图表的简单整理

  • 相关阅读:
    力扣 -- 10. 正则表达式匹配
    ML之PDP：基于titanic泰坦尼克是否获救二分类预测数据集利用PDP部分依赖图对RF随机森林和LightGBM模型实现可解释性案例
    Vert.x学习笔记-什么是Verticle
    04. 模仿stm32驱动开发
    系统检测工具
    自研爬虫框架的经验总结（理论及方法）
    【MySql】13- 实践篇(十一)
    【C++ STL序列容器】list 双向链表
    Linux系统配置静态IP地址步骤
    MicroExpSTCNN and MicroExpFuseNet-基于三维时空卷积神经网络的自发面部微表情识别
  • 原文地址：https://blog.csdn.net/u014361280/article/details/126158141