【前端】Echarts的scatter3D各个属性具体含义

扣钉

已于 2023-04-28 14:59:37 修改

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： scatter3D

于 2019-05-23 20:53:20 首次发布

本文链接：https://blog.youkuaiyun.com/GJ454221763/article/details/90487809

前端专栏收录该内容

18 篇文章

订阅专栏

博客介绍了实现scatter3D效果的相关内容，包含HTML代码、JS代码及实现效果，还指出需要引入的CSS和JS文件，其中jquery.js、echarts.min.4.2.1.js、echarts - gl.min.js为必引项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<div style="border: 2px solid #000;width: 100%;height: 100%;">
     <div id="main" style="border: 1px solid green;width: 100%;height: 100%;float: left;background: #999;"></div>
</div>

JS代码：

<script type="text/javascript">
	    //Income:Z轴;Life Expectancy:Y轴;Country:X轴
	    //井深:Z轴;Y坐标:Y轴;X坐标:X轴
	    var jsonData=[["井深","Y坐标","人口密度","X坐标","Year"],
	                  [10,14,11,2014],
	                  [11,25,22,2015],
	                  [12,36,33,2016],
	                  [13,47,40,2017]
	                 ];
	    var myChart = echarts.init(document.getElementById('main'));
	    function setOption(datas,x_min,x_max,y_min,y_max,xuanzhuan){
		    var myChart = echarts.init(document.getElementById('main'));
		    option = {
		        grid3D:  {
		        	boxWidth:  60,						//图件宽
		        	boxHeight: 122,						//图件高
		        	boxDepth:  60,						//图件长
		        	height: '100%',						//容器高
		        	width: '100%',						//容器宽
		        	bottom: 'auto',						//3D图与下容器的距离
	        		top:'auto',			   				//3D图与上容器的距离
		        	axisLine:{
		        		lineStyle:{
		        			color:'yellow' 				//坐标轴轴线颜色
		        		}
		        	},
				    splitLine:{
				    	lineStyle:{
		        			color:'#222'  				//分割线颜色
		        		}
					},
					axisPointer:{
						lineStyle:{
		        			color:'#efe' 				//鼠标滑过分割线颜色
		        		}
					},
					environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						  offset: 0, color: '#00aaff' 	// 天空颜色
						}, {
						  offset: 0.7, color: '#998866' // 地面颜色
						}, {
						  offset: 1, color: '#998866' 	// 地面颜色
						}], false),
					postEffect:{
						enable:false					//开启特效
					},
					viewControl:{
						projection: 'perspective',		//默认为透视投影'perspective'，也支持设置为正交投影'orthographic'
						autoRotate: true,				//自动旋转
						autoRotateDirection: 'ccw',     //默认是 'cw' 从上往下看是顺时针 也可以取 'ccw'逆时针
						autoRotateSpeed: 4,				//默认10 自转速度
						autoRotateAfterStill: 5,		//默认3秒 鼠标静止操作后恢复自动旋转的时间间隔
						damping: 0.8,					//鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）
						animation: true,				//是否开启动画
						animationDurationUpdate: 1000,	//过渡动画的时长
						animationEasingUpdate: 'cubicInOut' //过渡动画的缓动效果
					},
					postEffect:{
						enable:false					//是否开启后处理特效，默认关闭 不能开  浏览器会卡
					}
		        },
		        xAxis3D: {
	        		show: true,
	        		name: '南北-X',
	        		nameTextStyle:{
	        			color: 'lime',
		        		fontWeight: 'normal'
	        		},
	        		min:x_min,
	        		max:x_max
		        },
		        yAxis3D: {
		        	show: true,
	        		name: '东西-Y',
	        		nameTextStyle:{
	        			color: 'lime',
	        			fontWeight: 'normal'
	        		},
	        		min:y_min,
	        		max:x_max
		        },
		        zAxis3D: {
		        	show: true,
	        		name: '井深-Z',
	        		nameTextStyle:{
	        			color: 'lime',
		        		fontWeight: 'normal'
	        		}
		        },
		        dataset: {
		            dimensions: [
		                '井深',
		                'Y坐标',
		                'X坐标',
		                {name: '井名', type: 'ordinal'}
		            ],
		            source: datas
		        },
		        series: [
		            {
		                type: 'scatter3D',				//3D类型
		                name: '测试',				    //名字
		                //coordinateSystem: 'grid3D',	//使用地球三维地理坐标系
		                //grid3DIndex: 0,				//坐标轴使用的 geo3D 组件的索引
		                symbol:'diamond',				//点形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
		                symbolSize: 3.5,  				//点大小
		                itemStyle: {
		                	color:'white',		   		//点颜色
		                	borderColor: 'green',  		//点边框颜色
		                	opacity: 1,            		//点的透明度 1不透明
		                	borderWidth: 0.5       		//图形描边宽度
		                },
		                label:{
		                	show:false, 				//是否显示点上面的标签，默认false
		                	distance: 15,				//标签与点的距离
		                	position:'left',      		//标签位置
		                	textStyle:{
		                	    color:'black', 			//文字颜色
		                    	borderWidth:0,  		//标签上边框宽度
		                    	borderColor:'white',   	//边框颜色
		                    	fontFamily:'宋体',		//标签字体
		                    	fontSize:14,			//字体大小
		                    	fontWeight:'normal'		//是否加粗 
		                    }
		                },
		                emphasis:{
		                	itemStyle:{
		                		color:'green',			//鼠标移到点上的颜色变化
		                		opacity:1,				//不透明度
		                		borderWidth:0,			//图像描边宽度
		                		borderColor:'#fff' 		//图形描边颜色
		                	},
		                	label:{
		                		show:true,				//鼠标移动到点上是否显示标签
		                		distance: 15,			//标签与点的距离
		                    	position:'left',      	//标签位置
		                    	textStyle:{
		                    	    color:'black', 		//文字颜色
		                        	borderWidth:0,  	//标签上边框宽度
		                        	borderColor:'white',//边框颜色
		                        	fontFamily:'宋体',	//标签字体
		                        	fontSize:14,		//字体大小
		                        	fontWeight:'normal'	//是否加粗 
		                        }
		                	}
		                },
		            	blendMode:'lighter',			//混合模式默认使用的'source-over'是通过 alpha 混合，而'lighter'是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。
		            	silent:false,					//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
		            	animation:true,					//是否开启动画
		            	animationDurationUpdate:500,	//过渡动画的时长
		            	animationEasingUpdate:'cubicOut',//过渡动画的缓动效果
		                encode: {
		                    x: 'X坐标',
		                    y: 'Y坐标',
		                    z: '井深',
		                    tooltip: [0, 1, 2, 3, 4]
		                }
		            }
		        ]
		    };
			myChart.setOption(option);
	    } 
    </script>

实现效果：
在这里插入图片描述
需要引入的CSS&JS文件：其中jquery.jsecharts.min.4.2.1.js、echarts-gl.min.js为必引项

		<link rel="stylesheet"   href="./css/bootstrap.min.css" >
	    <script src="./js/jquery.js"></script>
	    <script src="./js/echarts.min.4.2.1.js"></script>
	    <script src="./js/echarts-gl.min.js"></script>
	    <script src="./js/bootstrap.min.js"></script>
	    <script src="./js/vue.min.js"></script>