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

echarts实现3D柱状图（视觉层面）和3D饼图_echarts 3d

作者：我家自动化 | 2024-02-15 08:58:38

赞

踩

echarts 3d

1.3D柱状图

原理：

立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。

效果图如下：

需要四份数据，两个柱子的数据+X轴数据+颜色数据，

通过setData和setColor生成需要的数据，横向柱状图同理，参照代码中注释。

以下是完整案例代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf8"></meta>
  5. 		<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
  6. 	</head>
  7. 	<style>
  8. 		* {
  9. 			margin: 0;
  10. 			padding: 0;
  11. 			box-sizing: border-box;
  12. 		}
  13. 		.border {
  14. 			border: 1px solid #000;
  15. 		}
  16.  
  17. 		.left {
  18. 			width: 25%;
  19. 			height: 100%;
  20. 			margin: 0 auto;
  21. 		}		
  22. 	</style>
  23. 	<body>
  24. 		<div class="left border">
  25. 			<div id="litiBar1" style="width:100%;height:400px;background-color: #000;"></div>
  26. 		</div>
  27. 	</body>
  28. 	<script type="text/javascript">
  29. 		//组织数据
  30. 		let setData = function(data, constData, showData) {
  31. 			data.filter(function(item) {
  32. 				if (item) {
  33. 					constData.push(1);
  34. 					showData.push(item);
  35. 				} else {
  36. 					constData.push(0);
  37. 					showData.push({
  38. 						value: 1,
  39. 						itemStyle: {
  40. 							normal: {
  41. 								borderColor: "rgba(0,0,0,0)",
  42. 								borderWidth: 2,
  43. 								color: "rgba(0,0,0,0)",
  44. 							},
  45. 						},
  46. 					});
  47. 				}
  48. 			});
  49. 		}
  50. 		//组织颜色
  51. 		let setColor = function(colorArr) {
  52. 			let color = {
  53. 				type: "linear",
  54. 				x: 0,
  55. 				x2: 1,
  56. 				y: 0,
  57. 				y2: 0,
  58. 				/* 此处决定阴暗面 若为横向柱状图则x,y轴调换
  59. 					x: 0,
  60. 					x2: 0,
  61. 					y: 0,
  62. 					y2: 1, */
  63. 				colorStops: [{
  64. 						offset: 0,
  65. 						color: colorArr[0],
  66. 					},
  67. 					{
  68. 						offset: 0.5,
  69. 						color: colorArr[0],
  70. 					},
  71. 					{
  72. 						offset: 0.5,
  73. 						color: colorArr[1],
  74. 					},
  75. 					{
  76. 						offset: 1,
  77. 						color: colorArr[1],
  78. 					},
  79. 				],
  80. 			};
  81. 			return color
  82. 		}
  83.  
  84. 		var vehicle = [45, 25, 48, 62, 35]
  85. 		var controlBall = [23, 12, 52, 14, 9]
  86.  
  87. 		var barWidth = 30;
  88. 		var constData1 = [];
  89. 		var showData1 = [];
  90.  
  91.  
  92. 		var constData2 = [];
  93. 		var showData2 = [];
  94.  
  95. 		setData(vehicle, constData1, showData1)
  96. 		setData(controlBall, constData2, showData2)
  97.  
  98. 		var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
  99. 		var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
  100.  
  101. 		var color1 = setColor(colorArr1)
  102. 		var color2 = setColor(colorArr2)
  103.  
  104.  
  105.  
  106.  
  107.  
  108. 		var option = {
  109. 			tooltip: {
  110. 				trigger: 'axis',
  111. 				axisPointer: {
  112. 					type: 'shadow'
  113. 				}
  114. 			},
  115. 			legend: {
  116. 				show: false
  117. 			},
  118. 			grid: {
  119. 				top: '15%',
  120. 				bottom: '15%'
  121. 			},
  122. 			xAxis: {
  123. 				type: 'category',
  124. 				axisLabel: {
  125. 					color: '#FFFFFF'
  126. 				},
  127. 				axisLine: {
  128. 					show: true,
  129. 					lineStyle: {
  130. 						color: '#1B3F66'
  131. 					}
  132. 				},
  133. 				axisTick: {
  134. 					show: false
  135. 				},
  136. 				data:  ['合肥', '安庆', '芜湖', '南京', '杭州']
  137. 			},
  138. 			yAxis: {
  139. 				type: 'value',
  140. 				axisLabel: {
  141. 					color: '#FFFFFF'
  142. 				},
  143. 				axisLine: {
  144. 					show: true,
  145. 					lineStyle: {
  146. 						color: '#1B3F66'
  147. 					}
  148. 				},
  149. 				splitLine: {
  150. 					lineStyle: {
  151. 						color: '#1B3F66'
  152. 					}
  153. 				}
  154. 			},
  155. 			series: [{
  156. 					z: 1,
  157. 					type: 'bar',
  158. 					name: '柱子1',
  159. 					barGap: "15%", //相邻柱子间距
  160. 					itemStyle: {
  161. 						borderRadius: [0, 0, 0, 0],//柱子四周圆角
  162. 						color: color1//柱子左右颜色（深，浅）
  163. 					},
  164. 					data: vehicle //Y轴上的高度
  165. 				},
  166. 				// ---------------------------------------------
  167. 				{
  168. 					z: 2,
  169. 					name: '柱子1',
  170. 					type: "pictorialBar",
  171. 					data: constData1,//此数据对应底部组件
  172. 					symbol: "diamond",//底部组件形状，不写默认为椭圆
  173. 					symbolOffset: ["-58%", "50%"],//与柱子的偏移角度
  174. 					symbolSize: [25, 10],//底面[宽，高]
  175. 					itemStyle: {
  176. 						normal: {
  177. 							color: color1//底面左右颜色（深，浅）
  178. 						},
  179. 					},
  180. 					tooltip: {
  181. 						show: false,
  182. 					},
  183. 				},
  184. 				{
  185. 					z: 3,
  186. 					name: '柱子1',
  187. 					type: "pictorialBar",
  188. 					symbolPosition: "end",
  189. 					data: showData1,//此数据对应顶部组件
  190. 					symbol: "diamond",
  191. 					symbolOffset: ["-55%", "-50%"],
  192. 					symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
  193. 					itemStyle: {
  194. 						normal: {
  195. 							/* borderColor: colorArr1[2],
  196. 							borderWidth: 2, */ //加上棱角分明
  197. 							color: colorArr1[2]
  198. 						},
  199. 					},
  200. 					tooltip: {
  201. 						show: false,
  202. 					},
  203. 				}, {
  204. 					z: 1,
  205. 					type: 'bar',
  206. 					name: '柱子2',
  207. 					itemStyle: {
  208. 						borderRadius: [0, 0, 0, 0],
  209. 						color: color2
  210. 					},
  211. 					data: controlBall
  212. 				},
  213. 				{
  214. 					z: 2,
  215. 					name: '柱子2',
  216. 					type: "pictorialBar",
  217. 					data: constData2,
  218. 					symbol: "diamond",
  219. 					symbolOffset: ["58%", "50%"],
  220. 					symbolSize: [25, 10], //=========================
  221. 					itemStyle: {
  222. 						normal: {
  223. 							color: color2
  224. 						},
  225. 					},
  226. 					tooltip: {
  227. 						show: false,
  228. 					},
  229. 				},
  230. 				{
  231. 					z: 3,
  232. 					name: '柱子2',
  233. 					type: "pictorialBar",
  234. 					symbolPosition: "end",
  235. 					data: showData2,
  236. 					symbol: "diamond",
  237. 					symbolOffset: ["58%", "-50%"],
  238. 					symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
  239. 					itemStyle: {
  240. 						normal: {
  241. 						/* 	borderColor: colorArr2[2],
  242. 							borderWidth: 2, */
  243. 							color: colorArr2[2]
  244. 						},
  245. 					},
  246. 					tooltip: {
  247. 						show: false,
  248. 					},
  249. 				}
  250. 			]
  251. 		}
  252. 		let chart1 = echarts.init(document.querySelector("#litiBar1"))
  253. 		chart1.setOption(option)
  254. 	
  255. 	</script>
  256. 	
  257.  
  258. </html>

 2.3D饼图

