wx-charts基于canvas绘制的微信小程序图表插件
支持图表类型
- 饼图 pie
*线图 line
*柱状图 column
*区域图 area
高清显示
设置canvas的尺寸为2倍大小,然后缩小到50%,建议都进行这样的设置,图表本身绘制时是按照高清显示配置的,不然整体效果会偏大
- /* 例如设计图尺寸为320 x 300 */
- .canvas {
- width: 640px;
- height: 600px;
- transform: scale(0.5)
- }
wx-charts参数说明
- opts Object
- opts.canvasId String required 微信小程序canvas-id
- opts.width Number required canvas宽度,单位为px
- opts.height Number required canvas高度,单位为px
- opts.type String required 图表类型,可选值为pie, line, column, area
- opts.categories Array required (饼图不需要) 数据类别分类
- opts.dataLabel Boolean default true 是否在图表中显示数据内容值
- opts.yAxis Object Y轴配置
- opts.yAxis.format Function 自定义Y轴文案显示
- opts.yAxis.min Number Y轴起始值
- opts.yAxis.title String Y轴title
- opts.series Array required 数据列表
数据列表每项结构定义
- dataItem Object
- dataItem.data Array required (饼图为Number) 数据
- dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案
- dataItem.name String 数据名称
- dateItem.format Function 自定义显示数据内容
wx-charts图表插件示例
饼图pie chart
- var Charts = require('charts.js');
- new Charts({
- canvasId: 'pieCanvas',
- type: 'pie',
- series: [{
- name: '成交量1',
- data: 15,
- }, {
- name: '成交量2',