#  --- ## ECharts.js 介紹 --- - ECharts，他是一個使用 JavaScript 的圖形庫 - 底層依賴繪圖引擎[ZRender](https://ecomfe.github.io/zrender-doc/public/) --- ## ECharts.js 優點 --- 1. 容易上手：其語法類似 css 的參數配置型語法，學習門檻較低，且有[中文文檔](https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts) --- 2. 在 ECharts 4.0 以後同時支持 Canvas / SVG 渲染 --- 3. 開源免費的純 JavaScript 圖形庫 可以 CDN 引入 ECharts js ```script= script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.js"></script> ``` --- 4. 好看!!! ---  --- ## ECharts.js 缺點 --- 1. 自由度較差 --- 2. 代碼復用率低 --- ## ECharts.js 範例 --- [ECharts js 官網範例1](https://echarts.apache.org/examples/zh/index.html) [ECharts js 官網範例2](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all) --- ## vue-echarts [vue-echarts](https://github.com/ecomfe/vue-echarts)是封裝後的vue插件 --- ## 與其他可視化庫比較 --- ### [AntV G2](https://antv.alipay.com/zh-cn/index.html) - G2 (The Grammar of Graphics) 是一套基於可視化編碼的圖形語法 - 優點： - 簡易性和靈活性高 - 缺點： - 學習門檻較高，G2的定位不是一門開箱即用的框架 --- ### [Highcharts](https://www.highcharts.com/) - Highcharts是基於 SVG 的圖形庫 - 優點： - 兼容性好，可兼容到 IE6 - 缺點： - 要錢! --- ### [D3.js](https://d3js.org/) - D3 (Data-Driven Documents) 更接近底層，能直接操作 svg - 優點： - 掌握後，自由度極大 - 缺點： - 學習門檻高 --- ### 參考資料 - https://zhuanlan.zhihu.com/p/64118296 - https://www.jianshu.com/p/7792544e680c - https://zhuanlan.zhihu.com/p/29988515 --- ## Thanks !