wxecharts实现微信小程序的数据可视化

一，先下载wx-echarts.js插件

下载地址：https://github.com/xiaolin3303/wx-charts/issues/58

下载好之后将dist下的wxecharts.js或者wxecharts-min.js拷贝到建好的微信小程序的工程目录下

实质：微信api的画布与echarts的结合

二、创建一个微信小程序工程

工程目录如下：

二、将wxecharts-min.js放在utils下（可以随便放，知道导入的时候路径对就行）

index.js如下：
//首先引入wxcharts.js插件

var wxCharts = require("../../utils/wxcharts-min.js");

//定义记录初始屏幕宽度比例，便于初始化

var windowW = 0;

Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

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

        // 屏幕宽度
        this.setData({
                imageWidth: wx.getSystemInfoSync().windowWidth
  });
        console.log(this.data.imageWidth);

        //计算屏幕宽度比列
        windowW = this.data.imageWidth / 375;
        console.log(windowW);

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // columnCanvas
        new wxCharts({
                canvasId: 'columnCanvas',
                type: 'column',
                animation: true,
                categories: [2001, 2002, 2003, 2004, 2005],
        series: [{
            name: '成交量',
                    data: [15.00, 20.00, 45.00, 37.00],
            format: function (val, name) {
                return val.toFixed(2) + '万';
            }
        }, {
            name: '成交量',
                    data: [6.00, 9.00, 20.00, 45.00],
            format: function (val, name) {
                return val.toFixed(2) + '万';
            },

        }],
        yAxis: {
            format: function (val) {
                return val + '万';
            },
            title: 'hello',
                    min: 0
        },
        xAxis: {
            disableGrid: false,
                    type: 'calibration'
        },
        extra: {
            column: {
                width: 15
            }
        },
        width: (375 * windowW),
                height: (200 * windowW),
  });


    },
})

index.wxlm如下：

index.wxss如下：
.canvas {
width: 800rpx;
height: 1000rpx;
}
如此，微信小程序的数据可视化就完成啦，后续更新动态数据的数据可视化
good night！