微信小程序柱状图的使用

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

仅供参考

粘贴 https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js  复制里面的js

 视图层代码

wxss文件

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

js文件：

1. 先引入柱状图核心类

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

2.在小程序onshow监听页面函数中加载柱状图展示

new wxCharts({
      canvasId: &＃39;columnCanvas&＃39;,
      type: &＃39;column&＃39;,
      categories: [&＃39;06:00:00&＃39;, &＃39;07:00:00&＃39;, &＃39;08:00:00&＃39;, &＃39;09:00:00&＃39;, &＃39;10:00:00&＃39;, &＃39;11:00:00&＃39;],
      series: [{
        name: &＃39;跑步量&＃39;,
        data: [1200, 3000, 4500, 3700, 400, 8044]
      }],
      yAxis: {
        format: function (val) {
          return val + &＃39;步&＃39;;
        },
        /*max:400,
        min:0*/
      },
      width: 320,
      height: 200
    });

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

1.2 掌握折线图展示

wxml页面：

js文件：

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


1. 在小程序onshow监听页面函数中加载折线图展示

var windowWidth = 320;try {var res = wx.getSystemInfoSync();windowWidth = res.windowWidth;} catch (e) {console.error(&＃39;getSystemInfoSync failed!&＃39;);}yuelineChart = new wxCharts({ //当月用电折线图配置canvasId: &＃39;yueEle&＃39;,type: &＃39;line&＃39;,categories: [&＃39;1&＃39;, &＃39;2&＃39;, &＃39;3&＃39;, &＃39;4&＃39;, &＃39;5&＃39;, &＃39;6&＃39;, &＃39;7&＃39;, &＃39;8&＃39;, &＃39;9&＃39;, &＃39;10&＃39;, &＃39;11&＃39;, &＃39;12&＃39;, &＃39;13&＃39;, &＃39;14&＃39;, &＃39;15&＃39;, &＃39;16&＃39;, &＃39;17&＃39;, &＃39;18&＃39;, &＃39;19&＃39;, &＃39;20&＃39;, &＃39;21&＃39;, &＃39;22&＃39;, &＃39;23&＃39;, &＃39;24&＃39;, &＃39;25&＃39;, &＃39;26&＃39;, &＃39;27&＃39;, &＃39;28&＃39;, &＃39;29&＃39;, &＃39;30&＃39;, &＃39;31&＃39;], //categories X轴animation: true,series: [{name: &＃39;A&＃39;,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 + &＃39;&＃39;;}}, {name: &＃39;B&＃39;,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 + &＃39;&＃39;;}}, ],xAxis: {disableGrid: true},yAxis: {title: &＃39;数值&＃39;,format: function (val) {return val;},/*max: 20,*/min: 0},width: windowWidth,height: 200,dataLabel: false,dataPointShape: true,extra: {lineStyle: &＃39;curve&＃39;}});


效果图：

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