Echart介绍它就是一个商业级数据图表，一个纯JavaScript的图标库。 可以兼容绝大部分的浏览器，可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。 echart能实现大部分的数据表样式，并且还有3d图标功能。 
ThingJS 是物联网可视化开发平台，帮助物联网开发商轻松集成 3D 可视化界面。ThingJS 基于 HTML5 和 WebGL 技术，可以在ThingJS场景中引入ECharts图表。 下面通过Echars图表展现园区内停车场与车辆的信息，主要包含了当前的车位状态、当前车牌号归属地信息、车辆类型信息，以及车辆进出统计等信息。下边我们就看一下图表是如何嵌入ThingJS，并且实现交互的。
ECharts嵌入ThingJS步骤第一步 需要引入ECharts文件。 第二步 创建背景块和图表块，并且设置两个块的样式。 第三步 基于图表块初始化Echarts。 第四步 将图表块放入背景块，背景块放入总dom中，这样Echarts就成功嵌入到ThingJS中了。 下面来看看代码： - var ctx = document.getElementById('myChart');
- var myChart = new Chart(ctx, {
- type: 'pie',
- data: {
- labels: ['叉车', '轿车', '警车', '皮卡'],
- datasets: [{
- label: '# of Votes',
- data: [11964, 18799, 51966, 35876],
- backgroundColor: [
- 'rgba(255, 99, 132, 0.9)',
- 'rgba(54, 162, 235, 0.9)',
- 'rgba(255, 206, 86, 0.9)',
- 'rgba(75, 192, 192, 0.9)',
- ],
- borderColor: [
- 'rgba(255, 99, 132, 1)',
- 'rgba(54, 162, 235, 1)',
- 'rgba(255, 206, 86, 1)',
- 'rgba(75, 192, 192, 1)',
- ],
- borderWidth: 1
- }]
- },
- options: {
- title: { //标题
- display: true,
- text: '车辆销售额饼图',
- fontColor: "#00f",
- },
- scales: {
- yAxes: [{
- ticks: {
- beginAtZero: true
- }
- }]
- },
- }
- });
效果如下： 
除了实现普通的图标效果外，还需要3D场景能和图表交互 下面来看下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可以根据物体属性选出对应的车辆，并将车牌号通过顶牌的方式显示出来，下面是查看停车场河北车牌信息的情况。 最终效果如下:
|
4453
0
