ECharts的使用相對于D3來說要簡單馒疹，使用起來也很方便，但是D3并沒有很成熟的三維圖表做法乙墙，很多人說D3對三維這一塊并不擅長颖变，推薦使用ECharts-gl，對ECharts-gl我是服氣的伶丐，借助canvas實現(xiàn)的三維圖表悼做，性能我很滿意呀疯特，大數(shù)據(jù)展示沒什么壓力哗魂，一下是我嘗試的簡單例子，大體框架就是這樣漓雅，也給自己做個筆記录别。
值得注意的是：當刪除圖表后想要再添加的時候會失敗，我自己想了一個不聰明辦法邻吞，但是管用组题。大家要是有更好的辦法歡迎交流。
效果圖：
image.png
以下為源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts三維散點圖</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>
</head>
<body>
<input id="btn" type="button" value="圖表刪除抱冷，重新加載" />
<div id="main" style="width: 100%;height:800px; "></div>
</body>
<script>
$("#main").remove();
var newM = $("<div id='main' style='width: 100%;height:800px; '></div>");
newM.appendTo($("body"));
addChart ();
$("#btn").on("click", function () {
$("#main").remove();
var newM = $("<div id='main' style='width: 100%;height:800px; '></div>");
newM.appendTo($("body"));
addChart();
});
function addChart () {
var myChart = echarts.init(document.getElementById('main'));
console.log(myChart);
var data = [
[12, 23, 43],
[12, 23, 43],
[43, 545, 65],
[92, 23, 33]
];
myChart.setOption({
tooltip: {},
xAxis3D: {
name: "x",
type: 'value',
// min: 'dataMin',//獲取數(shù)據(jù)中的最值
// max: 'dataMax'
},
yAxis3D: {
name: "y",
type: 'value',
// min: 'dataMin',
// max: 'dataMax'
},
zAxis3D: {
name: "z",
type: 'value',
// min: 'dataMin',
// max: 'dataMax'
},
grid3D: {
axisLine: {
lineStyle: {
color: '#000'//軸線顏色
}
},
axisPointer: {
lineStyle: {
color: '#f00'//坐標軸指示線
},
show: false//不坐標軸指示線
},
viewControl: {
// autoRotate: true,//旋轉展示
// projection: 'orthographic'
beta: 10
},
boxWidth: 200,
boxHeight: 100,
boxDepth: 100,
top: -100
},
series: [{
type: 'scatter3D',
dimensions: ['a', 'b', 'c'//顯示框信息
],
// encode: {
//// x: [3, 1, 5], // 表示維度 3崔列、1、5 映射到 x 軸旺遮。
//// y: 2, // 表示維度 2 映射到 y 軸赵讯。
// tooltip:['a','c','b'], // 表示維度 3、2耿眉、4 會在 tooltip 中顯示边翼。
// label: 'a' // 表示 label 使用維度 3。
// },
data: data,
symbolSize: 10,//點的大小
// symbol: 'triangle',
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.8)'//邊框樣式
},
emphasis: {
itemStyle: {
color: '#ccc'//高亮
}
},
itemStyle: {
color: "#f00"
}
}],
backgroundColor: "#fff"
});
}
</script>
</html>
