echarts制作3D锥形金字塔

工作中遇到了这样的问题，需要绘制3D金字塔，如图所示：echarts可以做平面的金字塔和漏斗图，但是3D金字塔在官网上并没有看到相关案例。查了相关资料，用象形柱状图来实现

林小白的日常

8765人浏览 · 2022-07-08 09:57:20

林小白的日常 · 2022-07-08 09:57:20 发布

工作中遇到了这样的问题，需要绘制3D金字塔，如图所示：

echarts可以做平面的金字塔和漏斗图，但是3D金字塔在官网上并没有看到相关案例。查了相关资料，用象形柱状图来实现，具体代码如下所示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div id="box" style="width: 500px;height: 400px;background: #000000;"></div>
       <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           funnelFn();

function funnelFn() {

               var loadingFunnel = {
                   title: '',
                   arrDataX: [],
                   arrDataY: [],
               }
               //title标示文字,标示线
               loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {
                   return {
                       text: text,
                       top: top,
                       left: left,
                       textStyle: {
                           color: color,
                           fontStyle: fontStyle,
                           fontFamily: fontFamily,
                           fontSize: fontSize,

                       }
                   }
               };
               loadingFunnel.arrDataX = ['茶叶', '青椒', '大蒜'];
               loadingFunnel.arrDataY = [123, 254, 325];

               // loadingFunnel.arrData = [20, 40, 60];
           var myChart = echarts.init(document.getElementById("box"));
               option = {
                   title: [
                       loadingFunnel.title(loadingFunnel.arrDataX[0], '17%',
                           '62%', '#12e7e8', 'normal', 'sans-serif', '16'),
                       loadingFunnel.title(loadingFunnel.arrDataY[0], '22%', '62%', '#ffffff', 'normal', 'sans-serif',
                           '16'),

                       loadingFunnel.title(loadingFunnel.arrDataX[1], '38%',
                           '62%', '#4dc6ff', 'normal', 'sans-serif', '16'),
                       loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif',
                           '16'),

                       loadingFunnel.title(loadingFunnel.arrDataX[2], '55%',
                           '62%', '#eaad38', 'normal', 'sans-serif', '16'),
                       loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif',
                           '16'),
                   ],
                   tooltip: {
                       show: true,
                       formatter: function(params) {
                           console.log(params)
                           return params.marker + params.name + ':' + params.data.number + '万'
                       }
                   },
                   grid: {
                       // containLabel: true,
                       left: '10%',
                       top: "19%",
                       bottom: "0%",
                   },
                   xAxis: {
                       show: false,
                       data: [
                           '',
                           '',
                           '',
                           ''
                       ],
                       axisTick: {
                           show: false
                       },
                       axisLabel: {
                           color: '#5EA2ED',
                           interval: 0
                       },
                       axisLine: {
                           lineStyle: {
                               color: '#1B5BBA',
                           }
                       }
                   },
                   yAxis: {
                       show: false,
                       splitLine: {
                           show: false
                       },
                       axisLine: {
                           lineStyle: {
                               color: '#1B5BBA',
                           }
                       },
                       axisLabel: {
                           color: '#5EA2ED',
                           interval: 0
                       },
                   },
                   series: [{
                       type: 'pictorialBar',
                       // labelLine:{
                       //    show:true,
                       //    length2:20,
                       //    lineStyle:{
                       //        color:'red',
                       //        width:5
                       //    }

                       // },
                       // label: {
                       // show: true,
                       // position: 'right',
                       // formatter: '{b}{c} 万头',
                       // fontSize: 16,
               // color: '#e54035',
                       //        verticalAlign:'top'
                       // },
                       data: [{
                           name: loadingFunnel.arrDataX[0],
                           // z: 100,
                           value: 20,
                           number: loadingFunnel.arrDataY[0],
                           symbolSize: ['130%', '90%'],
                           symbolPosition: 'center',
                           symbolOffset: ['60%', '-250%'],
                           symbol: 'image://Funnel1.png',
                       }, {
                           name: loadingFunnel.arrDataX[1],
                           // z: 90,
                           value: 40,
                           number: loadingFunnel.arrDataY[1],
                           symbolSize: ['200%', '40%'],
                           symbolPosition: 'center',
                           symbolOffset: ['-22%', '-130%'],
                           symbol: 'image://Funnel2.png',
                       }, {
                           name: loadingFunnel.arrDataX[2],
                           // z: 80,
                           value: 60,
                           number: loadingFunnel.arrDataY[2],
                           symbolSize: ['280%', '35%'],
                           symbolPosition: 'center',
                           symbolOffset: ['-60%', '10%'],
                           symbol: 'image://Funnel3.png',
                       }, ]
                   }]
           };
               myChart.setOption(option);
           }
       </script>
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" style="width: 500px;height: 400px;background: #000000;"></div>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			funnelFn();

			function funnelFn() {

				var loadingFunnel = {
					title: '',
					arrDataX: [],
					arrDataY: [],
				}
				//title标示文字,标示线
				loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {
					return {
						text: text,
						top: top,
						left: left,
						textStyle: {
							color: color,
							fontStyle: fontStyle,
							fontFamily: fontFamily,
							fontSize: fontSize,

						}
					}
				};
				loadingFunnel.arrDataX = ['茶叶', '青椒', '大蒜'];
				loadingFunnel.arrDataY = [123, 254, 325];

				
				// loadingFunnel.arrData = [20, 40, 60];
			 var myChart = echarts.init(document.getElementById("box"));
				option = {
					title: [
						loadingFunnel.title(loadingFunnel.arrDataX[0], '17%',
							'62%', '#12e7e8', 'normal', 'sans-serif', '16'),
						loadingFunnel.title(loadingFunnel.arrDataY[0], '22%', '62%', '#ffffff', 'normal', 'sans-serif',
							'16'),

						loadingFunnel.title(loadingFunnel.arrDataX[1], '38%',
							'62%', '#4dc6ff', 'normal', 'sans-serif', '16'),
						loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif',
							'16'),

						loadingFunnel.title(loadingFunnel.arrDataX[2], '55%',
							'62%', '#eaad38', 'normal', 'sans-serif', '16'),
						loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif',
							'16'),
					],
					tooltip: {
						show: true,
						formatter: function(params) {
							console.log(params)
							return params.marker + params.name + ':' + params.data.number + '万'
						}
					},
					grid: {
						// containLabel: true,
						left: '10%',
						top: "19%",
						bottom: "0%",
					},
					xAxis: {
						show: false,
						data: [
							'',
							'',
							'',
							''
						],
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#5EA2ED',
							interval: 0
						},
						axisLine: {
							lineStyle: {
								color: '#1B5BBA',
							}
						}
					},
					yAxis: {
						show: false,
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#1B5BBA',
							}
						},
						axisLabel: {
							color: '#5EA2ED',
							interval: 0
						},
					},
					series: [{
						type: 'pictorialBar',
						//  labelLine:{
						// 	 show:true,
						// 	 length2:20,
						// 	  lineStyle:{
						// 		  color:'red',
						// 		  width:5
						// 	  }

						//  },
						//  label: {
						//          show: true,
						//          position: 'right',
						//          formatter: '{b}{c} 万头',
						//          fontSize: 16,
			  	//          color: '#e54035',
						// 		 verticalAlign:'top'
						// },
						data: [{
							name: loadingFunnel.arrDataX[0],
							// z: 100,
							value: 20,
							number: loadingFunnel.arrDataY[0],
							symbolSize: ['130%', '90%'],
							symbolPosition: 'center',
							symbolOffset: ['60%', '-250%'],
							symbol: 'image://Funnel1.png',
						}, {
							name: loadingFunnel.arrDataX[1],
							// z: 90,
							value: 40,
							number: loadingFunnel.arrDataY[1],
							symbolSize: ['200%', '40%'],
							symbolPosition: 'center',
							symbolOffset: ['-22%', '-130%'],
							symbol: 'image://Funnel2.png',
						}, {
							name: loadingFunnel.arrDataX[2],
							// z: 80,
							value: 60,
							number: loadingFunnel.arrDataY[2],
							symbolSize: ['280%', '35%'],
							symbolPosition: 'center',
							symbolOffset: ['-60%', '10%'],
							symbol: 'image://Funnel3.png',
						}, ]
					}]
			 };
				myChart.setOption(option);
			}
		</script>
	</body>
</html>

运行结果如图所示：

注意：图片是自己的，三层金字塔，每一层切一张图出来。

这是我找到的做法，如果各位大佬们有更好的写法，欢迎留言评论哦~