echarts制作3D锥形金字塔_代码007(未授权)

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

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

<!DOCTYPE html&g t;
<html&g t;
   <head&g t;
       <meta char set=”utf-8″&g t;
       <title></title>
   </head>
   <body>
       <div id=”box” style=”width: 500px;height: 400px;background: #000000;”></div>
       <script src=”js/echarts.min.js” type=”text/javascript” ch ar set=”utf-8″></script>
       <script type=”text/javascript“>
           funn elFn();

function funn elFn() {

               var loadingFunn el = {
                   title: ”,
                   arrDataX: [],
                   a r rDataY: [],
               }
               //title标示文字,标示线
               loadingFunn el.title = (text, top, left, color, fontStyle, fontFa m ily, fontSize) => {
                   return {
                       text: text,
                       top: top,
                       le ft: le ft,
                       te xtStyle: {
                           color: color,
                           fontStyle: fontStyle,
                           fontFa m ily: fontFa m ily,
                           fontSize: fontSize,

<!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>