ECharts，一個使用 JavaScript 實作的開源可視化庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器(IE8/9/10/11，Chrome，Firefox，Safari等)。
底層依賴輕量級的矢量圖形庫 ZRender，提供直覺，互動豐富，可高度個性化定制的資料可視化圖表。
接下來将為大家介紹如何使用echarts制作餅狀圖，案例的全過程：
從echarts檔案下載下傳到最終頁面的展示，都會為大家一一展示，跟着我們的步驟，讓大家輕松制作echarts
1. 【下載下傳echarts檔案】
下載下傳網址：https://www.echartsjs.com/download.html
或公衆号回複“echarts文本”
2. 官方提供了API和配置項查找方式等文檔
1)在echarts官網，點選頂部菜單【文檔】，在下拉菜單中點選【配置項手冊】
2)在“配置項手冊”頁面，有各種圖形的詳細配置項與使用方式介紹
3)當需要使用某種圖形，又不知道有哪些屬性可以使用時，可以在此頁面找到使用方式
3. 官方執行個體使用方式
1)在echarts官網，點選頂部菜單的【執行個體】，在下拉菜單中點選【官方執行個體】
2)在左側菜單是echarts支援的各種類型的圖表，例如：折線圖、柱狀圖、餅圖、散點圖、地圖、K線圖等等
3)點選左側菜單的類型，如餅圖，在右側會顯示各種餅圖執行個體，按照實際需要，點選對應圖形即可進入明細頁
4)在具體圖形的明細頁，左側是echarts圖形的js配置項，右側是運作效果展示，可以修改左側配置，點選【運作】即可實時看到效果
在左側選項中，選擇一個資料圖表的類型
4. 建立如下結構的測試頁面(以餅圖為例示範)
1) 把下載下傳echarts的檔案和html、css檔案放到項目中。
為了友善大家觀看，并沒有按照項目層次結構進行分類。把所有不同類型的檔案放到了一起。
2)建立項目檔案夾，如下結構的測試檔案
5. 在echart-lovo.html檔案中添加餅圖的占位dom，并将echarts.js和echarts-lovo.js檔案引用到頁面中。
6. 設定DOM節點尺寸
7. 渲染echarts餅狀圖
1)将上面第3步中的餅圖的“坐标軸刻度與标簽對齊”詳細界面左側的js代碼複制到EchartsBar頁面
2)将複制的js與目前頁面關聯
3)為了在一個圖中顯示完整，此處調整了js的格式，是以看起來格式稍微與複制的有一點不一樣
4)實際項目中：按照上面第2步中的各個配置項修改為實際項目需要的樣子即可
8. echarts預設餅圖運作效果如下(直接使用谷歌浏覽器(Chrome)打開echarts-lovo.html檔案即可運作)
以上就是今天的分享啦~
如果大家有問題或者想了解更多的
技術幹貨可以私信發送【微信】加朗妹兒微信喲~