3D饼图没有标签，实现方式是将2d饼图，旋转一定角度覆盖于3D表面，如果有好的方法，欢迎评论区留下链接

注意：需要引入与echarts版本对应的echarts-gl

效果图如下：

完整代码实例：（根据需要自行调整）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Ehcarts Demo</title>
  9.     <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  10.     <script src="https://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>
  11. </head>
  12.  
  13. <body>
  14.     <div class="container">
  15.         <div id="chartsContent" style="width:560px;height:150px;"></div>
  16.     </div>
  17.     <script>
  18.         var myChart = echarts.init(document.getElementById('chartsContent'));
  19.         // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  20.         function getParametricEquation(startRatio, endRatio, isSelected, isHovered) {
  21.             // 计算
  22.             let midRatio = (startRatio + endRatio) / 2;
  23.  
  24.             let startRadian = startRatio * Math.PI * 2;
  25.             let endRadian = endRatio * Math.PI * 2;
  26.             let midRadian = midRatio * Math.PI * 2;
  27.  
  28.             // 如果只有一个扇形，则不实现选中效果。
  29.             if (startRatio === 0 && endRatio === 1) {
  30.                 isSelected = false;
  31.             }
  32.  
  33.             // 计算选中效果分别在 x 轴、y 轴方向上的位移（位移均为 0）
  34.             let offsetX = 0;
  35.             let offsetY = 0;
  36.             // 计算选中效果在 z 轴方向上的位移（未选中，位移均为 0）
  37.             let offsetZ = isSelected ? 0.25 : 0;
  38.             // 计算高亮效果的放大比例（未高亮，则比例为 1）
  39.             let hoverRate = isHovered ? 1.05 : 1;
  40.  
  41.             let tmp = 0;
  42.  
  43.             // 返回曲面参数方程
  44.             return {
  45.                 u: {
  46.                     min: 0,
  47.                     max: Math.PI * 2,
  48.                     step: Math.PI / 100,
  49.                 },
  50.  
  51.                 v: {
  52.                     min: 0,
  53.                     max: Math.PI,
  54.                     step: Math.PI / 50,
  55.                 },
  56.  
  57.                 x: function (u, v) {
  58.                     if (midRatio - 0.5 < 0) {
  59.                         if (u < startRadian || u > midRadian + Math.PI) {
  60.                             tmp =
  61.                                 u - Math.PI - midRadian < 0
  62.                                     ? u + Math.PI - midRadian
  63.                                     : u - Math.PI - midRadian;
  64.                             return (
  65.                                 offsetX +
  66.                                 ((Math.sin(startRadian) * tmp) /
  67.                                     (Math.PI - midRadian + startRadian)) *
  68.                                 hoverRate
  69.                             );
  70.                         }
  71.                         if (u > endRadian && u < midRadian + Math.PI) {
  72.                             tmp = midRadian + Math.PI - u;
  73.                             return (
  74.                                 offsetX +
  75.                                 ((Math.sin(endRadian) * tmp) /
  76.                                     (Math.PI - midRadian + startRadian)) *
  77.                                 hoverRate
  78.                             );
  79.                         }
  80.                     } else {
  81.                         if (u < startRadian && u > midRadian - Math.PI) {
  82.                             tmp = u + Math.PI - midRadian;
  83.                             return (
  84.                                 offsetX +
  85.                                 ((Math.sin(startRadian) * tmp) /
  86.                                     (Math.PI - midRadian + startRadian)) *
  87.                                 hoverRate
  88.                             );
  89.                         }
  90.                         if (u > endRadian || u < midRadian - Math.PI) {
  91.                             tmp =
  92.                                 midRadian - Math.PI - u < 0
  93.                                     ? midRadian + Math.PI - u
  94.                                     : midRadian - Math.PI - u;
  95.                             return (
  96.                                 offsetX +
  97.                                 ((Math.sin(endRadian) * tmp) /
  98.                                     (Math.PI - midRadian + startRadian)) *
  99.                                 hoverRate
  100.                             );
  101.                         }
  102.                     }
  103.                     return offsetX + Math.sin(v) * Math.sin(u) * hoverRate;
  104.                 },
  105.  
  106.                 y: function (u, v) {
  107.                     if (midRatio - 0.5 < 0) {
  108.                         if (u < startRadian || u > midRadian + Math.PI) {
  109.                             tmp =
  110.                                 u - Math.PI - midRadian < 0
  111.                                     ? u + Math.PI - midRadian
  112.                                     : u - Math.PI - midRadian;
  113.                             return (
  114.                                 offsetY +
  115.                                 ((Math.cos(startRadian) * tmp) /
  116.                                     (Math.PI - midRadian + startRadian)) *
  117.                                 hoverRate
  118.                             );
  119.                         }
  120.                         if (u > endRadian && u < midRadian + Math.PI) {
  121.                             tmp = midRadian + Math.PI - u;
  122.                             return (
  123.                                 offsetY +
  124.                                 ((Math.cos(endRadian) * tmp) /
  125.                                     (Math.PI - midRadian + startRadian)) *
  126.                                 hoverRate
  127.                             );
  128.                         }
  129.                     } else {
  130.                         if (u < startRadian && u > midRadian - Math.PI) {
  131.                             tmp = u + Math.PI - midRadian;
  132.                             return (
  133.                                 offsetY +
  134.                                 ((Math.cos(startRadian) * tmp) /
  135.                                     (Math.PI - midRadian + startRadian)) *
  136.                                 hoverRate
  137.                             );
  138.                         }
  139.                         if (u > endRadian || u < midRadian - Math.PI) {
  140.                             tmp =
  141.                                 midRadian - Math.PI - u < 0
  142.                                     ? midRadian + Math.PI - u
  143.                                     : midRadian - Math.PI - u;
  144.                             return (
  145.                                 offsetY +
  146.                                 ((Math.cos(endRadian) * tmp) /
  147.                                     (Math.PI - midRadian + startRadian)) *
  148.                                 hoverRate
  149.                             );
  150.                         }
  151.                     }
  152.                     return offsetY + Math.sin(v) * Math.cos(u) * hoverRate;
  153.                 },
  154.  
  155.                 z: function (u, v) {
  156.                     return offsetZ + (Math.cos(v) > 0 ? 0.1 : -0.1);
  157.                 },
  158.             };
  159.         }
  160.         // 生成模拟 3D 饼图的配置项
  161.         function getPie3D(pieData) {
  162.             let series = [];
  163.             let sumValue = 0;
  164.             let startValue = 0;
  165.             let endValue = 0;
  166.             let legendData = [];
  167.             // 为每一个饼图数据，生成一个 series-surface 配置
  168.             for (let i = 0; i < pieData.length; i++) {
  169.                 sumValue += pieData[i].value;
  170.                 let seriesItem = {
  171.                     name:
  172.                         typeof pieData[i].name === "undefined"
  173.                             ? `series${i}`
  174.                             : pieData[i].name,
  175.                     type: "surface",
  176.                     parametric: true,
  177.                     wireframe: {
  178.                         show: false,
  179.                     },
  180.                     pieData: pieData[i],
  181.                     pieStatus: {
  182.                         selected: false,
  183.                         hovered: false,
  184.                     },
  185.                 };
  186.  
  187.                 if (typeof pieData[i].itemStyle != "undefined") {
  188.                     let itemStyle = {};
  189.                     if (typeof pieData[i].itemStyle.color != "undefined") {
  190.                         itemStyle.color = pieData[i].itemStyle.color;
  191.                     }
  192.                     if (typeof pieData[i].itemStyle.opacity != "undefined") {
  193.                         itemStyle.opacity = pieData[i].itemStyle.opacity;
  194.                     }
  195.                     seriesItem.itemStyle = itemStyle;
  196.                 }
  197.                 series.push(seriesItem);
  198.             }
  199.             // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  200.             // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  201.             for (let i = 0; i < series.length; i++) {
  202.                 endValue = startValue + series[i].pieData.value;
  203.                 series[i].pieData.startRatio = startValue / sumValue;
  204.                 series[i].pieData.endRatio = endValue / sumValue;
  205.                 series[i].parametricEquation = getParametricEquation(
  206.                     series[i].pieData.startRatio,
  207.                     series[i].pieData.endRatio,
  208.                     false,
  209.                     false
  210.                 );
  211.                 startValue = endValue;
  212.                 legendData.push(series[i].name);
  213.             }
  214.             // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  215.             series.push({
  216.                 name: "mouseoutSeries",
  217.                 type: "surface",
  218.                 parametric: true,
  219.                 wireframe: {
  220.                     show: false,
  221.                 },
  222.                 itemStyle: {
  223.                     opacity: 0,
  224.                 },
  225.                 parametricEquation: {
  226.                     u: {
  227.                         min: 0,
  228.                         max: Math.PI * 2,
  229.                         step: Math.PI / 20,
  230.                     },
  231.                     v: {
  232.                         min: 0,
  233.                         max: Math.PI,
  234.                         step: Math.PI / 20,
  235.                     },
  236.                     x: function (u, v) {
  237.                         return Math.sin(v) * Math.sin(u) + Math.sin(u);
  238.                     },
  239.                     y: function (u, v) {
  240.                         return Math.sin(v) * Math.cos(u) + Math.cos(u);
  241.                     },
  242.                     z: function (u, v) {
  243.                         return Math.cos(v) > 0 ? 0.1 : -0.1;
  244.                     },
  245.                 },
  246.             });
  247.             // 准备待返回的配置项，把准备好的 legendData、series 传入。
  248.             let option = {
  249.                 legend: {
  250.                     show: false,
  251.                     data: legendData,
  252.                 },
  253.                 xAxis3D: {
  254.                     min: -1,
  255.                     max: 1,
  256.                 },
  257.                 yAxis3D: {
  258.                     min: -1,
  259.                     max: 1,
  260.                 },
  261.                 zAxis3D: {
  262.                     min: -1,
  263.                     max: 1,
  264.                 },
  265.                 grid3D: {
  266.                     show: false,
  267.                     boxHeight: 200, // 厚度
  268.                     top: 4,
  269.                     left: 0,
  270.                     boxWidth: 244,
  271.                     viewControl: {
  272.                         //3d效果可以放大、旋转等，请自己去查看官方配置
  273.                         alpha: 45, // 角度
  274.                         beta: 0, // 饼块开始位置角度
  275.                         rotateSensitivity: 0,
  276.                         zoomSensitivity: 0,
  277.                         panSensitivity: 0,
  278.                         autoRotate: false,
  279.                     },
  280.                     light: {
  281.                         main: {
  282.                             color: "rgb(85, 84, 84)", // 主光源的颜色。
  283.                             shadow: true, // 主光源是否投射阴影
  284.                             alpha: 80, // 主光源绕 x 轴，即上下旋转的角度
  285.                         },
  286.                     },
  287.                 },
  288.                 series: series,
  289.             };
  290.             return option;
  291.         }
  292.  
  293.         // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
  294.         let selectedIndex = '';
  295.         let hoveredIndex = '';
  296.  
  297.         // 监听点击事件，实现选中效果（单选）
  298.         myChart.on('click', function (params) {
  299.             // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
  300.             let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
  301.             let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
  302.             let startRatio = option.series[params.seriesIndex].pieData.startRatio;
  303.             let endRatio = option.series[params.seriesIndex].pieData.endRatio;
  304.  
  305.             // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
  306.             if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
  307.                 option.series[selectedIndex].parametricEquation = getParametricEquation(option.series[selectedIndex].pieData.startRatio, option.series[selectedIndex].pieData.endRatio, false, false);
  308.                 option.series[selectedIndex].pieStatus.selected = false;
  309.             }
  310.  
  311.             // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
  312.             option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered);
  313.             option.series[params.seriesIndex].pieStatus.selected = isSelected;
  314.  
  315.             // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
  316.             isSelected ? selectedIndex = params.seriesIndex : null;
  317.  
  318.             console.log('option-click: ', option)
  319.             // 使用更新后的 option，渲染图表
  320.             myChart.setOption(option);
  321.         });
  322.  
  323.         // 监听 mouseover，近似实现高亮（放大）效果
  324. 		
  325.         myChart.on('mouseover', function (params) {
  326.  
  327.             // 准备重新渲染扇形所需的参数
  328.             let isSelected;
  329.             let isHovered;
  330.             let startRatio;
  331.             let endRatio;
  332.  
  333.             // 如果触发 mouseover 的扇形当前已高亮，则不做操作
  334.             if (hoveredIndex === params.seriesIndex) {
  335.                 return;
  336.                 // 否则进行高亮及必要的取消高亮操作
  337.             } else {
  338.                 // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
  339.                 if (hoveredIndex !== '') {
  340.                     // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
  341.                     isSelected = option.series[hoveredIndex].pieStatus.selected;
  342.                     isHovered = false;
  343.                     startRatio = option.series[hoveredIndex].pieData.startRatio;
  344.                     endRatio = option.series[hoveredIndex].pieData.endRatio;
  345.  
  346.                     // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  347.                     option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered);
  348.                     option.series[hoveredIndex].pieStatus.hovered = isHovered;
  349.  
  350.                     // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  351.                     hoveredIndex = '';
  352.                 }
  353.  
  354.                 // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
  355.                 if (params.seriesName !== 'mouseoutSeries') {
  356.                     // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  357.                     isSelected = option.series[params.seriesIndex].pieStatus.selected;
  358.                     isHovered = true;
  359.                     startRatio = option.series[params.seriesIndex].pieData.startRatio;
  360.                     endRatio = option.series[params.seriesIndex].pieData.endRatio;
  361.  
  362.                     // 对当前点击的扇形，执行高亮操作（对 option 更新）
  363.                     option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered);
  364.                     option.series[params.seriesIndex].pieStatus.hovered = isHovered;
  365.  
  366.                     // 记录上次高亮的扇形对应的系列号 seriesIndex
  367.                     hoveredIndex = params.seriesIndex;
  368.                 }
  369.                 // 使用更新后的 option，渲染图表
  370.                 myChart.setOption(option);
  371.             }
  372.         });
  373.  
  374.         // 修正取消高亮失败的 bug
  375.         myChart.on('globalout', function () {
  376.  
  377.  
  378.             if (hoveredIndex !== '') {
  379.                 // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  380.                 isSelected = option.series[hoveredIndex].pieStatus.selected;
  381.                 isHovered = false;
  382.                 startRatio = option.series[hoveredIndex].pieData.startRatio;
  383.                 endRatio = option.series[hoveredIndex].pieData.endRatio;
  384.  
  385.                 // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  386.                 option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered);
  387.                 option.series[hoveredIndex].pieStatus.hovered = isHovered;
  388.  
  389.                 // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  390.                 hoveredIndex = '';
  391.             }
  392.  
  393.             // 使用更新后的 option，渲染图表
  394.             myChart.setOption(option);
  395.         });
  396.  
  397.         const colorList = ['#D98053', '#E2B062', '#5A9CF1', '#6ED3D3']
  398.         const dataSource = [{
  399.             name: "啤酒",
  400.             value: 25,
  401.         },
  402.         {
  403.             name: "高粱酒",
  404.             value: 25,
  405.         },
  406.         {
  407.             name: "桃花酿",
  408.             value: 30,
  409.         },
  410.         {
  411.             name: "白酒",
  412.             value: 20,
  413.         }]
  414.         const paramsList = dataSource.map((item, index) => {
  415.             return {
  416.                 ...item,
  417.                 shading: 'realistic',
  418.                 itemStyle: {
  419.                     color: colorList[index]
  420.                 },
  421.             }
  422.         })
  423.         // 传入数据生成 option
  424.         let option = getPie3D(paramsList);
  425.  
  426.         // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  427.         option.series.push({
  428.             name: '酒水销售占比', //自己根据场景修改
  429.             type: 'pie',
  430.             hoverAnimation: false,// 悬停不放大
  431.             label: {
  432.                 // position: "bottom",
  433.                 formatter: function (params) {
  434.                     return `{percentSty|${params.percent}%}\n{nameSty|${params.name}}`;
  435.                 },
  436.                 rich: {
  437.                     nameSty: {
  438.                         fontSize: 16,
  439.                         lineHeight: 22,
  440.                         fontFamily: "PingFangSC-Regular",
  441.                         fintWeight: 400,
  442.                     },
  443.                     percentSty: {
  444.                         fontSize: 14,
  445.                         lineHeight: 20,
  446.                         fontFamily: "PingFangSC-Regular",
  447.                         fintWeight: 400,
  448.                         color: '#FFFFFF',
  449.                     },
  450.                     countSty: {
  451.                         fontSize: 14,
  452.                         lineHeight: 20,
  453.                         fontFamily: "PingFangSC-Regular",
  454.                         fintWeight: 400,
  455.                         color: '#B9D3ED',
  456.                         padding: [0, 8, 0, 8],
  457.                         backgroundColor: 'rgb(90,156,241,0.3)',
  458.                         borderRadius: 2,
  459.                     },
  460.                 },
  461.             },
  462.             labelLine: {
  463.                 showAbove: false,
  464.                 length: 20, // 视觉引导线第一段的长度
  465.                 length2: 40, // 视觉引导项第二段的长度
  466.                 lineStyle: {
  467.                     color: "#686868", // 改变标示线的颜色
  468.                     width: 1,
  469.                     type: 'solid', // 线的类型
  470.                 },
  471.             },
  472.             startAngle: 60, // 起始角度，支持范围[0, 360]。
  473.             clockwise: true, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
  474.           /*  radius: ['40%', '52%'],
  475.             center: ['50%', '53%'], */
  476.             data: paramsList,
  477.             itemStyle: {
  478.                 opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
  479.             }
  480.         })
  481.         console.log('demo配置参数',option);
  482. 		myChart.setOption(option)
  483.     </script>
  484.     <style>
  485.         .container {
  486.             width: 560px;
  487.             height: 164px;
  488.             background-color: #000000;
  489.             position: relative;
  490.         }
  491.  
  492.         .imgContent {
  493.             width: 164px;
  494.             height: 86px;
  495.             position: absolute;
  496.             left: 50%;
  497.             top: 50%;
  498.             transform: translate(-50%, -50%);
  499.             z-index: 5;
  500.         }
  501.     </style>
  502. </body>
  503.  
  504. </html>

更多参数配置，前往echarts官网查询，传送门

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

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

  

闽ICP备14008679号