ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫带污，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上闰蛔，兼容當(dāng)前絕大部分瀏覽器痕钢，提供直觀，交互豐富序六，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表任连。
在微信小程序中，如果我們有同樣的需求例诀，立馬就能想到用echarts随抠，可是echarts官網(wǎng)沒有小程序版，好在已經(jīng)有大神發(fā)布了微信小程序版本繁涂，讓我們體驗(yàn)一下拱她！
1、首先下載echarts微信版
地址：[https://github.com/ecomfe/echarts-for-weixin]
-
下載后文件夾結(jié)構(gòu)如圖所示
2扔罪、將下載的文件用微信開發(fā)者工具打開秉沼，會(huì)發(fā)現(xiàn)里邊有很多圖表可供參考
-
如果需要什么圖，可以去pages中找對(duì)應(yīng)圖表的代碼進(jìn)行參考學(xué)習(xí)
3步势、下面就是使用了氧猬，按如下步驟，就可以完成自己的圖表了
1坏瘩、先新建一個(gè)小程序項(xiàng)目盅抚，或者在自己的項(xiàng)目上直接操作，我是新建了一個(gè)項(xiàng)目倔矾。
-
2妄均、把下載的文件夾中的ec-canvas放入到項(xiàng)目中柱锹，路徑根據(jù)自己的習(xí)慣就可以，然后把自己需要的圖表拿過來丰包，今天以餅圖為例禁熏，在下載的文件中，我發(fā)現(xiàn)餅圖對(duì)應(yīng)的pages中的文件夾是pie邑彪，所以我把pie文件夾拿過來瞧毙，放到項(xiàng)目的pages中，操作完成后我的項(xiàng)目結(jié)構(gòu)是這樣的寄症。
3宙彪、由于每個(gè)人放ec-canvas文件夾的路徑可能都不太一樣，所以大家根據(jù)自己的情況去修改文件路徑有巧，有兩個(gè)地方需要修改释漆，分別是pie文件夾下的index.js和index.json。
-
4篮迎、看一下app.json文件中男图，pages數(shù)組中里面有沒有對(duì)應(yīng)的“pages/pie/index”，若沒有甜橱，就手動(dòng)添加逊笆，然后把“pages/pie/index”放到pages數(shù)組的第一項(xiàng)中，餅圖就制作好了渗鬼。
-
5览露、但是這里有個(gè)小坑需要注意一下，刷新之后并沒有看到餅圖顯示譬胎，而是一片空白差牛，檢查頁面結(jié)構(gòu)發(fā)現(xiàn)，餅圖canvas的高度是0堰乔，原因是在pie下的index.wxss中偏化，ec-canvas的默認(rèn)高度是100%，所以把ec-canvas的height改成一個(gè)固定數(shù)值就好了镐侯，我改為了500rpx侦讨，如下是我做的效果。
6苟翻、當(dāng)然韵卤，每個(gè)人的需求都不太一樣，可以在pie文件夾下的index.js里修改餅圖的各種配置項(xiàng)崇猫，配置項(xiàng)可以參考echarts的官方配置文檔沈条，就不再詳細(xì)說明了。
地址：[https://echarts.apache.org/zh/option.html#title]
最后總結(jié)一下：
根據(jù)這個(gè)流程诅炉，就可以制作出自己需要的環(huán)狀餅圖了蜡歹，如果大家需要其他的圖屋厘，也可以根據(jù)這個(gè)流程去做。
