首页 前端知识 echarts制作3D锥形金字塔

echarts制作3D锥形金字塔

2024-05-29 10:05:58 前端知识 前端哥 931 888 我要收藏

工作中遇到了这样的问题,需要绘制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>

 运行结果如图所示:

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9932.html
标签
大数据
评论
会员中心 联系我 留言建议 回顶部
复制成功!