1、组件导入

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

        图表组件链接：wx-charts/wxcharts.js at master · xiaolin3303/wx-charts · GitHub
        点进去，复制此js的全部内容，粘贴到wxcharts.js中。 

一、柱状图

        新建在pages下新建chart，包括chart.wxml，chart.wxss，chart.json，chart.js用于测试图表效果

 1、chart.wxml

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

2、chart.wxss

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

3、chart.js

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

    /**
     * 页面的初始数据
     */
    data: {
        imageWidth:0
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: 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
        });
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

4、接下来看看效果

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

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

 二、折线图

1、chart.wxml

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

2、chart.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'
            }
        });
    }
})

3、效果

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