結合Echarts、Ajax技術實現可視化大屏監控 ThingJS 3d 開發

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可視化技術後，圖形化的表現形式更加一目瞭然，也可以讓用戶更加清楚、形象、直觀的瞭解到所查詢的信息，從而提高用戶的體驗感，清晰傳達數據信息問題。