在别处看到的保存下来
<!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:500px;height:600px;margin: 0 auto;"></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],
[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>
