Echarts圖表嵌入ThingJS場景

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能夠根據物體屬性選出對應的車輛，並將車牌號經過頂牌的方式顯示出來，下面是查看停車場河北車牌信息的狀況。