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

文章编号：1436 / 更新时间：2023-11-10 19:43:35 / 浏览：次
微信小程序统计图表插件wxcharts的使用汇总

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

使用前需要先导入

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

1.扇形图

在js文件中调用

new wxCharts({
        canvasId: 'pieCanvas',
        type: 'pie',
        series: [{
            name: 'p1',
           >            name: 'p2',
           >            name: 'p3',
           >            name: 'p4',
           >            name: 'p5',
           >        width: 360,
        height: 300,
       >    new wxCharts({
      canvasId: 'ringCanvas',
      type: 'ring',
      series: [{
          name: '成交量1',
         >          name: '成交量2',
         >          name: '成交量3',
         >          name: '成交量4',
         >      width: 320,
      height: 200,
     >

效果图

2.圆环图

js文件

new wxCharts({
      canvasId: 'ringCanvas',
      type: 'ring',
      series: [{
          name: 'p1',
         >          name: 'p2',
         >          name: 'p3',
         >          name: 'p4',
         >      width: 320,
      height: 200,
     >

效果图

3.折线图

new wxCharts({
    canvasId: 'lineCanvas',
    type: 'line',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: 'p1',
       >        format: function (val) {
            return val.toFixed(2) + '万';
        name: 'p2',
       >        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',
     >      name: 'p2',
     >  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',
     >      format: function (val) {
          return val.toFixed(2) + '万';
      name: 'p2',
     >      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',
     >  width: 320,
  height: 200,
  extra: {
      radar: {
          max: 150