物联网可视化领域,如何将图表数据与三维场景进行交互?

随着时代的发展,人们对于事物的处理方式发生了巨大改变,从书信交流到如今视频通话,人们日常生活中的交流方式也发生了改变,尤其是人们对于图像的接受能力远远大于文字,很多时候,几十上百字的归纳说明还没有一张图给人带来的直观,这种将文字变成表格,表格变成图表的过程却并不算漫长,随着互联网的蓬勃生长、对于千万条乃至数百亿条数据的处理之后,如何让管理者更加直观便捷的查看出大数据下隐藏的信息,这就不仅仅是文字能够表述的清楚,或者这样说,在如今这个时代,任何可以被节约下来的时间都不能去浪费,以至于表格逐渐代替了文字账本,在互联网中使用图表来展示数据也逐渐成为了主流趋势,当我们把目光放向物联网时,其实也是这样,随着互联网的壮大,物联网也在迅速崛起,而物联网可视化的万物可视也成为了当前的一大需求,将三维实景与数据结合起来也成为了可视化的一大亮点。

       物联网可视化是什么?可视化号称是物联网的最后一公里,那么,为什么会有这样的言论?物联网可视化通过3D实景模型,结合了各种传感技术、以互联网来传递数据,并且将数据传入到可视化应用中,变化成可直观查看的图表,如温度云图、信息报警、安防监控等等,将一系列的零散功能结合在一起,形成一个完整的可视化应用。这样不仅仅能够使用可视化应用来实现实时控制的功能,还能够让任何人员都能够看懂,并且还是非常直观、非常清晰的看懂,物联网可视化应用,不仅能完成使用者需要的功能,更是在此基础之上,强化了其“可视化”的能力,让使用者一览无“疑”。

       在物联网可视化领域,如何将图表数据与三维场景进行交互呢?

       使用ThingJS在线开发即可快速使用Echarts图表结合三维场景!进入到ThingJS网站的在线开发中去https://www.thingjs.com/guide/?m=sample使用QQ或者微信快速登录,找到官方示例中的界面(2D),点击“Echarts + 交互”,出现对应代码后点击运行(三角形图标),可以查看到图表和三维场景进行交互了,但是这四个图表都不是我想要的,我该如何去修改呢?

       别急,,慢慢看下来,你会发现,改图表非常的简单!

    如何修改图表样式?

       如何使用Echarts的图表替换掉我们的图表?其实非常的简单,进入到Echarts官网,点击实例,选择其中的例子,将该例子中的代码复制出来,修改其中的数据,后期结合可以通过Ajax获取参数来动态的修改我们图表中的数据。(这一章节我们主要讲解如何修改图表,将图表与三维场景相结合)将数据放入到ThingJS的代码中去,具体位置是找到ThingJS要被替换的图表,将“XXXOption"或者是“Option”中的数据全部替换掉。完成后可以点击保存并且运行,查看是否修改成功。注意:最好是将“XXXOption"的名字保留,仅改变“XXXOption"后面的数据,或者将“XXXOption"改成你想要的变量名,那么在调用“XXXOption"的位置,也需要全部替换掉。

新加入的Echarts实例的代码如下:

// 车位占用情况

