echart 3D柱状图

最新推荐文章于 2024-05-12 17:24:39 发布

console.log( )

最新推荐文章于 2024-05-12 17:24:39 发布

阅读量2.4k

点赞数 2

分类专栏： # echarts 文章标签： echarts

本文链接：https://blog.csdn.net/KingJordon/article/details/103906947

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

3d柱状图展示数据，下图1为初始加载，可拖动转换方向，如图2

在官方例子上去掉了坐标轴、网格线、指示线

首先看一下官网的例子

我们所需要做的就是，去掉多余的线，以y轴为例

 yAxis3D: {
	                name: 'y',
					show: false,
					axisLine: {
						show: true,   //直接设置不可见会有bug
						lineStyle: {
							color: 'rgba(0,0,0,0)'   //我将y轴设置为透明
						}
					},
					splitLine:{show: false},
	                type: 'category',
	                data: days
	            },

完整代码，开头记得引入所需要的包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>投票统计</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="echarts.min.js" type="text/javascript"></script>
		<script src="echarts-gl.js"></script>
		<style type="text/css">
				#biao{
					width: 60vw;
					height: 60vh;
				}
				body,html{
					width: 100vw;
					height: 100vh;
					margin: 0;
				}
				#main{
					width: 100vw;
					height: 100vh;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="biao"></div>
		</div>
	</body>
	<script type="text/javascript">
	        // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('main'));
	        var xData = ['', '', '', '', '']; //x轴数据
	        var days = ['']; //z轴数据
	        var data = [
	            [0, 0, 0],
	            [0, 1, 0],
	            [0, 2, 0],
	            [0, 3, 0],
	            [0, 4, 0],
	        ];              //y轴数据
	        var option = {
	            tooltip: {
					show:false,
					 trigger: 'axis',
					 axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						 type: 'shadow'        // 默认为直线，可选为：'line' |                 
                         'shadow'
					 }
				},
	            visualMap: {
	                show: false,
	                max: 15,
	                inRange: {
	                    color: ['#f9ef4d']
	                }
	            },
	            xAxis3D: {
	                name: 'x',
					show: false,
					axisLine: {
						show: true,
						lineStyle: {
							color: 'rgba(0,0,0,0)'
						}
					},
					axisTick:{       //刻度线
					  show:false
					},
					axisLabel: {
						textStyle: {
							color: '#f9ef4d',
							fontSize: 30
						},
						interval: 0,  
						//x轴文字换行
						formatter: function(params) {
							var newParamsName = ""; // 最终拼接成的字符串
							var paramsNameNumber = params.length; // 实际标签的个数
							var provideNumber = 6; // 每行能显示的字的个数
							var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
							if (paramsNameNumber > provideNumber) {
								for (var p = 0; p < rowNumber; p++) {
									var tempStr = ""; // 表示每一次截取的字符串
									var start = p * provideNumber; // 开始截取的位置
									var end = start + provideNumber; // 结束截取的位置
									if (p == rowNumber - 1) {
										tempStr = params.substring(start, paramsNameNumber);
									} else {
										tempStr = params.substring(start, end) + "\n";
									}
									newParamsName += tempStr; // 最终拼成的字符串
								}
							} else {
								// 将旧标签的值赋给新标签
								newParamsName = params;
							}
							//将最终的字符串返回
							return newParamsName
						}
					},
					splitLine:{show: false},
	                nameGap: 1,
	                type: 'category',
	                data: xData
	            },
	            yAxis3D: {
	                name: 'y',
					show: false,
					axisLine: {
						show: true,
						lineStyle: {
							color: 'rgba(0,0,0,0)' //直接设置不显示出现bug，我就设置为透明
						}
					},
					splitLine:{show: false},
	                type: 'category',
	                data: days
	            },
	            zAxis3D: {
	                name: '',
	
					axisLine: {
						show: true,
						lineStyle: {
							color: 'rgba(0,0,0,0)'
						}
					},
					splitLine:{show: false},
	                type: 'value'
	            },
	            grid3D: {
					axisPointer:{
						show:false
					},
	                boxWidth: 200,
	                boxDepth: 20,
	                light: {
	                    main: {
	                        intensity: 1.2,
	                        shadow: true
	                    },
	                    ambient: {
	                        intensity: 0.3
	                    }
	                },
	                viewControl: {
	                    alpha: 0,
	                    beta: 0,
	                }
	            },
	            series: [{
	                type: 'bar3D',
					name:'投票数',
	                data: data.map(function(item) {
	                    return {
	                        value: [item[1], item[0], item[2]],
	                    }
	                }),
					label: {
						show: true,
						position: 'top',
						textStyle: { //数值样式
							color: '#FFE66F',
							fontSize: 42,
							backgroundColor:'rgba(0,0,0,0)'
						}
					},
	                shading: 'lambert',
					//鼠标经过
	                emphasis: {
	                    label: {
	                        textStyle: {
	                            fontSize: 50,
	                        }
	                    },
	                },
					
	            }]
	        }
			window.onresize = function(){
				myChart.resize();
			}
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option); 
            //后台获取数据
			function main(){
				$.ajax({
				   url: '',
				   type: 'post',
				   data:JSON.stringify({}),
				   dataType:'json',
				   contentType: 'application/json',
				   async:true,
				   success:function(data){
						var data1=[]
						var data2=[]
						for(var i=0;i<data.list.length;i++){
						   data1[i]=[0,i,data.list[i].headCount]
						   data2[i]=data.list[i].name
						}
						myChart.setOption({
							xAxis3D: {
								data: data2
							},
							series: [{
								// 根据名字对应到相应的系列
								name: '投票数',
								data: data1.map(function(item) {
									return {
										value: [item[1], item[0], item[2]],
									}
								}),
							}]
						});
				   }
				   
				});
			
			}
			main()
			
	    </script>

</html>

console.log( )

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
echart 3D柱状图

3d柱状图展示数据，下图1为初始加载，可拖动转换方向，如图2在官方例子上去掉了坐标轴、网格线、指示线首先看一下官网的例子我们所需要做的就是，去掉多余的线，以y轴为例 yAxis3D: { name: 'y', show: false, axisLine: { show: true, //...
复制链接

扫一扫