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能够根据物体属性选出对应的车辆，并将车牌号经过顶牌的方式显示出来，下面是查看停车场河北车牌信息的状况。