ThingJS 是物聯網可視化PaaS開發平臺，幫助物聯網開發商輕鬆集成 3D 可視化界面。ThingJS 基於 HTML5 和 WebGL 技術，可以在ThingJS場景中引入ECharts圖表。
下面通過Echars圖表展現園區內停車場與車輛的信息，主要包含了當前的車位狀態、當前車牌號歸屬地信息、車輛類型信息，以及車輛進出統計等信息。下邊我們就看一下圖表是如何嵌入ThingJS，並且實現交互的。
ECharts嵌入ThingJS
第一步 需要引入ECharts文件。
第二步 創建背景塊和圖表塊，並且設置兩個塊的樣式。
第三步 基於圖表塊初始化Echarts。
第四步 將圖表塊放入背景塊，背景塊放入總dom中，這樣Echarts就成功嵌入到ThingJS中了。
THING.Utils.dynamicLoad(['https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js'], function () {var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse'// 場景地址 }); // 創建圖表 createChart(); function createChart(echartOptions) { var bottomBackground = document.createElement('div'); //創建背景塊 var bottomDom = document.createElement('div');//創建圖表塊 //設置兩個塊的樣式 var backgroundStyle = 'bottom:0px; position: absolute;right:0px;height:400px;width:600px;background: rgba(41,57,75,0.74);'; var chartsStyle = 'position: absolute;top:80px;right:0px;width:600px;height:300px;'; // 設置樣式 bottomBackground.setAttribute('style', backgroundStyle); bottomDom.setAttribute('style', chartsStyle); // echarts 初始化 var bottomCharts = window.echarts.init(bottomDom); // 數據部分 bottomCharts.setOption(echartOptions); bottomBackground.appendChild(bottomDom); app.domElement.appendChild(bottomBackground); }});
ThingJS與Echarts交互
根據ECharts中的事件機制，在初始化圖表時，就可以給圖表添加事件。當事件觸發時，ThingJS可以接收當前事件操作的參數從而控制場景中對應的物體變化，下邊可以以車位的佔用情況為例。
var bottomCharts = window.echarts.init(bottomDom);// echarts 初始化bottomCharts.setOption(option); bottomCharts.on('click', function (params) { cancelOutline(); reset(); clearUiAnchorArr(); if(params.name == "空置車位"){ for(var i = 0; i < app.query("空置車位").length; i++){ app.query("空置車位")[i].style.outlineColor = "#00ff00" } }else if(params.name == "佔用車位"){ for(var i = 0; i < app.query("佔用車位").length; i++){ app.query("佔用車位")[i].style.outlineColor = "#ff0000" } } })
在ThingJS場景物體已經存在了一些我們需要的屬性的情況下，當點擊空置車位時，ThingJS響應事件，就可以通過選中我們想要找到的物體，改變物體顯示效果，將空置車位清晰的展示出來。
當點擊車某一區域車牌信息時，ThingJS可以根據物體屬性選出對應的車輛，並將車牌號通過頂牌的方式顯示出來，下面是查看停車場河北車牌信息的情況。