function occupyPark() {

var colors = ['#5793f3', '#d14a61', '#675bba'];

var occupyOption = {

color: colors,

tooltip: {

trigger: 'none',

axisPointer: {

type: 'cross'

}

},

legend: {

data: ['十月车位使用数', '十一月车位使用数']

},

grid: {

top: 70,

bottom: 50

},

xAxis: [

{

type: 'category',

axisTick: {

alignWithLabel: true

},

axisLine: {

onZero: false,

lineStyle: {

color: colors[1]

}

},

axisPointer: {

label: {

formatter: function (params) {

return '使用数  ' + params.value

+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');

}

}

},

data: ["6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]

},

{

type: 'category',

axisTick: {

alignWithLabel: true

},

axisLine: {

onZero: false,

lineStyle: {

color: colors[0]

}

},

axisPointer: {

label: {

formatter: function (params) {

return '使用数  ' + params.value

+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');

}

}

},

data: ["6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

name: '十月车位使用数',

type: 'line',

xAxisIndex: 1,

smooth: true,

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

},

{

name: '十一月车位使用数',

type: 'line',

smooth: true,

data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]

}

]

};

在这里我将完整的代码贴出,同时也贴出该示例的分享链接:https://www.thingjs.com/s/0fbfe72782a445ce41c54351

/**

* 说明:ECharts 整合例子

* 操作:点击图表,触发场景信息变化

* 交互图表:当前车位状态、车牌信息、车辆类型

* 难度:★★★☆☆

*/

// 动态引入ECharts.js

THING.Utils.dynamicLoad(['lib/echarts.min.js'], function () {

/*

   *var app = new THING.App()一直作为ThingJS的启动来使用的,其中有url等信息需要填写

   *url则是制作好的场景上传到ThingJS网站后的链接

   */

var app = new THING.App({

url: 'https://www.thingjs.com/./client/ThingJS/10321/20190715145918010908508', // 场景地址

"skyBox": "Night"

});

/**

    * app.on("load",function) 作为全局绑定事件,绑的的方法就是'load' 方法

    */

app.on('load', function (ev) {

showParkingInfo();// 车位信息

showTypeInfo();// 车辆类型信息

showLicenseInfo();// 车牌信息

occupyPark();// 车位占用

})

var timer = null;

// 创建图表

function createChart(option, type) {

var bottomBackground = document.createElement('div');// 创建背景 div

var bottomDom = document.createElement('div');// 图表 div

// 设置背景div和图表div的样式

if (type == "车位状态") {

var backgroundStyle = 'position: absolute;top:3px;right:3px;height:300px;width:380px;background: rgba(22,24,63,0.3); border-radius:3px';

var chartsStyle = 'position: absolute;top:10px;right:0px;width:360px;height:250px;margin:0 10px;';

}

else if (type == "车牌信息") {

var backgroundStyle = 'position: absolute;top:306px;right:3px;height:300px;width:380px;background: rgba(22,24,63,0.3); border-radius:3px';

var chartsStyle = 'position: absolute;top:10px;right:0px;width:360px;height:300px;margin:0 10px;';

}

else if (type == "车位占用情况") {

var backgroundStyle = 'position: absolute;top:3px;left:3px;height:300px;width:380px;background: rgba(22,24,63,0.3); border-radius:3px';

var chartsStyle = 'position: absolute;top:10px;right:0px;width:360px;height:300px;margin:0 10px;';

}

else if (type == "车辆类型") {

var backgroundStyle = 'position: absolute;top:306px;left:3px;height:300px;width:380px;background: rgba(22,24,63,0.3); border-radius:3px';

var chartsStyle = 'position: absolute;top:10px;right:0px;width:360px;height:300px;margin:0 10px;';

}

bottomBackground.setAttribute('style', backgroundStyle);

bottomDom.setAttribute('style', chartsStyle);

// echarts 初始化

var bottomCharts = window.echarts.init(bottomDom);

bottomCharts.setOption(option);

// 给图表添加'click'事件 当点击图图表时触发,params是点击位置信息参数

bottomCharts.on('click', function (params) {

clearTimeout(timer);

// 清除上次点击事件产生的场景变化

cancelOutline();

reset();

clearUIAnchorArr();

// 根据鼠标点击时的参数,控制场景中物体变化

if (params.name == "空置车位") {

app.query("空置车位").style.outlineColor = "#4a8cff"

}

else if (params.name == "占用车位") {

app.query("占用车位").style.outlineColor = "#ff6c00"

}

else if (params.name.indexOf("车") != -1) {

var reg = new RegExp(params.name);

var cars = app.query(reg);

flash(cars);

}

else if (params.name == "京") {

var cars = app.query('[area=京]');

for (var i = 0; i < cars.length; i++) {

createUIAnchor(cars[i]);

}

}

else if (params.name == "津") {

var cars = app.query('[area=津]');

for (var i = 0; i < cars.length; i++) {

createUIAnchor(cars[i]);

}

}

else if (params.name == "冀") {

var cars = app.query('[area=冀]');

for (var i = 0; i < cars.length; i++) {

createUIAnchor(cars[i]);

}

}

else if (params.name == "辽") {

var cars = app.query('[area=辽]');

for (var i = 0; i < cars.length; i++) {

createUIAnchor(cars[i]);

}

}

// 场景中信息显示5s后消失

timer = setTimeout(function () {

cancelOutline();

reset();

clearUIAnchorArr();

}, 5000)

});

bottomBackground.appendChild(bottomDom);

app.domElement.appendChild(bottomBackground);// 添加到app dom下

}

// 取消所有物体钩边

function cancelOutline() {

app.query(".Thing").style.outlineColor = null;

}

// 设置闪烁

function flash(cars) {

cars.on('update', function (ev) {

ev.object.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 200);

}, '每帧改变透明度');

}

// 恢复设置

function reset() {

var cars = app.query(/车/);

cars.style.opacity = 1.0;

cars.style.color = null;

cars.off('update', null, '每帧改变透明度');

}

// 存储所有UIAnchor

var uiAnchorArr = [];

// 创建UIAnchor

function createUIAnchor(obj) {

// 创建widget (绑定数据用)

var panel = new THING.widget.Panel({

width: '100px',

cornerType: 'polyline'

})

panel.addString(obj.userData, 'id').caption('');

var uiAnchor = app.create({

type: 'UIAnchor',

parent: obj,

element: panel.domElement,

localPosition: [0, 0, 0],

pivot: [-0.1, 1.5]

});

uiAnchorArr.push(uiAnchor);

return uiAnchor;

}

// 删除所有顶牌

function clearUIAnchorArr() {

for (var i = 0; i < uiAnchorArr.length; i++) {

uiAnchorArr[i].destroy();

}

uiAnchorArr = [];

}

// 当前停车位状态

function showParkingInfo() {

var parkingTotalNum = 16;

var emptyNum = 3;

//parkOption数据可以使用Echarts中的示例数据进行替换,只需更改其中的数据信息即可

var parkOption = {

title: { text: '当前车位状态', x: 'center', textStyle: { color: '#cccccc' } },

tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b} : {c} ({d}%)"

},

legend: {

orient: 'vertical',

top: 60,

x: 'left',

data: ['占用车位', '空置车位'],

textStyle: {

color: '#cccccc'

}

},

calculable: true,

series: [

{

name: '车位', type: 'pie', radius: '55%', center: ['50%', '60%'],

data: [

{ value: parkingTotalNum - emptyNum, name: '占用车位', itemStyle: { color: "#ff6c00" } },

{ value: emptyNum, name: '空置车位', itemStyle: { color: "#4a8cff" } }

]

}

]

};

createChart(parkOption, "车位状态");

}

// 车辆类型

function showTypeInfo() {

var dataAxis = ["跑车", "轿车", "皮卡车", "面包车", "出租车"];

var data = [3, 6, 1, 1, 2];

var yMax = 7;

var dataShadow = [];

for (var i = 0; i < data.length; i++) {

dataShadow.push(yMax);

}

var typeOption = {

title: { text: '车辆类型', x: 'center', textStyle: { color: '#cccccc' } },

xAxis: {

data: dataAxis,

axisLabel: {

inside: true,

textStyle: {

color: '#fff'

}

},

axisTick: {

show: false

},

axisLine: {

show: false

},

z: 10

},

yAxis: {

axisLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

textStyle: {

color: '#ccc'

}

}

},

dataZoom: [

{

type: 'inside'

}

],

series: [

{ // For shadow

type: 'bar',

itemStyle: {

normal: { color: 'rgba(0,0,0,0.05)' }

},

barGap: '-100%',

barCategoryGap: '40%',

data: dataShadow,

animation: false

},

{

type: 'bar',

itemStyle: {

normal: {

color: new echarts.graphic.LinearGradient(

0, 0, 0, 1,

[

{ offset: 0, color: '#83bff6' },

{ offset: 0.5, color: '#188df0' },

{ offset: 1, color: '#188df0' }

]

)

},

emphasis: {

color: new echarts.graphic.LinearGradient(

0, 0, 0, 1,

[

{ offset: 0, color: '#2378f7' },

{ offset: 0.7, color: '#2378f7' },

{ offset: 1, color: '#83bff6' }

]

)

}

},

data: data

}

]

};

createChart(typeOption, "车辆类型");

}

