wx-charts微信小程序图表插件

wx-charts

微信小程序主流的图表工具

基于 Canvas，体积小

支持图表类型

• 饼图 pie
• 圆环图 ring
• 线图 line
• 柱状图 column
• 区域图 area
• 雷达图 radar

如何使用

1. 直接拷贝编译好的文件 dist/wxcharts-min.js 到项目中（js下载地址）

import wxCharts from '../../utils/wxcharts-min.js'

2. wxml 中定义

<canvas canvas-id="pieCanvas" disable-scroll="true" class="pieCanvas" style="width:300px; height:300px;">canvas>

canvas-id 与 new wxCharts({canvasId: ''}) 中的 canvasId 一致。

 

Demo

1. 饼图 pie

1.  
   new wxCharts({
2.  
   animation: true,
3.  
   canvasId: 'pieCanvas',
4.  
   type: 'pie',
5.  
   series: [{
6.  
   name: '成交量1',
7.  
   data: 15,
8.  
   }, {
9.  
   name: '成交量2',
10.  
    data: 35,
11.  
    }, {
12.  
    name: '成交量3',
13.  
    data: 78,
14.  
    }],
15.  
    width: 300,
16.  
    height: 300,
17.  
    })

2. 圆环图 ring

1.  
   new wxCharts({
2.  
   animation: true,
3.  
   canvasId: 'ringCanvas',
4.  
   type: 'ring',
5.  
   extra: {
6.  
   ringWidth: 25,
7.  
   pie: {
8.  
   offsetAngle: -45
9.  
   }
10.  
    },
11.  
    title: {
12.  
    name: '70%',
13.  
    color: '#7cb5ec',
14.  
    fontSize: 25
15.  
    },
16.  
    subtitle: {
17.  
    name: '收益率',
18.  
    color: '#666666',
19.  
    fontSize: 15
20.  
    },
21.  
    series: [{
22.  
    name: '成交量1',
23.  
    data: 15,
24.  
    stroke: false
25.  
    }, {
26.  
    name: '成交量2',
27.  
    data: 35,
28.  
    stroke: false
29.  
    }, {
30.  
    name: '成交量3',
31.  
    data: 78,
32.  
    stroke: false
33.  
    }, {
34.  
    name: '成交量4',
35.  
    data: 63,
36.  
    stroke: false
37.  
    }],
38.  
    disablePieStroke: true,
39.  
    width: 300,
40.  
    height: 300,
41.  
    dataLabel: false,
42.  
    legend: false,
43.  
    padding: 0
44.  
    })

 

3. 线图 line

 

1.  
   new wxCharts({
2.  
   canvasId: 'lineCanvas',
3.  
   type: 'line',
4.  
   categories: [ '2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10'],
5.  
   animation: true,
6.  
   series: [{
7.  
   name: '成交量1',
8.  
   data: [ 12, 10, 18, 16, 19, 13, 11, 10, 15, 14],
9.  
   format: function (val, name) {
10.  
    return val.toFixed( 2) + '万';
11.  
    }
12.  
    }, {
13.  
    name: '成交量2',
14.  
    data: [ 2, 0, 0, 3, null, 4, 0, 0, 2, 0],
15.  
    format: function (val, name) {
16.  
    return val.toFixed( 2) + '万';
17.  
    }
18.  
    }],
19.  
    xAxis: {
20.  
    disableGrid: true
21.  
    },
22.  
    yAxis: {
23.  
    title: '成交金额 (万元)',
24.  
    format: function (val) {
25.  
    return val.toFixed( 2);
26.  
    },
27.  
    min: 0
28.  
    },
29.  
    width: 300,
30.  
    height: 300,
31.  
    dataLabel: false,
32.  
    dataPointShape: true,
33.  
    extra: {
34.  
    lineStyle: 'curve'
35.  
    }
36.  
    })

 

4. 柱状图 column

 

1.  
   new wxCharts({
2.  
   canvasId: 'columnCanvas',
3.  
   type: 'column',
4.  
   animation: true,
5.  
   categories: [ '2012', '2013', '2014', '2015'],
6.  
   series: [{
7.  
   name: '成交量',
8.  
   data: [ 15, 20, 45, 37],
9.  
   format: function (val, name) {
10.  
    return val.toFixed( 2) + '万';
11.  
    }
12.  
    }],
13.  
    yAxis: {
14.  
    format: function (val) {
15.  
    return val + '万';
16.  
    },
17.  
    title: 'Column',
18.  
    min: 0
19.  
    },
20.  
    xAxis: {
21.  
    disableGrid: false,
22.  
    type: 'calibration'
23.  
    },
24.  
    extra: {
25.  
    column: {
26.  
    width: 15
27.  
    }
28.  
    },
29.  
    width: 300,
30.  
    height: 200,
31.  
    });

 

 

 

5. 区域图 area

