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

echarts如何实现3D饼图(环形图)?_echarts环形图3d

作者：花生_TL007 | 2024-04-13 10:28:47

赞

踩

echarts环形图3d

一、实现的效果

二、具体步骤

1.安装依赖

npm install echarts 

2.引入echarts

import * as echarts from 'echarts';

 注意：这里需要用到echarts-gl，必须单独引入才可以

import 'echarts-gl';

3.echarts部分代码

我知道这部分内容很多，但只要cv去用就可以了，getParametricEquation这个函数不用改(我也不知道咋改。。。反正我没动过）；getPie3D函数根据自己的需求稍微改一下option配置就好，其余的可以不用管

  1.  // 颜色列表
  2. 	const colorList = [
  3. 		'rgba(76, 139, 241, 0.9)',
  4. 		'rgba(101, 193, 241, 0.9)',
  5. 		'rgba(249, 215, 114, 0.9)',
  6. 		'rgba(179, 186, 195, 0.9)',
  7. 		'rgba(255, 255, 255,  0.9)',
  8. 		'rgba(145, 186, 217, 0.9)',
  9. 	];
  10.  
  11. 	// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  12. 	function getParametricEquation(startRatio: any, endRatio: any, isSelected: any, isHovered: any, k: any, h: any) {
  13. 		// 计算
  14. 		let midRatio = (startRatio + endRatio) / 2;
  15. 		let startRadian = startRatio * Math.PI * 2;
  16. 		let endRadian = endRatio * Math.PI * 2;
  17. 		let midRadian = midRatio * Math.PI * 2;
  18.  
  19. 		// 如果只有一个扇形，则不实现选中效果。
  20. 		// if (startRatio === 0 && endRatio === 1) {
  21. 		//     isSelected = false;
  22. 		// }
  23. 		isSelected = false;
  24. 		// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  25. 		k = typeof k !== 'undefined' ? k : 1 / 3;
  26.  
  27. 		// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  28. 		let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  29. 		let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  30.  
  31. 		// 计算高亮效果的放大比例（未高亮，则比例为 1）
  32. 		let hoverRate = isHovered ? 1.05 : 1;
  33.  
  34. 		// 返回曲面参数方程
  35. 		return {
  36. 			u: {
  37. 				min: -Math.PI,
  38. 				max: Math.PI * 3,
  39. 				step: Math.PI / 32,
  40. 			},
  41.  
  42. 			v: {
  43. 				min: 0,
  44. 				max: Math.PI * 2,
  45. 				step: Math.PI / 20,
  46. 			},
  47.  
  48. 			x: function (u: any, v: any) {
  49. 				if (u < startRadian) {
  50. 					return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  51. 				}
  52. 				if (u > endRadian) {
  53. 					return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  54. 				}
  55. 				return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  56. 			},
  57.  
  58. 			y: function (u: any, v: any) {
  59. 				if (u < startRadian) {
  60. 					return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  61. 				}
  62. 				if (u > endRadian) {
  63. 					return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  64. 				}
  65. 				return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  66. 			},
  67.  
  68. 			z: function (u: any, v: any) {
  69. 				if (u < -Math.PI * 0.5) {
  70. 					return Math.sin(u);
  71. 				}
  72. 				if (u > Math.PI * 2.5) {
  73. 					return Math.sin(u) * h * 0.1;
  74. 				}
  75. 				return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
  76. 			},
  77. 		};
  78. 	}
  79.  
  80. 	// 生成模拟 3D 饼图的配置项
  81. 	function getPie3D(pieData: any, internalDiameterRatio: any) {
  82. 		let series = [];
  83. 		let sumValue = 0;
  84. 		let startValue = 0;
  85. 		let endValue = 0;
  86. 		let legendData = [];
  87. 		let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
  88.  
  89. 		// 为每一个饼图数据，生成一个 series-surface 配置
  90. 		for (let i = 0; i < pieData.length; i++) {
  91. 			sumValue += pieData[i].value;
  92.  
  93. 			let seriesItem: any = {
  94. 				name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
  95. 				type: 'surface',
  96. 				parametric: true,
  97. 				wireframe: {
  98. 					show: false,
  99. 				},
  100. 				pieData: pieData[i],
  101. 				pieStatus: {
  102. 					selected: false,
  103. 					hovered: false,
  104. 					k: 1 / 10,
  105. 				},
  106. 			};
  107.  
  108. 			if (typeof pieData[i].itemStyle != 'undefined') {
  109. 				let itemStyle: any = {};
  110.  
  111. 				typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
  112. 				typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
  113.  
  114. 				seriesItem.itemStyle = itemStyle;
  115. 			}
  116. 			series.push(seriesItem);
  117. 		}
  118.  
  119. 		// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  120. 		// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  121. 		for (let i = 0; i < series.length; i++) {
  122. 			endValue = startValue + series[i].pieData.value;
  123. 			series[i].pieData.startRatio = startValue / sumValue;
  124. 			series[i].pieData.endRatio = endValue / sumValue;
  125. 			series[i].parametricEquation = getParametricEquation(
  126. 				series[i].pieData.startRatio,
  127. 				series[i].pieData.endRatio,
  128. 				false,
  129. 				false,
  130. 				k,
  131. 				series[i].pieData.value
  132. 			);
  133. 			startValue = endValue;
  134. 			legendData.push(series[i].name);
  135. 		}
  136. 		series.push({
  137. 			name: 'mouseoutSeries',
  138. 			type: 'surface',
  139.  
  140. 			parametric: true,
  141. 			wireframe: {
  142. 				show: false,
  143. 			},
  144. 			itemStyle: {
  145. 				opacity: 0.2,
  146. 				color: 'rgba(165, 247, 253, 1)',
  147. 			},
  148. 			parametricEquation: {
  149. 				u: {
  150. 					min: 0,
  151. 					max: Math.PI * 2,
  152. 					step: Math.PI / 20,
  153. 				},
  154. 				v: {
  155. 					min: 0,
  156. 					max: Math.PI / 4,
  157. 					step: Math.PI / 20,
  158. 				},
  159. 				x: function (u: any, v: any) {
  160. 					return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
  161. 				},
  162. 				y: function (u: any, v: any) {
  163. 					return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
  164. 				},
  165. 				z: function (u: any, v: any) {
  166. 					return Math.cos(v) > 0 ? -3 : -3;
  167. 				},
  168. 			},
  169. 		});
  170.  
  171. 		// 准备待返回的配置项，把准备好的 legendData、series 传入。
  172. 		let option = {
  173. 			legend: {
  174. 				icon: 'circle',
  175. 				orient: 'vertical',
  176. 				data: pieData.map((dItem: any, dIndex: any) => {
  177. 					return {
  178. 						...dItem,
  179. 						textStyle: {
  180. 							rich: {
  181. 								percent: {
  182. 									color: colorList[dIndex],
  183. 								},
  184. 							},
  185. 						},
  186. 					};
  187. 				}),
  188. 				right: '5%',
  189. 				top: '20%',
  190. 				itemGap: 10,
  191. 				itemWidth: 12,
  192. 				itemHeight: 12,
  193. 				selectedMode: false, // 关闭图例选择
  194. 				textStyle: {
  195. 					color: '#fff',
  196. 					fontSize: 14,
  197. 					fontFamily: 'Source Han Sans CN',
  198. 					rich: {
  199. 						name: {
  200. 							color: '#FFF',
  201. 							fontSize: 18,
  202. 							width: 50,
  203. 							padding: [0, 0, 0, 10],
  204. 						},
  205. 						value: {
  206. 							color: '#2BDFD4',
  207. 							fontSize: 20,
  208. 							width: 50,
  209. 							padding: [0, 0, 0, 20],
  210. 						},
  211. 						percent: {
  212. 							color: '#2BDFD4',
  213. 							fontSize: 24,
  214. 							padding: [0, 0, 0, 20],
  215. 						},
  216. 						unit: {
  217. 							color: '#ACDCE4',
  218. 							fontSize: 24,
  219. 							padding: [0, 0, 0, 5],
  220. 						},
  221. 					},
  222. 				},
  223. 				formatter: (name: any) => {
  224. 					let obj = pieData.find((item: any) => item.name === name);
  225. 					let datas = pieData;
  226. 					let total = 0;
  227. 					let target = obj.value;
  228. 					for (let i = 0; i < datas.length; i++) {
  229. 						total += Number(datas[i].value);
  230. 					}
  231. 					const arr = [`{name|${name}}{value|${obj.value}次}{percent|${((target / total) * 100).toFixed(0)}}{unit|%}`];
  232. 					return arr.join('');
  233. 				},
  234. 			},
  235. 			xAxis3D: {},
  236. 			yAxis3D: {},
  237. 			zAxis3D: {},
  238. 			grid3D: {
  239. 				viewControl: {
  240. 					autoRotate: true, // 自动旋转
  241. 				},
  242. 				left: '4%',
  243. 				width: '45%',
  244. 				show: false,
  245. 				boxHeight: 30,
  246.         // boxWidth和boxDepth这两个属性值保持一致，才可以在调整饼图宽度的时候保持水平，不然就会歪歪扭扭
  247. 				boxWidth: 130,
  248. 				boxDepth: 130,
  249. 			},
  250. 			series: series,
  251. 		};
  252. 		return option;
  253. 	}
  254.  
  255. 	const data = [
  256. 		{
  257. 			name: 'PM2.5',
  258. 			value: 134,
  259. 		},
  260. 		{
  261. 			name: 'VOC',
  262. 			value: 56,
  263. 		},
  264. 		{
  265. 			name: 'T',
  266. 			value: 57,
  267. 		},
  268. 		{
  269. 			name: 'CH2O',
  270. 			value: 36,
  271. 		},
  272. 		{
  273. 			name: 'CO2',
  274. 			value: 51,
  275. 		},
  276. 		{
  277. 			name: 'RH',
  278. 			value: 51,
  279. 		},
  280. 	];
  281.  
  282. 	const serData = data.map((dItem, index) => {
  283. 		return {
  284. 			...dItem,
  285. 			value: Number(dItem.value),
  286. 			itemStyle: {
  287. 				color: colorList[index],
  288. 			},
  289. 		};
  290. 	});
  291.   
  292. 	// 传入数据生成 option
  293. 	let option = getPie3D(serData, 0.7);

 

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

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

  

闽ICP备14008679号