使用ec画布在微信小程序中制作圆形饼图

ECharts是一个用JavaScript实现的开源可视化库，可以在PC和移动设备上流畅运行，并且与大多数当前浏览器兼容。ECharts提供直观、交互式和高度个性化的数据可视化图表。

在微信小程序中，如果我们有同样的需求，我们可以立即想到使用echarts。不过，echarts的官方网站上没有小程序版本。幸运的是，上帝已经发布了一个微信小程序版本。让我们体验一下吧！

1.首先下载echarts微信版本

地址：[

下载后的文件夹结构如图所示

2.用微信开发者工具打开下载的文件，你会发现许多图表供参考

如果您需要任何图表，您可以转到页面查找相应图表的代码以供参考

3.以下步骤用于完成自己的图表

1.首先，创建一个新的小程序项目，或者直接在自己的项目上操作。我创建了一个新项目。

2.将下载文件夹中的ec画布放到项目中。路径可以基于你自己的习惯。然后拿你需要的图表。今天，以饼图为例，我发现与饼图对应的页面中的文件夹是下载文件中的饼图。于是，我把饼图文件夹放在项目页面上。手术后，我的项目结构是这样的。

3.由于每个人放置ec canvas文件夹的路径可能不同，您可以根据自己的情况修改文件路径。有两件事需要修改，即索引。js和索引。json位于pie文件夹下。

4.看看json文件中的app，页面数组中是否有对应的“pages/pie/index”。如果没有，请手动添加。然后将“pages/pie/index”放在页面数组的第一项中，饼图就准备好了。

5.但有一个小洞需要注意。刷新后，饼图不显示，而是空白。检查页面结构后，发现饼图画布的高度为0，因为它位于wxss中饼图下的索引中，ec画布的默认高度为100%，因此将ec画板的高度更改为固定值是很好的。我把它改成500rpx。下面是我的效果。

6.当然，每个人的需求都不同。您可以使用饼图文件夹下的索引。可以在js中修改饼图的各种配置项。配置项目可以参考echarts的官方配置文件，不再详细描述。

地址：[

总结

根据这个过程，你可以制作自己的圆形饼图。如果您需要其他图表，也可以遵循此过程。