Echart 图表与ThingJS结合

liuwei000000 17天前 176

Echart介绍

它就是一个商业级数据图表,一个纯JavaScript的图标库。

可以兼容绝大部分的浏览器,可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。

echart能实现大部分的数据表样式,并且还有3d图标功能。

ThingJS 是物联网可视化PaaS开发平台,帮助物联网开发商轻松集成 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可以根据物体属性选出对应的车辆,并将车牌号通过顶牌的方式显示出来,下面是查看停车场河北车牌信息的情况。

最终效果如下:


最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回