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

微信小程序统计图表插件wxcharts的使用汇总微信小程序图表插件wxcharts的使用使用前需要先导入varwxCharts=require(‘../../common/wxcharts’);1.扇形图在js文件中调用newwxCharts({canvasId:’pieCanvas’,type:’pie’,series:[{name:’p1′,data:50,},{n

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

使用前需要先导入

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

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
  });

效果图

在这里插入图片描述

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
  });

效果图

在这里插入图片描述

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
});

效果图

在这里插入图片描述

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
});

效果图

在这里插入图片描述

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
});

效果图

在这里插入图片描述

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
      }
  }
});

效果图

在这里插入图片描述

今天的文章微信小程序统计图表插件wxcharts的使用汇总分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30928.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注