// 显示车牌信息

function showLicenseInfo() {

var len_jing = app.query('[area=京]').length;

var len_jin = app.query('[area=津]').length;

var len_ji = app.query('[area=冀]').length;

var len_liao = app.query('[area=辽]').length;

var licenseOption = {

title: { text: '车牌信息', x: 'center', textStyle: { color: '#cccccc' } },

tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'left',

data: ['京', '津', '冀', '辽'],

textStyle: {

color: '#cccccc'

}

},

series: [

{

name: '牌照',

type: 'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

}

},

labelLine: {

normal: {

show: false

}

},

data: [

{ value: len_jing, name: '京' },

{ value: len_jin, name: '津' },

{ value: len_ji, name: '冀' },

{ value: len_liao, name: '辽' },

]

}

]

};

createChart(licenseOption, "车牌信息");

}

// 车位占用情况

function occupyPark() {

var colors = ['#5793f3', '#d14a61', '#675bba'];

var occupyOption = {

color: colors,

tooltip: {

trigger: 'none',

axisPointer: {

type: 'cross'

}

},

legend: {

data: ['十月车位使用数', '十一月车位使用数']

},

grid: {

top: 70,

bottom: 50

},

xAxis: [

{

type: 'category',

axisTick: {

alignWithLabel: true

},

axisLine: {

onZero: false,

lineStyle: {

color: colors[1]

}

},

axisPointer: {

label: {

formatter: function (params) {

return '使用数  ' + params.value

+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');

}

}

},

data: ["6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]

},

{

type: 'category',

axisTick: {

alignWithLabel: true

},

axisLine: {

onZero: false,

lineStyle: {

color: colors[0]

}

},

axisPointer: {

label: {

formatter: function (params) {

return '使用数  ' + params.value

+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');

}

}

},

data: ["6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

name: '十月车位使用数',

type: 'line',

xAxisIndex: 1,

smooth: true,

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

},

{

name: '十一月车位使用数',

type: 'line',

smooth: true,

data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]

}

]

};

createChart(occupyOption, "车位占用情况");

}

})

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cwl_Java

