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

echarts环形3D立体图_echarts 立体环形图

作者：weixin_40725706 | 2024-05-17 07:39:50

赞

踩

echarts 立体环形图

 "echarts": "^5.2.0",    "echarts-gl": "^2.0.8",vue2.6

  1. <template>
  2. 	<div :class="className" :style="{height:height,width:width}" id="myChart4" />
  3.  
  4. </template>
  5.  
  6. <script>
  7. 	import * as echarts from 'echarts';
  8. 	import 'echarts-gl';
  9. 	
  10. 	export default {
  11. 		props: {
  12. 			className: {
  13. 				type: String,
  14. 				default: 'chart'
  15. 			},
  16. 			width: {
  17. 				type: String,
  18. 				default: '100%'
  19. 			},
  20. 			height: {
  21. 				type: String,
  22. 				default: '28vh'
  23. 			},
  24. 			chartData: {
  25. 				type: Array,
  26. 				required: true
  27. 			}
  28. 		},
  29. 		data() {
  30. 			return {
  31. 				timer: 0,
  32. 				optionData: [{
  33. 						value: 26,
  34. 						name: '综合',
  35. 						itemStyle: { //颜色 紫色
  36. 							color: '#139CFF'
  37. 						}
  38. 					},
  39. 					{
  40. 						value: 18,
  41. 						name: '老年人',
  42. 						itemStyle: { //颜色 紫色
  43. 							color: '#1BFEFF'
  44. 						}
  45. 					},
  46. 					{
  47. 						value: 10,
  48. 						name: '中青年',
  49. 						itemStyle: { //颜色 紫色
  50. 							color: '#1BD0FD'
  51. 						}
  52. 					},
  53. 					{
  54. 						value: 9,
  55. 						name: '儿童',
  56. 						itemStyle: { //颜色 紫色
  57. 							color: '#28C648'
  58. 						}
  59. 					},
  60. 					{
  61. 						value: 12,
  62. 						name: '妇女',
  63. 						itemStyle: { //颜色 紫色
  64. 							color: '#6DEBDF'
  65. 						}
  66. 					},
  67. 					{
  68. 						value: 18,
  69. 						name: '特殊群体',
  70. 						itemStyle: { //颜色 紫色
  71. 							color: '#B177F0'
  72. 						}
  73. 					},
  74. 					{
  75. 						value: 14,
  76. 						name: '志愿者',
  77. 						itemStyle: { //颜色 紫色
  78. 							color: '#FFCC83'
  79. 						}
  80. 					},
  81. 					{
  82. 						value: 11,
  83. 						name: '其他',
  84. 						itemStyle: { //颜色 紫色
  85. 							color: '#23D2FE'
  86. 						}
  87. 					}
  88. 				],
  89.  
  90. 			}
  91. 		},
  92. 		watch: {
  93. 			chartData: {
  94. 				deep: true,
  95. 				handler(val) {
  96. 					this.setOption(val)
  97. 				}
  98. 			}
  99. 		},
  100. 		mounted() {
  101. 			this.initChart();
  102. 		},
  103. 		beforeDestroy() {
  104. 			
  105. 		},
  106. 		methods: {
  107. 			initChart() {
  108. 				//构建3d饼状图
  109. 				let myChart = echarts.init(document.getElementById('myChart4'));
  110. 				// 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
  111. 				this.option = this.getPie3D(this.optionData, 0.85);
  112. 				//将配置项设置进去
  113. 				myChart.setOption(this.option);
  114. 				//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  115. 				 //                    this.option.series.push({
  116. 				 //                        name: 'pie2d',
  117. 				 //                        type: 'pie',
  118. 				 //                        startAngle: -20, //起始角度，支持范围[0, 360]。
  119. 				 //                        clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
  120. 				 //                        radius: ['20%', '50%'],
  121. 				 //                        center: ['40%', '50%'],
  122. 				 //                        data: this.optionData,
  123. 				 //                        itemStyle: {
  124. 				 //                            opacity: 0
  125. 				 //                        }
  126. 				 //                    });
  127. 				 // myChart.setOption(this.option);
  128. 				//鼠标移动上去特效效果
  129. 				this.bindListen(myChart);
  130.  
  131. 			},
  132. 			//配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
  133. 			getPie3D(pieData, internalDiameterRatio) {
  134. 				let that = this;
  135. 				let series = [];
  136. 				let sumValue = 0;
  137. 				let startValue = 0;
  138. 				let endValue = 0;
  139. 				let legendData = [];
  140. 				let legendBfb = [];
  141. 				let k = 1 - internalDiameterRatio;
  142. 				pieData.sort((a, b) => {
  143. 					return (b.value - a.value);
  144. 				});
  145. 				// 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
  146. 				for (let i = 0; i < pieData.length; i++) {
  147. 					sumValue += pieData[i].value;
  148. 					let seriesItem = {
  149. 						//系统名称
  150. 						name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
  151. 						type: 'surface',
  152. 						//是否为参数曲面（是）
  153. 						parametric: true,
  154. 						//曲面图网格线（否）上面一根一根的
  155. 						wireframe: {
  156. 							show: false
  157. 						},
  158. 						pieData: pieData[i],
  159. 						pieStatus: {
  160. 							selected: false,
  161. 							hovered: false,
  162. 							k: k
  163. 						},
  164. 						// x: 'left', //没用
  165. 						//设置饼图在容器中的位置(目前没发现啥用)//第一个调整左右，第二个调整上下
  166. 						//   center: ['50%', '100%']
  167. 					};
  168.  
  169. 					//曲面的颜色、不透明度等样式。
  170. 					if (typeof pieData[i].itemStyle != 'undefined') {
  171. 						let itemStyle = {};
  172. 						typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color :
  173. 							null;
  174. 						typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle
  175. 							.opacity : null;
  176. 						seriesItem.itemStyle = itemStyle;
  177. 					}
  178. 					series.push(seriesItem);
  179. 				}
  180.  
  181. 				// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  182. 				// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  183. 				legendData = [];
  184. 				legendBfb = [];
  185. 				for (let i = 0; i < series.length; i++) {
  186. 					endValue = startValue + series[i].pieData.value;
  187. 					series[i].pieData.startRatio = startValue / sumValue;
  188. 					series[i].pieData.endRatio = endValue / sumValue;
  189. 					series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i]
  190. 						.pieData.endRatio,
  191. 						false, false, k, series[i].pieData.value);
  192. 					startValue = endValue;
  193. 					let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
  194. 					legendData.push({
  195. 						name: series[i].name,
  196. 						value: bfb
  197. 					});
  198. 					legendBfb.push({
  199. 						name: series[i].name,
  200. 						value: bfb
  201. 					});
  202. 				}
  203. 				//(第二个参数可以设置你这个环形的高低程度)
  204. 				let boxHeight = this.getHeight3D(series, 12); //通过传参设定3d饼/环的高度
  205. 				// 准备待返回的配置项，把准备好的 legendData、series 传入。
  206. 				let option = {
  207. 					// radius: '100%',
  208. 					//图例组件
  209. 					legend: {
  210. 						data: legendData,
  211. 						//图例列表的布局朝向。
  212. 						// orient: 'horizontal',
  213. 						// right: 0,
  214. 						itemHeight: 10,//小图标大小
  215. 						itemWidth: 10,
  216. 						// width: 100, //图例的宽度，想要对齐这个必须要有
  217. 						// itemGap: 18, //各组的间距
  218. 						// left: 10,
  219. 						top: 130,
  220. 						// bottom:25,
  221. 						//图例文字每项之间的间隔
  222. 						itemGap: 8,
  223. 						textStyle: {
  224. 							color: '#A1E2FF',
  225. 						},
  226. 						show: true,
  227. 						// icon: "circle",
  228. 						//格式化图例文本（我是数值什么显示什么）
  229. 						formatter: function(name) {
  230. 							var target;
  231. 							for (var i = 0, l = pieData.length; i < l; i++) {
  232. 								if (pieData[i].name == name) {
  233. 									target = pieData[i].value;
  234. 								}
  235. 							}
  236. 							return `${name}: ${target} %`;
  237. 						}
  238. 					
  239. 					},
  240. 					//移动上去提示的文本内容
  241. 					tooltip: {
  242. 						formatter: params => {
  243. 							if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
  244. 								let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[
  245. 										params.seriesIndex].pieData.startRatio) *
  246. 									100).toFixed(0);
  247. 								return `${params.seriesName}<br/>` +
  248. 									`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
  249. 									`${ bfb }%`;
  250. 							}
  251. 						}
  252. 					},
  253. 					//这个可以变形
  254. 					xAxis3D: {
  255. 						min: -1,
  256. 						max: 1
  257. 					},
  258. 					yAxis3D: {
  259. 						min: -1,
  260. 						max: 1
  261. 					},
  262. 					zAxis3D: {
  263. 						min: -1,
  264. 						max: 1
  265. 					},
  266. 					//此处是修改样式的重点
  267. 					grid3D: {
  268. 						show: false,
  269. 						boxHeight: boxHeight, //圆环的高度
  270. 						//这是饼图的位置
  271. 						// top: '-20.5%',
  272. 						// left: '-15%',
  273. 						top: '-30%',
  274. 						left: '0',
  275. 						viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
  276. 							alpha: 40, //角度(这个很重要 调节角度的)
  277. 							// alpha: 30, //角度(这个很重要 调节角度的)
  278. 							distance: 200, //调整视角到主体的距离，类似调整zoom(这是整体大小)
  279. 							rotateSensitivity: 0, //设置为0无法旋转
  280. 							zoomSensitivity: 0, //设置为0无法缩放
  281. 							panSensitivity: 0, //设置为0无法平移
  282. 							autoRotate: false, //自动旋转
  283. 							
  284. 						}
  285. 					},
  286. 					series: series
  287. 				};
  288. 				return option;
  289. 			},
  290.  
  291. 			//获取3d丙图的最高扇区的高度
  292. 			getHeight3D(series, height) {
  293. 				series.sort((a, b) => {
  294. 					return (b.pieData.value - a.pieData.value);
  295. 				})
  296. 				return height * 25 / series[0].pieData.value;
  297. 			},
  298.  
  299. 			// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  300. 			getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
  301. 				// 计算
  302. 				let midRatio = (startRatio + endRatio) / 2;
  303. 				let startRadian = startRatio * Math.PI * 2;
  304. 				let endRadian = endRatio * Math.PI * 2;
  305. 				let midRadian = midRatio * Math.PI * 2;
  306. 				// 如果只有一个扇形，则不实现选中效果。
  307. 				if (startRatio === 0 && endRatio === 1) {
  308. 					isSelected = false;
  309. 				}
  310. 				// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  311. 				k = typeof k !== 'undefined' ? k : 1 / 3;
  312. 				// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  313. 				let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  314. 				let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  315. 				// 计算高亮效果的放大比例（未高亮，则比例为 1）
  316. 				let hoverRate = isHovered ? 1.05 : 1;
  317. 				// 返回曲面参数方程
  318. 				return {
  319. 					u: {
  320. 						min: -Math.PI,
  321. 						max: Math.PI * 3,
  322. 						step: Math.PI / 32
  323. 					},
  324. 					v: {
  325. 						min: 0,
  326. 						max: Math.PI * 2,
  327. 						step: Math.PI / 20
  328. 					},
  329. 					x: function(u, v) {
  330. 						if (u < startRadian) {
  331. 							return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  332. 						}
  333. 						if (u > endRadian) {
  334. 							return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  335. 						}
  336. 						return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  337. 					},
  338. 					y: function(u, v) {
  339. 						if (u < startRadian) {
  340. 							return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  341. 						}
  342. 						if (u > endRadian) {
  343. 							return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  344. 						}
  345. 						return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  346. 					},
  347. 					z: function(u, v) {
  348. 						if (u < -Math.PI * 0.5) {
  349. 							return Math.sin(u);
  350. 						}
  351. 						if (u > Math.PI * 2.5) {
  352. 							return Math.sin(u) * h * .1;
  353. 						}
  354. 						return Math.sin(v) > 0 ? 1 * h * .1 : -1;
  355. 					}
  356. 				};
  357. 			},
  358.  
  359. 			//这是一个自定义计算的方法
  360. 			fomatFloat(num, n) {
  361. 				var f = parseFloat(num);
  362. 				if (isNaN(f)) {
  363. 					return false;
  364. 				}
  365. 				f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
  366. 				var s = f.toString();
  367. 				var rs = s.indexOf('.');
  368. 				//判定如果是整数，增加小数点再补0
  369. 				if (rs < 0) {
  370. 					rs = s.length;
  371. 					s += '.';
  372. 				}
  373. 				while (s.length <= rs + n) {
  374. 					s += '0';
  375. 				}
  376. 				return s;
  377. 			},
  378. 			// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
  379. 			bindListen(myChart) {
  380. 				let that = this;
  381. 				let selectedIndex = '';
  382. 				let hoveredIndex = '';
  383. 				// 监听点击事件，实现选中效果（单选）
  384. 				myChart.on('click', function(params) {
  385. 					// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
  386. 					let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
  387. 					let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
  388. 					let k = that.option.series[params.seriesIndex].pieStatus.k;
  389. 					let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
  390. 					let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
  391. 					// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
  392. 					if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
  393. 						that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that
  394. 							.option.series[
  395. 								selectedIndex].pieData
  396. 							.startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k,
  397. 							that.option.series[
  398. 								selectedIndex].pieData
  399. 							.value);
  400. 						that.option.series[selectedIndex].pieStatus.selected = false;
  401. 					}
  402. 					// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
  403. 					that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
  404. 						startRatio, endRatio,
  405. 						isSelected,
  406. 						isHovered, k, that.option.series[params.seriesIndex].pieData.value);
  407. 					that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
  408. 					// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
  409. 					isSelected ? selectedIndex = params.seriesIndex : null;
  410. 					// 使用更新后的 option，渲染图表
  411. 					myChart.setOption(that.option);
  412. 				});
  413. 				// 监听 mouseover，近似实现高亮（放大）效果
  414. 				myChart.on('mouseover', function(params) {
  415. 					// 准备重新渲染扇形所需的参数
  416. 					let isSelected;
  417. 					let isHovered;
  418. 					let startRatio;
  419. 					let endRatio;
  420. 					let k;
  421. 					// 如果触发 mouseover 的扇形当前已高亮，则不做操作
  422. 					if (hoveredIndex === params.seriesIndex) {
  423. 						return;
  424. 						// 否则进行高亮及必要的取消高亮操作
  425. 					} else {
  426. 						// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
  427. 						if (hoveredIndex !== '') {
  428. 							// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
  429. 							isSelected = that.option.series[hoveredIndex].pieStatus.selected;
  430. 							isHovered = false;
  431. 							startRatio = that.option.series[hoveredIndex].pieData.startRatio;
  432. 							endRatio = that.option.series[hoveredIndex].pieData.endRatio;
  433. 							k = that.option.series[hoveredIndex].pieStatus.k;
  434. 							// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  435. 							that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
  436. 								startRatio, endRatio,
  437. 								isSelected,
  438. 								isHovered, k, that.option.series[hoveredIndex].pieData.value);
  439. 							that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
  440. 							// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  441. 							hoveredIndex = '';
  442. 						}
  443. 						// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
  444. 						if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
  445. 							// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  446. 							isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
  447. 							isHovered = true;
  448. 							startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
  449. 							endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
  450. 							k = that.option.series[params.seriesIndex].pieStatus.k;
  451. 							// 对当前点击的扇形，执行高亮操作（对 option 更新）
  452. 							that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
  453. 								startRatio, endRatio,
  454. 								isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData
  455. 								.value + 5);
  456. 							that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
  457. 							// 记录上次高亮的扇形对应的系列号 seriesIndex
  458. 							hoveredIndex = params.seriesIndex;
  459. 						}
  460. 						// 使用更新后的 option，渲染图表
  461. 						myChart.setOption(that.option);
  462. 					}
  463. 				});
  464. 				// 修正取消高亮失败的 bug
  465. 				myChart.on('globalout', function() {
  466. 					// 准备重新渲染扇形所需的参数
  467. 					let isSelected;
  468. 					let isHovered;
  469. 					let startRatio;
  470. 					let endRatio;
  471. 					let k;
  472. 					if (hoveredIndex !== '') {
  473. 						// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  474. 						isSelected = that.option.series[hoveredIndex].pieStatus.selected;
  475. 						isHovered = false;
  476. 						k = that.option.series[hoveredIndex].pieStatus.k;
  477. 						startRatio = that.option.series[hoveredIndex].pieData.startRatio;
  478. 						endRatio = that.option.series[hoveredIndex].pieData.endRatio;
  479. 						// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  480. 						that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
  481. 							startRatio, endRatio,
  482. 							isSelected,
  483. 							isHovered, k, that.option.series[hoveredIndex].pieData.value);
  484. 						that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
  485. 						// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  486. 						hoveredIndex = '';
  487. 					}
  488. 					// 使用更新后的 option，渲染图表
  489. 					myChart.setOption(that.option);
  490. 				});
  491. 			},
  492. 		},
  493.  
  494.  
  495. 	}
  496. </script>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号