请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 412|回复: 0

[分享] 连系Echarts、Ajax技术实现可视化大屏监控 ThingJS

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-12-2 19:12:21 | 显示全部楼层 |阅读模式

#三维可视化# #3D开辟#

ECharts是 Enterprise Charts缩写,暗示贸易级数据表图,它是一个基于html5 Canvas的图标库,可以流利的运转在PC和移动装备上,兼容当前绝大部分阅读器 (E6/7/8/9/10/1, chrome, firefox, Sarari等),底层依靠轻量级的 Canvas类库 ZRender,建立了坐标系、图例、提醒、工具箱等根本组件,可以供给直观、活泼、可交互、可高度本性化定制的数据可视化图表。创新的拖拽计较、数据视图、值域周游等特征大大增强了用户体验,赋予了用户对数据停止挖掘、整合的才能。

连系Echarts、Ajax技术实现可视化大屏监控 ThingJS

基于数据流设想

用户获得数据信息天生系统所需的页面,需要经过登陆前台界面触发与背景的交互,读取数据传输信息,是以需要设想一个数据流模子图,这里就不展开来说。接下来,基于数据流设想,操纵Echarts可视化技术实现可视化界面展现给用户。

连系Echarts、Ajax技术实现可视化大屏监控 ThingJS

可视化大屏利用案例剖析

Echarts开辟接入ThingJS的3D场景,打造三维可视化大屏利用,可实现空间数据分析可视化,即展现传神的三维场景,而且供给2D图表盘与3D场景的高度耦合,帮助人们基于手动挑选场景,检察实时数据信息,加倍敏捷有用的认知、把握并了解信息。
在ThingJS的前端页面开辟根本上,导入城市级3D场景和根本地理数据,引入了 ECharts插件,连系Ajax异步伐用方式静态读取数据库,将数据信息用可视化的图形界面展现在前台。其中,3D场景操纵Javascript说话开辟交互事务,实现了对数据系统监控系统的可视化动效开辟,并可以经过杰出的界面支持用户拜候操纵、平安治理监控。

连系Echarts、Ajax技术实现可视化大屏监控 ThingJS

利用ThingJS平台设置

(1) 在html文件中斥地一个如div、span之类的Dom元素,用来显现可视化的图表;
(2) 将 echartsis文件引入到<script>标签中,并在此标签中设置可视化图表的利用途径;
(3) 在ThingJS平台获得3D场景URL,操纵Javascript说话开辟3D动画,绑定切换层级事务;
(4) 在<script>标签内加载dom,初始化 ECharts图表,对回调函数中的 option做本性化数值设备。

连系Echarts、Ajax技术实现可视化大屏监控 ThingJS

支持开放性拜候

除了Echarts可视化技术可以展现数据监测的相关信息,ThingJS平台自带的CharterBuilder也供给响应的数据可视化模板,ThingJS开放性强,支持各类图表API接入开辟。【免费注册
自采用了Echarts可视化技术后,图形化的表示形式加倍了如指掌,也可以让用户加倍清楚、形象、直观的领会到所查询的信息,从而提升用户的体验感,清楚转达数据信息题目。

连系Echarts、Ajax技术实现可视化大屏监控 ThingJS


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则