微信小程序绘制图表（折线图、柱状图）

1.组件导入
在miniprogram下的utils文件夹（若没有就新建一个）下，新建wxcharts.js

图表组件链接：https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js
点进去，复制此js的全部内容，粘贴到wxcharts.js中。
2.柱状图
新建在pages下新建test，包括test.wxml，test.wxss，test.json，test.js用于测试图表效果

test.wxml

<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>

test.wxss

.canvas {
    width: 750rpx;
    height: 500rpx;
}

text.js

var wxCharts = require("../../utils/wxcharts.js");//相对路径
Page({

  data:{
    imageWidth:0
  },
  onLoad:function(){

   
  },
  onShow:function(){
    new wxCharts({
      canvasId: 'columnCanvas',
      type: 'column',
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
          name: '成交量1',
          data: [15, 20, 45, 37, 4, 80]
      }],
      yAxis: {
          format: function (val) {
              return val + '万';
          },
          /*max:400,
          min:0*/
      },
      width: 320,
      height: 200
  });
  }

})

效果：

若像取消柱状图每条顶部的数字显示，在wxcharts.js中修改，将这行注释掉即可

修改后，柱状图不再显示数值

2.折线图
test.wxml

<canvas
 style="width: 400px; height: 500px;"
 canvas-id="yueEle"
 binderror="canvasIdErrorCallback"
></canvas>

test.js

var wxCharts = require("../../utils/wxcharts.js");
var yuelineChart=null;
Page({

  data:{
    imageWidth:0
  },
  onLoad:function(){

   
  },
  onShow:function(){
    var windowWidth = 320;
  try {
   var res = wx.getSystemInfoSync();
   windowWidth = res.windowWidth;
  } catch (e) {
   console.error('getSystemInfoSync failed!');
  }
  yuelineChart = new wxCharts({ //当月用电折线图配置
   canvasId: 'yueEle',
   type: 'line',
   categories: ['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'], //categories X轴
   animation: true,
   series: [{
    name: 'A',
    data: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 8, 2, 4, 9, 8, 7],
    format: function (val, name) {
     return val + '';
    }
   }, {
    name: 'B',
    data: [0, 6, 2, 2, 7, 6, 2, 5, 8, 1, 8, 4, 0, 9, 7, 2, 5, 2, 8, 2, 5, 2, 9, 4, 4, 9, 8, 5, 5, 5, 6],
    format: function (val, name) {
     return val + '';
    }
   },
   ],
   xAxis: {
    disableGrid: true
   },
   yAxis: {
    title: '数值',
    format: function (val) {
     return val;
    },
    /*max: 20,*/
    min: 0
   },
   width: windowWidth,
   height: 200,
   dataLabel: false,
   dataPointShape: true,
   extra: {
    lineStyle: 'curve'
   }
  });
  }
})

效果

不设置min和max时，默认y轴最小值为数据最小值，y轴最大值为数据最大值。有时，数据的变动幅度过大会显得不美观，就像上图。那么我们可以修改y轴的min和max值。
将test.js中y轴的max改为20，min改为-5后，图表更加美观。