微信小程序单一柱形图

 

这个就是最终的效果图

下面是我的代码，已经尽我所能的写完整了

 

 

//首先要引入wx-charts的文件才能使用柱形图
var Charts = require('../utils/wxcharts.js'); // 引入wx-charts.js文件

 

//因为代码量大我把代码封装在了utils.js中

function drawColumn(canvasid,arr,data,x,y){
  console.log('teshi测试一下');
  new Charts({
    canvasId: canvasid,
    type: 'column',
    animation: true,
    legend: false,
    dataPointShape: true,

    categories: arr,
    series: [
      {
        data:data,
      },

 

    ],
    yAxis: {
      disabled: true,
      gridColor: '#FFFFFF',
      min:0,
      max:30

    },
    xAxis: {
      disableGrid: true,

    },
    extra: {
      column: {
        width: 22,

      }
    },
    width: x,//canvas中柱状图的整体宽度
    height: y,//canvas中柱状图的整体高度

  });
}
将函数封装在utils.js中
导出
module.exports = {
 
  drawColumn: drawColumn,

 

}  

然后导入到相应的所需要的文件中

var drawColumn = util.drawColumn;

最后是调用方法

drawColumn('drawrect_one',['最高值','最低值'],[max,min],130,80);