背景说明：
最近在使用Echarts的scatter3D 功能
首先配置好Echarts的大致框架，设置要求展示的各种属性
接下来写后台，此时我是通过Ajax异步获取的数据
经过测试数据获取没有问题
然后严格按照scatter3D所需的数据格式进行数据封装，这一步也没有问题
可是Echarts中却迟迟不能显示我所需的3D样式。。。
通过在前台页面封装数据的console.log，数据格式也没有问题啊
-------------------------这是怎么个情况 (wtf)------------------------
经过自己的深思熟虑，定是Ajax异步造成的，哈哈哈（太聪明了 不由得心生骄傲）
于是乎改async:false 看你还不显示！
结果大失所望！！！（心中不免有些失落。。。）
————————————☆ 一下午过后 ☆————————————
既然考虑到Ajax异步同步的问题，为什么不进一步考虑下呢
Echarts在加载图形前需要先准备好数据
也就印证了那句话：巧妇难为无米之炊
你数据都没有，我凭啥给你加载啊。。。
废话说了这么多了
开始正事：
HTML代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>3D散点轨迹图</title>
<link rel="stylesheet" href="./css/AdminLTE.min.css">
<script src="timing/js/jquery.js"></script>
<script src="./js/echarts.min.4.2.1.js"></script>
<script src="./js/echarts-gl.min.js"></script>
<script src="/static/js/easyui/jquery.easyui.min.js"></script>
<style type="text/css">
body{margin: 0;height: 100%}
</style>
</head>
<body>
<div style="width: 100%;height: 100%;">
<div id="main" style="width: 100%;height: 100%;"></div>
</div>
</body>
</html>
JS代码：
<script type="text/javascript">
//获取URL中的参数
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = GetRequest();
var goodsId= Request['goodsId'];
var jsonData=[];
$(function(){
$.ajax({
url :"/isSecret/notShow/find/"+goodsId,
type : "GET",
async: true,
dataType : "json",
beforeSend: function () {},
complete: function () {},
success : function(data) {
//把获取到的数据加到jsonData[]中
for(i=0;i<data.length;i++){
var arr=[];
arr[i]=new Array(data[i].field1,data[i].field2,data[i].field3,data[i].field4);
jsonData.push(arr[i]);
}
setOptions(jsonData);
}
});
});
//field1:Z轴;field2:Y轴;field3:X轴
function setOptions(datas){
var myChart = echarts.init(document.getElementById('main'));
option = {
grid3D: {
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 //开启特效
}
},
xAxis3D: {
show: true,
name: '南北-X',
nameTextStyle:{
color: 'lime',
fontWeight: 'normal'
}
},
yAxis3D: {
show: true,
name: '东西-Y',
nameTextStyle:{
color: 'lime',
fontWeight: 'normal'
}
},
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: 'field3',
y: 'field2',
z: 'field1',
tooltip: [0, 1, 2, 3, 4]
}
}
]
};
myChart.setOption(option);
}
</script>
异常总结：
在script代码中把Echarts的代码封装到setOptions()方法中，Ajax获取数据成功后加载setOptions()方法，就可以成功避免Echarts图形不展示的问题。
写以博文记之，避免再次入坑！
