小程序的图表（例子是柱状图）---wxCharts

1.下载wxcharts.js

2.小程序js页面引入，例如：var wxCharts = require('../../utils/wxcharts.js');  （路径要写对）

3.HTML

4.CSS

.pieCanvas{

  width:690rpx;

  height:452rpx;

  margin: 0 auto;

}

5.JS(因为图标默认展示是高清图，而且宽高不随着页面尺寸变化，所以需要自定义宽度)

var winWidth = wx.getSystemInfoSync().windowWidth;//获取窗口的宽度

    this.setData({

      width:winWidth

    })

动态设置数据

参数说明

//获取条形图数据

  getCusList: function (){

    var that = this;

    var categories = [];

    var valList = [];

    util.getRequestPromise(config.service.getCusStaData,'').then(data => {

      let result = data ? data : [];

      if (result.length > 0){

        result.forEach(function (item, i, arr) {

          categories.push(item.stateName);

          valList.push(item.count);

        });

        that.setData({

          categories: categories,

          valList: valList

        });

        that.echars(categories, valList);

      }

    });

  },

---

echars(categories, valList){

    new wxCharts({

      canvasId: 'columnCanvas',

      type: 'column',

      animation: true,

      categories: categories,

      series: [{

        data: valList,

        color: '#2A76FF',

        name: '状态分布（人）'

      }],

      yAxis: {

        disabled: true,

        min: 0,

        max:10,

      },

      animation: true,

      xAxis: {

        type: 'calibration',

        disableGrid: false,

      },

      extra: {

        column: {

          width: 15

        }

      },

      width: this.data.width-30,

      height: 190,

      legend: true,

    });

  },