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>
