微信小程序统计图表插件wxcharts的使用汇总

微信小程序图表插件 wxcharts 的使用

使用前需要先导入

var wxCharts = require('../../common/wxcharts');
1

1.扇形图

在js文件中调用

 new wxCharts({
        canvasId: 'pieCanvas',
        type: 'pie',
        series: [{
            name: 'p1',
            data: 50,
        }, {
            name: 'p2',
            data: 30,
        }, {
            name: 'p3',
            data: 1,
        }, {
            name: 'p4',
            data: 1,
        }, {
            name: 'p5',
            data: 46,
        }],
        width: 360,
        height: 300,
        dataLabel: true
    });
    new wxCharts({
      canvasId: 'ringCanvas',
      type: 'ring',
      series: [{
          name: '成交量1',
          data: 15,
      }, {
          name: '成交量2',
          data: 35,
      }, {
          name: '成交量3',
          data: 78,
      }, {
          name: '成交量4',
          data: 63,
      }],
      width: 320,
      height: 200,
      dataLabel: false
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果图

2.圆环图

js文件

new wxCharts({
      canvasId: 'ringCanvas',
      type: 'ring',
      series: [{
          name: 'p1',
          data: 15,
      }, {
          name: 'p2',
          data: 35,
      }, {
          name: 'p3',
          data: 78,
      }, {
          name: 'p4',
          data: 63,
      }],
      width: 320,
      height: 200,
      dataLabel: false
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果图

3.折线图

new wxCharts({
    canvasId: 'lineCanvas',
    type: 'line',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: 'p1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }, {
        name: 'p2',
        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: 320,
    height: 200
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果图

4.柱形图

new wxCharts({
  canvasId: 'columnCanvas',
  type: 'column',
  categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
  series: [{
      name: 'p1',
      data: [15, 20, 45, 37, 4, 80]
  }, {
      name: 'p2',
      data: [70, 40, 65, 100, 34, 18]
  }],
  yAxis: {
      format: function (val) {
          return val + '万';
      }
  },
  width: 320,
  height: 200
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图

5.区域图

new wxCharts({
  canvasId: 'areaCanvas',
  type: 'area',
  categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
  series: [{
      name: 'p1',
      data: [70, 40, 65, 100, 34, 18],
      format: function (val) {
          return val.toFixed(2) + '万';
      }
  }, {
      name: 'p2',
      data: [15, 20, 45, 37, 4, 80],
      format: function (val) {
          return val.toFixed(2) + '万';
      }
  }],
  yAxis: {
      format: function (val) {
          return val + '万';
      }
  },
  width: 320,
  height: 200
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果图

6.雷达图

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

效果图