ECharts是 Enterprise Charts缩写,示意商业级数据表图,它是一个基于html5 Canvas的图标库,能够晦涩的运行在PC和挪动设施上,兼容以后绝大部分浏览器 (E6/7/8/9/10/1, chrome, firefox, Sarari等),底层依赖轻量级的 Canvas类库 ZRender,创立了坐标系、图例、提醒、工具箱等根底组件,可能提供直观、活泼、可交互、可高度个性化定制的数据可视化图表。翻新的拖拽计算、数据视图、值域漫游等个性大大加强了用户体验,赋予了用户对数据进行开掘、整合的能力。

基于数据流设计

用户获取数据信息生成零碎所需的页面,须要通过登陆前台界面触发与后盾的交互,读取数据传输信息,因而须要设计一个数据流模型图,这里就不开展来讲。接下来,基于数据流设计,利用Echarts可视化技术实现可视化界面展示给用户。

可视化大屏利用案例解析

Echarts开发接入ThingJS的3D场景,打造三维可视化大屏利用,可实现空间数据分析可视化,即展现真切的三维场景,并且提供2D图表盘与3D场景的高度耦合,帮忙人们基于手动抉择场景,查看实时数据信息,更加迅速无效的认知、把握并了解信息。

在ThingJS的前端页面开发根底上,导入城市级3D场景和根底天文数据,引入了 ECharts插件,联合Ajax异步调用形式动静读取数据库,将数据信息用可视化的图形界面展现在前台。其中,3D场景利用Javascript语言开发交互事件,实现了对数据体系监控零碎的可视化动效开发,并可能通过良好的界面反对用户拜访操作、平安治理监控。

【3D演示地址】

应用ThingJS平台配置

(1) 在html文件中开拓一个如div、span之类的Dom元素,用来显示可视化的图表;

(2) 将 echartsis文件引入到标签中,并在此标签中配置可视化图表的应用门路;

(3) 在ThingJS平台获取3D场景URL,利用Javascript语言开发3D动画,绑定切换层级事件;

(4) 在标签内加载dom,初始化 ECharts图表,对回调函数中的 option做个性化数值设置。

反对开放性拜访

除了Echarts可视化技术可能展示数据监测的相干信息,ThingJS平台自带的CharterBuilder也提供相应的数据可视化模板,ThingJS开放性强,反对各种图表API接入开发。【收费注册】

自采纳了Echarts可视化技术后,图形化的表现形式更加高深莫测,也可能让用户更加分明、形象、直观的理解到所查问的信息,从而晋升用户的体验感,清晰传播数据信息问题。