wxcharts.js结合java后台在小程序中的使用（柱状图，其它同理）

1.把wxcharts.js拷贝进项目，放好位置，我一般放在utils下面（js百度可以自己搜下载）

2.从后台获取数据（括号自己部全）

页面引入这句即可

< canvas canvas-id= "columnCanvas" class= "canvas" bindtouchstart= "touchHandler"></ canvas >

var wxCharts = require('../../utils/wxcharts.js');      //根据自己放的位置写路径
var app = getApp();
var columnChart = null;
Page({
  data: {
    chartData:{}    
  },
  onLoad: function () {
    var that=this;
    //获取步数数据并存储
    wx.request({
      url: 'https://你的地址/gethistoryStep',
      data: { token:'根据自己情况传值'},
      success: function (res) {
        that.setData({
          chartData:res.data       //给data中赋值
        });
        that.landchart();     //加载插件，是写的一个加载插件的方法
      },
      fail: function () {

      }
    })

写好的加载插件的方法

landchart: function (e) {
    var windowWidth = 420;       //宽度
    try {
      var res = wx.getSystemInfoSync();     
      windowWidth = res.windowWidth;     //获取的屏幕宽度，自适应
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }

    columnChart = new wxCharts({
      canvasId: 'columnCanvas',           //在wxml中调用的id
      type: 'column',                    //定义是什么类型的图，这个为柱状图
      animation: true,
      categories: this.data.chartData.main.categories,    //调取data中的数据（x轴的），y轴是自适应
      series: [{
        name: '',
        data: this.data.chartData.main.data,            //调取data的数据，柱状图的数据
        format: function (val, name) {
          return val.toFixed(0);
        }
      }],
      yAxis: {
        format: function (val) {
          return val ;
        },
        title: '',
        min: 0
      },
      xAxis: {
        disableGrid: false,
        type: 'calibration'
      },
      extra: {
        column: {
          width: 25              //设置柱状图中，单个柱子的宽度
        }
      },
      width: windowWidth,         //上面的总宽度
      height: 300,                //设置柱状图的总高度
    });
  }

后台 我的类用的@RestController，所以返回会自动为json

@ApiOperation(value = "历史记录，个人近七日运动数据列表")
    @ApiImplicitParam(name = "token", value = "用户token", required = true, dataType = "String")
    @RequestMapping(value = "/gethistoryStep")
    public Map gethistory(String token) throws Exception{
        List<TMemberBase> user = us.findAllByToken(token);
        int uid = user.get(0).getMemberId();
        String[] cc = DateKit.getmanyDay(7);    //获取最近七天的时间，并显示成 MM-dd，DateKit是我自己写的处理时间的工具类，就不传了
        List<TWalk> all = ms.findAllByMemberIdAndRecordTimeAfter(uid, DateKit.parseDateTime(DateKit.getYearForDate(null)+"-"+ cc[0] + " 00:00:00"));
        //用的jpa，所以懂的话，看名字也知道，上面查询语句的意思
        int size = all.size();
        int aa[] = new int[7];
        //判断时间，当最近的运动和近七日的时间相同时，将步数存放到相应的位置
        for (int j = 0; j < 7; j++) {
            for (int i = 0; i < size; i++) {
                if(all.get(i).getRecordDate().substring(5).equals(cc[j])) {
                    aa[j] = all.get(i).getStepNum();
                    break;            
                }else{
                    aa[j] = 0;
                }
            }
        }         //要注意的就是这块，因为插件的数据有它调用的格式，所以返回前台的格式要正确
        Map map =new HashMap();
        Map map1 =new HashMap();
        map.put("main",map1);
        map1.put("title","步数图表");
        map1.put("data",aa);
        map1.put("categories",cc);

        return map;
    }

数据格式，这样就明白为什么要那样写map了

注：这里面可能会遇到一个调整宽高，并不能按自己想法来的情况

这时候，你可以在 wxss中加入  样式

.canvas{

margin-top: 10px;

width: 100%;

height: 270px; //这个，我是为了不显示下面方块，所以减了30px

}

完成收工