没有数据交互的3D可视化应用可不会受到BAT公司的关注，也不会专门成立相关部门去研究这个领域。
使用Echarts图表分以下五步：
第一步：在“在线开发”中引入Echarts图表代码；
第二步：在“在线开发”中引入数据对接代码；
第三步：修改Echarts图表样式（具体样式可以到Echarts官网上下载）；
第四步：将数据对接后的数据引入到Echarts的json数据中；
第五步：加入Echarts初始化以及动态修改Echarts代码；
好了，就是这五步了，具体是如何操作的呢？
引入Echarts图表：
进入到ThingJS在线开发中新建一个项目，保存后，打开官方示例，找到“界面（2D）”，打开“整合Echarts”示例，将代码全部复制到新项目中，（全选后使用shift + alt + F可以格式化代码），在这里面最为重要的是动态引入Echarts.js
THING.Utils.dynamicLoad(['lib/echarts.min.js'], function () {}) 但是这个代码还需要修改要将dynamicLoad后面的url，要将其改为以下url：
www.thingjs.com/guide/lib/e… 这样做的原因就是使得项目分享出去的链接能够展示echarts图表，否则是没有图表的。
引入数据对接：
保存当先项目，打开官方示例，找到“数据”，打开“数据对接_Ajax”示例，将app.on部分的代码以及updateData(obj)方法的代码全部复制到新项目下方，（全选后使用shift + alt + F可以格式化代码），在这里面要先将timer定时给注释掉，同时将changeColor（）以及createPanel()方法删掉，因为这里面没有引用该方法，有需要可以自己仿照示例写一个。
// 每隔3s 请求一次数据
//timer = setTimeout(function () {
//updateData(obj)
//}, 3000);
修改Echarts图表样式：
打开Echarts官网，打开官方实例，找到想要的图标样式目，打开官方示例，复制option处所有数据，将该数据替换掉项目中echartOption后的数据，这样图表则为我们选择的图表
// 数据部分 var echartOptions = {
//...
};
数据交互：
要改变的数据一般是option中series中的数据，进行相对应的替换即可。在这里我写了三个方法来替换series中的数据以及xAxis中代表横坐标的数据。
/** * 获取到温度变化值并且传入到echarts图表中去，同时修改图表展示。 */ function changeTemperature(d) { //获取到返回的字符串中的temper var temper = d.data.temper; //使用分割字符串方法获取到温度的数字 var newtemper = temper.substr(0, temper.indexOf("℃")) //新建一个数组，给option数据中对应的数组添加变化后的温度 var array = []; array = option.series[0].data; array.push(parseInt(newtemper)); option.series[0].data = array;
}
/** * 获取到湿度变化值并且传入到echarts中去，同时修改图表展示 */ function changeHumidity(d) { //获取到返回的字符串中的temper var humi = d.data.humi; //使用分割字符串方法获取到温度的数字 var newHumi = humi.substr(0, humi.indexOf("%")) //新建一个数组，给option数据中对应的数组添加变化后的温度 var array = []; array = option.series[1].data; array.push(parseInt(newHumi)); option.series[1].data = array; //初始化
}
/** * 添加图表下标 */ function addSubscript(d) { var timerTemp = []; timerTemp = option.xAxis[0].data; timerTemp.push(8 + ++count); //横坐标递增 option.xAxis[0].data = timerTemp }
动态修改图表：
当Echarts图表修改结束，并且将ajax获取到的数据也传递到了图表之中后，我们就可以将更新后的echarts图表重新初始化，这样后台数据的变化就会同步显示到我们的图表之中，这样就完成了3D可视化场景结合图表进行的数据交互功能；
/** * 动态修改图表 */ function changeEcharts() { //初始化 var mychart = window.echarts.init(document.getElementById('myId')); mychart.setOption(option); }
最后，总结一下，最基本的数据交互和引用图表都在ThingJS的官方示例中，需要注意的是echarts图表的动态修改需要使用到
var mychart = window.echarts.init(document.getElementById('myId')); mychart.setOption(option); 这两行代码，同时对于图表中的数据修改也要准确，当所有代码修改完成后，我们就可以开始调用对应的方法来实现我们的Echarts图表结合Ajax进行数据对接。
以下是完整代码：
//设置全局变量 var count = 0; // 动态引入ECharts.js THING.Utils.dynamicLoad(['www.thingjs.com/guide/lib/e…'], function () { /* *var app = new THING.App()一直作为ThingJS的启动来使用的，其中有url等信息需要填写 *url则是制作好的场景上传到ThingJS网站后的链接 */
var app = new THING.App({ url: 'www.thingjs.com/static/mode…', // 场景地址 "skyBox": "BlueSky" });
/** data : humi : "54%" id :"1606" power :"8kWh" temper :"16℃" */ app.on('load', function () {
createChart(); var car = app.query('.Thing'); updateData(car[0]);
})
/** * 创建图表 */ function createChart() { // 背景 div var bottomBackground = document.createElement('div'); bottomBackground.id = 'myId'; // 标题 div var bottomFont = document.createElement('div'); // 图表 div var bottomDom = document.createElement('div'); // 设置背景样式、右下角对齐 var backgroundStyle = 'bottom:0px; position: absolute;right:0px;height:400px;width:600px;background: rgbargba(40, 119, 98, 0.39);'; // 标题字体样式 var fontStyle = 'position: absolute;top:0px;right:0px;color:rgba(113,252,244,1);height:78px;width:600px;line-height: 45px;text-align: center;top: 20px;'; // 图表DIV样式 var chartsStyle = 'position: absolute;top:80px;right:0px;width:600px;height:300px;';
// 设置样式 bottomBackground.setAttribute('style', backgroundStyle); bottomFont.setAttribute('style', fontStyle); bottomDom.setAttribute('style', chartsStyle);
// 底部标题文字 bottomFont.innerHTML = '车位温度监控'; // echarts 初始化 var bottomCharts = window.echarts.init(bottomDom); // 数据部分
option = { title: { text: '气候表' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['温度', '湿度'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['6', '7', '8'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '温度', type: 'line', stack: '总量', areaStyle: {}, data: [12, 32, 10] }, { name: '湿度', type: 'line', stack: '总量', areaStyle: {}, data: [44, 21, 18] } ] };
bottomCharts.setOption(option);
bottomBackground.appendChild(bottomFont); bottomBackground.appendChild(bottomDom);
// 添加到app dom下 app.domElement.appendChild(bottomBackground); } })
/**
- 使用ajax更新数据 */ function updateData(obj) { // 如果网站是 https 接口则对应 https 请求 // 如果网站是 http 接口则对应 http 请求即可 $.ajax({ type: "get", url: "3dmmd.cn/getMonitorD…", data: { "id": obj.id }, dataType: "json", // 返回的数据类型 json success: function (d) { console.log('第一次：' + option.xAxis[0].data.length); changeHumidity(d); changeTemperature(d); addSubscript(d); changeEcharts(); // 每隔4s 请求一次数据 var timer = setTimeout(function () { //当时间数组下标 if (option.xAxis[0].data[option.xAxis[0].data.length - 1] == 24) { clearTimeout(timer); return; } updateData(obj); }, 4000)
}
});
/** * 获取到温度变化值并且传入到echarts图表中去，同时修改图表展示。 */ function changeTemperature(d) { //获取到返回的字符串中的temper var temper = d.data.temper; //使用分割字符串方法获取到温度的数字 var newtemper = temper.substr(0, temper.indexOf("℃")) //新建一个数组，给option数据中对应的数组添加变化后的温度 var array = []; array = option.series[0].data; array.push(parseInt(newtemper)); option.series[0].data = array;
}
/** * 获取到湿度变化值并且传入到echarts中去，同时修改图表展示 */ function changeHumidity(d) { //获取到返回的字符串中的temper var humi = d.data.humi; //使用分割字符串方法获取到温度的数字 var newHumi = humi.substr(0, humi.indexOf("%")) //新建一个数组，给option数据中对应的数组添加变化后的温度 var array = []; array = option.series[1].data; array.push(parseInt(newHumi)); option.series[1].data = array; //初始化
}
/** * 添加图表下标 */ function addSubscript(d) { var timerTemp = []; timerTemp = option.xAxis[0].data; timerTemp.push(8 + ++count); //横坐标递增 option.xAxis[0].data = timerTemp }
/** * 动态修改图表 */ function changeEcharts() { //初始化 var mychart = window.echarts.init(document.getElementById('myId')); mychart.setOption(option); } }
