一,先下载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!