<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>
<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>
————————————————
版權聲明：本文為CSDN博主「Real._」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/GJ454221763/article/details/90487809