本文实例讲述了微信小程序图表插件wx-charts用法。分享给大家供大家参考，具体如下：
微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个
支持图标类型
- 饼图 pie
- 圆环图 ring
- 线图 line
- 柱状图 column
- 区域图 area
- 雷达图 radar
如何使用？
1. 直接引用编译好的文件 dist/charts.js（js下载地址）
.wxml中定义
canvas-id与new wxCharts({canvasId:”})中canvasId一致
2. 命令行
参数说明
| opts | Object | |
| opts.canvasId | String required | 微信小程序canvas-id |
| opts.width | Number required | canvas宽度，单位为px |
| opts.height | Number required | canvas高度，单位为px |
| opts.title | Object | (only for ring chart) |
| opts.title.name | String | 标题内容 |
| opts.title.fontSize | Number | 标题字体大小（可选，单位为px） |
| opts.title.color | String | 标题颜色（可选） |
| opts.subtitle | Object | (only for ring chart) |
| opts.subtitle.name | String | 副标题内容 |
| opts.subtitle.fontSize | Number | 副标题字体大小（可选，单位为px） |
| opts.subtitle.color | String | 副标题颜色（可选） |
| opts.animation | Boolean default true | 是否动画展示 |
| opts.legend | Boolen default true | 是否显示图表下方各类别的标识 |
| opts.type | String required | 图表类型，可选值为pie, line, column, area…… |
| opts.categories | Array required | (饼图、圆环图不需要) 数据类别分类 |
| opts.dataLabel | Boolean default true | 是否在图表中显示数据内容值 |
| opts.dataPointShape | Boolean default true | 是否在图表中显示数据点图形标识 |
| opts.xAxis | Object | X轴配置 |
| opts.xAxis.disableGrid | Boolean default false | 不绘制X轴网格 |
| opts.yAxis | Object | Y轴配置 |
| opts.yAxis.format | Function | 自定义Y轴文案显示 |
| opts.yAxis.min | Number | Y轴起始值 |
| opts.yAxis.max | Number | Y轴终止值 |
| opts.yAxis.title | String | Y轴title |
| opts.yAxis.disabled | Boolean default false | 不绘制Y轴 |
| opts.series | Array required | 数据列表 |
数据列表每项结构定义
| dataItem | Object |
| dataItem.data | Array required (饼图、圆环图为Number) 数据 |
| dataItem.color | String 例如#7cb5ec 不传入则使用系统默认配色方案 |
| dataItem.name | String 数据名称 |
| dateItem.format | Function 自定义显示数据内容 |
详见demo（具体demo git地址）
1.pie
2. ring
3. line
4. column
5. area
6.radar
本人是自己查阅资料自己整理，希望对自己和有问题的你们都有帮