UNIAPP微信小程序使用Echarts

UNIAPP微信小程序使用Echarts

1. 前言

​ 最近要在uniapp做的小程序中使用echarts，网上搜了很多教程都很麻烦，这里提供一种简便快捷CV方案。

​ 先说下图表选型的问题，如果你只用于微信小程序，可以使用本方案，Echarts丰富多样的图表和广大的开源图库都已使用。如果要考虑兼容性问题，比如兼容支付宝小程序、APP、百度小程序……这里推荐使用uchart。缺点就是图表样式没有Echarts丰富。

2. 下载EchartsForWx插件

需要首先确保本机安装了Hbuilder

1. 打开插件市场的**echarts-for-wx**插件。点击使用Hbuilder导入插件。

2. 导入插件后，在项目目录会有一个js_sdk的文件夹生成。复制js_sdk下的uni-ec-canvas到根目录的components目录。

3. 自定义Echarts组件

​ 在根目录的components文件夹下此时已经有了一个uni-ec-canvas的组件。我们这里新建一个pieChart的组件。

​ 组件内容如下

4. 使用组件

5. 效果图

6. Echarts各式各样的定制化图表

1. Made A Pie https://madeapie.com 复刻Make A Pie
2. Echarts社区makeapie https://www.makeapie.cn/echarts 复刻Make A Pie
3. MCChart http://echarts.zhangmuchen.top/#/index
4. PPChart http://ppchart.com/
5. ISQQW https://www.isqqw.com/homepage
6. chartsdev http://chartsdev.com/ 复刻Make A Pie