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

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,                //是否显示点上面的标签，默认falsedistance: 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>

【前端】Echarts的scatter3D各个属性具体含义相关推荐

delphi中保留字的属性和含义
delphi中保留字的属性和含义转发自https://www.cnblogs.com/cracksa/archive/2012/08/30/delphi-10-2.html 所谓保留字就是:在del ...
web.config forms节点中的属性的含义和用途
authentication mode="Forms"/> 这样之后,ASP.NET运行时就知道我们启用了Forms验证,在生命周期的验证阶段就激活FormsAuthenti ...
关于Meta标签中format-detection属性及含义
一.Meta标签中的format-detection属性及含义意为:格式检测或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...
linux进程属性,Linux进程属性及含义
一个进程包含多个属性参数,通过使用 ps 命令,我们可以查看当前系统中有关进程的详细信息,例如: [root@localhost ~]# ps -le F S UID PID PPID C PRI N ...
Qt|layout布局相关，layout属性的含义及使用
各个参数的含义: Layout各个属性的含义 layoutName 布局的名称 layoutLeftMargin 子控件与布局控件的左边的空余空间大小 layoutTopMargin 子控 ...
【大汇总】HTML属性及含义
HTML属性及含义常用HTML代码: 一.文字标记基本代码如下: <P align=center><FONT color=#0066ff face=隶书size=5>插入文 ...
设有关系模式W(C,P,S,G,T,R）其中各个属性的含义是：C课程，P教师，S学生，G成绩，T实践，R教室，根据定义有如下依赖集D={C→P,(S,C)G,(T,R)C,(T,P)R,(T,S)R}
设有关系模式W(C,P,S,G,T,R)其中各个属性的含义是:C课程,P教师,S学生,G成绩,T实践,R教室,根据定义有如下依赖集D={C→P,(S,C)→G,(T,R)→C,(T,P)→R,(T,S ...
Cookie的secure和httpOnly属性的含义以及 Cookie设置HttpOnly，Secure，Expire属性
Cookie的secure和httpOnly属性的含义版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.c ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...

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

【前端】Echarts的scatter3D各个属性具体含义相关推荐

最新文章

热门文章