ECharts的使用相对于D3来说要简单，使用起来也很方便，但是D3并没有很成熟的三维图表做法，很多人说D3对三维这一块并不擅长，推荐使用ECharts-gl，对ECharts-gl我是服气的，借助canvas实现的三维图表，性能我很满意呀，大数据展示没什么压力，一下是我尝试的简单例子，大体框架就是这样，也给自己做个笔记。
值得注意的是：当删除图表后想要再添加的时候会失败，我自己想了一个不聪明办法，但是管用。大家要是有更好的办法欢迎交流。
效果图：
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',//获取数据中的最值
// 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>
网友评论