echarts-3D-散点图
<div >
<div id="main" ></div>
</div>
<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.ElementById('main'));
function setOption(datas,x_min,x_max,y_min,y_max,xuanzhuan){
var myChart = echarts.ElementById('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: aphic.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'}
]
setoption,
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。