試用Echarts圖表組件中的儀表盤

 ”ECharts是一款開源、功能強大的數據可視化產品，緊跟着大數據時代的步伐！希望ECharts在未來繼續發揚開源的力量，讓國內外更多的人用上這款數據可視化產品，為企業、社會創造更大的價值。”

---- 數盟社區創始人 · 興寶

 

這句從官網上看到的對Echarts組件特點的描述，是我最開始了解Echarts的動力。應着團隊項目需求，我被分配完成數據展示這塊兒的任務，也就用到了Echarts組件，以下是一些實現流程和應用這種圖表型js的感受。

 

項目需求：

在主頁一個div中對后台警告數據進行圖表化展示，鼠標移入可以顯示出信息，點擊后彈出警告數據的具體內容，點擊關閉后回到主頁面。

 

思路分析：

1.從Echarts.js特點出發，提供運行環境，這里就是在其函數作用之前設置畫板大小。

2.在前端通過Ajax技術得到要展示的弱類型數據。

3.從Echarts組件中確定圖表類型，使數據可以得到最科學的表達。

4.依據Echarts圖表組件特點實現前端效果，調通前后端，實現需求。

 

實現步驟：

1.在頁面定義空白帶id的div：

 

2.在javascript中設置大小：

 

3.在頁面引入echarts所依賴的echarts.min.js函數

 

4..根據圖表的類型完成圖表展示效果：

 

5.具體信息的顯示：

 

 

展示效果：

   

 

 

 

使用感受：

1.echarts.min.js大小為602KB，移入方便

2.圖表參數option選項較多，可操作性很強，需要花精力

3.整體流程很固定（前端基本都是這個特點）

4.Echarts圖表類型很多，效果很炫