微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个。
wx-charts基于canvas绘制的微信小程序图表插件
支持图表类型
饼图pie 线图line 柱状图column 区域图area高清显示
设置canvas的尺寸为2倍大小，然后缩小到50%，建议都进行这样的设置，图表本身绘制时是按照高清显示配置的，不然整体效果会偏大
/* 例如设计图尺寸为320 x 300 */.canvas {width: 640px;height: 600px;transform: scale(0.5)}
wx-charts参数说明
optsObject
opts.canvasIdStringrequired微信小程序canvas-id
opts.widthNumberrequiredcanvas宽度，单位为px
opts.heightNumberrequiredcanvas高度，单位为px
opts.typeStringrequired图表类型，可选值为pie,line,column,area
opts.categoriesArrayrequired(饼图不需要)数据类别分类
opts.dataLabelBoolean defaulttrue是否在图表中显示数据内容值
opts.yAxisObject Y轴配置
opts.yAxis.formatFunction 自定义Y轴文案显示
opts.yAxis.minNumber Y轴起始值
opts.yAxis.titleString Y轴title
opts.seriesArrayrequired数据列表
数据列表每项结构定义
dataItemObject
dataItem.dataArrayrequired(饼图为Number)数据
dataItem.colorString 例如#7cb5ec不传入则使用系统默认配色方案
dataItem.nameString 数据名称
dateItem.formatFunction 自定义显示数据内容
wx-charts图表插件示例
饼图pie chart
var Charts = require('charts.js');new Charts({canvasId: 'pieCanvas',type: 'pie',series: [{name: '成交量1',data: 15,}, {name: '成交量2',data: 35,}, {name: '成交量3',data: 78,}, {name: '成交量4',data: 63,}],width: 640,height: 400,dataLabel: false});
线图line chart
new Charts({canvasId: 'lineCanvas',type: 'line',categories: ['', '', '', '', '', ''],series: [{name: '成交量1',data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],format: function (val) {return val.toFixed(2) + '万';}}, {name: '成交量2',data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],format: function (val) {return val.toFixed(2) + '万';}}],yAxis: {title: '成交金额 (万元)',format: function (val) {return val.toFixed(2);},min: 0},width: 640,height: 400});
柱状图columnChart
new Charts({canvasId: 'columnCanvas',type: 'column',categories: ['-08', '-09', '-10', '-11', '-12', ''],series: [{name: '成交量1',data: [15, 20, 45, 37, 4, 80]}, {name: '成交量2',data: [70, 40, 65, 100, 34, 18]}, {name: '成交量3',data: [70, 40, 65, 100, 34, 18]}, {name: '成交量4',data: [70, 40, 65, 100, 34, 18]}],yAxis: {format: function (val) {return val + '万';}},width: 640,height: 400,dataLabel: false});
区域图areaChart
new Charts({canvasId: 'areaCanvas',type: 'area',categories: ['-08', '-09', '-10', '-11', '-12', ''],series: [{name: '成交量1',data: [70, 40, 65, 100, 34, 18],format: function (val) {return val.toFixed(2) + '万';}}, {name: '成交量2',data: [15, 20, 45, 37, 4, 80],format: function (val) {return val.toFixed(2) + '万';}}],yAxis: {format: function (val) {return val + '万';}},width: 640,height: 400});
原文地址：/xiaochengxu/wx-charts.html
