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文件引入到script標簽中,並在此標簽中配置可視化圖表的使用路徑;
(3) 在ThingJS平台獲取3D場景URL,利用Javascript語言開發3D動畫,綁定切換層級事件;
(4) 在script標簽內加載dom,初始化 ECharts圖表,對回調函數中的 option做個性化數值設置。
支持開放性訪問
除了Echarts可視化技術能夠展現數據監測的相關信息,ThingJS平台自帶的CharterBuilder也提供相應的數據可視化模板,ThingJS開放性強,支持各種圖表API接入開發。【免費注冊】
自采用了Echarts可視化技術后,圖形化的表現形式更加一目了然,也能夠讓用戶更加清楚、形象、直觀的了解到所查詢的信息,從而提升用戶的體驗感,清晰傳達數據信息問題。