Echars图表嵌入ThingJS场景

最新推荐文章于 2023-03-20 10:54:39 发布

叶子Yana

最新推荐文章于 2023-03-20 10:54:39 发布

阅读量595

点赞数

分类专栏：前端文章标签： ThingJS ECharts WebGL 物联网大屏

本文链接：https://blog.csdn.net/qq_39816410/article/details/96159257

版权

本文介绍了如何在物联网可视化平台ThingJS中嵌入ECharts图表，用于展示如停车场车位状态、车牌信息等数据。通过四个步骤成功将ECharts图表嵌入，并展示了如何实现ECharts与ThingJS的交互，例如点击车位事件触发ThingJS场景物体的变化。

摘要由CSDN通过智能技术生成

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;righ