最近做項目用到了ECharts 繪製圖表,這裏記錄下用到的資料。當前ECharts已經到了4.X版本,推薦直接使用最新版本,官方的文檔和說明已經相當完善,下邊簡單說下學習過程中會用到的頁面。詳細內容出門右轉官網~
1、瞭解ECharts 特性(https://echarts.baidu.com/feature.html)
ECharts,一個使用 JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定製的數據可視化圖表。
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖,用於統計的盒形圖,用於地理數據可視化的地圖、熱力圖、線圖,用於關係數據可視化的關係圖、treemap、旭日圖,多維數據可視化的平行座標,還有用於 BI 的漏斗圖,儀表盤,並且支持圖與圖之間的混搭。
除了已經內置的包含了豐富功能的圖表,ECharts 還提供了自定義系列,只需要傳入一個renderItem函數,就可以從數據映射到任何你想要的圖形,更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。
你可以在下載界面下載包含所有圖表的構建文件,如果只是需要其中一兩個圖表,又嫌包含所有圖表的構建文件太大,也可以在在線構建中選擇需要的圖表類型後自定義構建。
2、5 分鐘上手ECharts(https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)
獲取 ECharts: 你可以通過以下幾種方式獲取 ECharts。
-
從官網下載界面選擇你需要的版本下載,根據開發者功能和體積上的需求,我們提供了不同打包的下載,如果你在體積上沒有要求,可以直接下載完整版本。開發環境建議下載源代碼版本,包含了常見的錯誤提示和警告。
-
在 ECharts 的 GitHub 上下載最新的
release
版本,解壓出來的文件夾裏的dist
目錄裏可以找到最新版本的 echarts 庫。 -
通過 npm 獲取 echarts,
npm install echarts --save
,詳見“在 webpack 中使用 echarts”
3、ECharts 術語速查手冊(https://echarts.apache.org/zh/cheat-sheet.html)
快速瞭解功能名稱,幫助定位到配置項手冊
4、在線定製包體(https://echarts.baidu.com/builder.html)
可自由選擇所需圖表、座標系、組件進行打包下載,並且可對渲染引擎、兼容及壓縮問題進行設置