1.  
   new wxCharts({
2.  
   canvasId: 'areaCanvas',
3.  
   type: 'area',
4.  
   categories: [ '1', '2', '3', '4', '5', '6'],
5.  
   animation: true,
6.  
   series: [{
7.  
   name: '成交量1',
8.  
   data: [ 32, 45, 0, 56, 33, 34],
9.  
   format: function (val) {
10.  
    return val.toFixed( 2) + '万';
11.  
    }
12.  
    }, {
13.  
    name: '成交量2',
14.  
    data: [ 15, 20, 45, 37, 4, 80],
15.  
    format: function (val) {
16.  
    return val.toFixed( 2) + '万';
17.  
    },
18.  
    }],
19.  
    yAxis: {
20.  
    title: '成交金额 (万元)',
21.  
    format: function (val) {
22.  
    return val.toFixed( 2);
23.  
    },
24.  
    min: 0,
25.  
    fontColor: '#8085e9',
26.  
    gridColor: '#8085e9',
27.  
    titleFontColor: '#f7a35c'
28.  
    },
29.  
    xAxis: {
30.  
    fontColor: '#7cb5ec',
31.  
    gridColor: '#7cb5ec'
32.  
    },
33.  
    extra: {
34.  
    legendTextColor: '#cb2431'
35.  
    },
36.  
    width: 300,
37.  
    height: 250
38.  
    });

 

6. 雷达图 radar

 

1.  
   new wxCharts({
2.  
   canvasId: 'radarCanvas',
3.  
   type: 'radar',
4.  
   categories: [ '1', '2', '3', '4', '5', '6'],
5.  
   series: [{
6.  
   name: '成交量1',
7.  
   data: [ 90, 110, 125, 95, 87, 122]
8.  
   }],
9.  
   width: 300,
10.  
    height: 200,
11.  
    extra: {
12.  
    radar: {
13.  
    max: 150
14.  
    }
15.  
    }
16.  
    });

 

参数说明

 

• opts                      Object
• opts.canvasId         String Required        对应wxml中的canvasId
• opts.type               String Required        图表类型，可选值为：pie、line、column、area、ring、radar
• opts.width             Number Required      canvas宽度，单位px
• opts.height            Number Required      canvas高度，单位px
• opts.legend           Boolean                   是否显示图表下方各类别的标识，默认true
• opts.background    String                      canvas背景颜色 ，默认#fff
• opts.animation       Boolean                  是否动画展示，默认true
• opts.enableScroll   Boolean                是否开启图表可拖拽滚动，默认false，支持 line、area 图表类型（需配合绑定scrollStart, scroll, scrollEnd 方法）
• opts.categories     Array Required        数据类别分类 (pie、ring 图表不需要)
• opts.dataLabel      Boolean                 是否在图表中显示数据内容值，默认true
• opts.dataPointShare  Boolean             是否在图表中显示数据点图形标识，默认true
• opts.xAxis            Object                   X轴配置
• opts.xAxis.gridColor  String                X轴网格颜色
• opts.xAxis.fontColor  String                X轴数据点颜色
• opts.xAxis.disableGrid   Boolean         不绘制X轴网格，默认false
• opts.xAxis.type     String                    可选值：calibration（刻度），默认包含样式
• opts.yAxis            Object                   Y轴配置
• opts.yAxis.format  Function                自定义Y轴文案显示
• opts.yAxis.min      Number                 Y轴起始值
• opts.yAxis.man     Number                 Y轴终止值
• opts.yAxis.title      String                   Y轴title
• opts.yAxis.gridColor  String               Y轴网格颜色
• opts.yAxis.fontColor  String               Y轴数据点颜色
• opts.yAxis.titleFontColor   String        Y轴title颜色
• opts.yAxis.disabled   Boolean            不绘制Y轴，默认false
• opts.extra             Object                 其它非通用配置项
• opts.extra.ringWidth   Number           ring圆环宽度，单位px
• opts.extra.lineStyle     String             仅对line、area图表有效，可选值：curve曲线、straight直线，默认straight
• opts.extra.column      Object             column图表相关配置
• opts.extra.column.width    Number     柱状图每项的图形宽度，单位px
• opts.extra.legendTextColor   String    legend文案颜色
• opts.series         Array Required        数据列表

数据列表series每项参数说明

• dataItem              Object 
• dataItem.data       Array Required        饼图、圆环图为Number数据，如果传入null，图表该处出现断点
• dataItem.color      String                     不传入则使用系统默认的配色方案
• dataItem.name     String                     数据名称
• dataItem.format   Function                 自定义显示数据内容

ring 图表相关配置

 

• opts.title                     Object                  仅支持 ring 图表类型
• opts.title.name             String                   标题内容
• opts.title.fontSize         Number                标题字体大小，单位px
• opts.title.color             String                   标题颜色
• opts.title.offsetX          Number                标题横向位置偏移量，单位px，默认0
• opts.subtitle                Object                  仅支持 ring 图表类型
• opts.subtitle.name        String                  副标题内容
• opts.subtitle.fontSize    Number               副标题字体大小，单位px
• opts.subtitle.color        String                  副标题颜色
• opts.subtitle.offsetX     Number               副标题横向位置偏移量，单位px，默认0

radar 图表相关配置

 

• opts.extra.radar                    Object        radar图表相关配置
• opts.extra.radar.max             Number       数据区间最大值，用于调整数据显示的比例，默认series data的最大值
• opts.extra.radar.labelColor     String         各项标识文案的颜色，默认#666
• opts.extra.radar.gridColor      String         雷达图网格颜色，默认#ccc

pie、ring 图表相关配置

 

• opts.disablePieStroke          Boolean       不绘制pie、ring图表各区块的白色分割线，默认false
• opts.extra.pie                     Object         pie、ring图表相关配置
• opts.extra.pie.offsetAngle    Number       起始角度偏移度数，顺时针方向，起点为3点钟位置（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可），默认0

官网

https://github.com/xiaolin3303/wx-charts