软考分类精讲-计算机网络

利用需求分析和现有的网络体系分析的结果来设计逻辑网络结构,最后得到一份逻辑网络设计文档,输出内容包括以下几点

9820
来自专栏CU技术社区

关于 Linux 磁盘监控工具,这里有一些说明

需单独安装 yum install iotop 用法:iotop -d 1 -o

8110
来自专栏运维之美

什么是无服务器架构,你理解对了吗?

| 从行业趋势看,Serverless 是云计算必经的一场革命。 2019 年,Serverless 被 Gartner 称为最有潜力的云计算技术发展方向,并...

7910
来自专栏自学测试之道

Linux之常用系统监控指令

对于上面的命令,有些是Linux系统自带的,你可以直接执行。有些是第三方命令,不过绝大多数可以直接通过Yum install xxx或者apt-get inta...

5820
来自专栏CU技术社区

最受欢迎 Linux 发行版,上榜的都有谁?

Linux发行版在过去的日子里,不断为大家带来改变,对于那些希望迁移到开源平台的人来说,选择什么平台是最大的困扰,如果你去 Distrowatch找一下,那么多...

15310
来自专栏CU技术社区

取代云计算?开创性的技术:边缘计算和雾计算

如今,从虚拟化服务的日益普及到云计算服务平台的广泛采用,IT运营正在进行重大改革。而在网络边缘处理数据是在使用物联网设备时提高应用效率的最佳方法之一。

6810
来自专栏用户1513005的专栏

数字化转型不是选择题,而是生存题

数字化工业是企业的动力,是节能提质增效的根本,广州接点是集顶层设计、系统实现、及数据服务“三合一”的智能管控整体解决方案领导者,通过智慧物联、大数据、智能管理平...

8730
来自专栏3D可视化

ThingJS平台上有哪些组件和工具?

ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰...

14340
来自专栏鲜枣课堂

IPv6只是增加了地址数量?其实真相并没有那么简单!

10月20日,在乌镇举办的第六届世界互联网大会上,中国电信副总经理刘桂清表示:“中国电信城域网、移动网、骨干网、IDC等均实现了IPv6的商用部署,目前已建成规...

28000
来自专栏吉浦迅科技

说了这么多边缘计算,但边缘计算到底是什么?

本文编译自ExplainingComputers视频《Explaining Edge Computing》

15430

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励