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è)流程去做。