怎么网站建设

" title="上一个案例"> " title="下一个案例">

怎么网站建设：wxecharts实现微信小程序的数据可视化

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

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

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

工程目录如下

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

index.js如下

var wxCharts require( ../../utils/wxcharts-min.js 
//定义记录初始屏幕宽度比例 便于初始化
var windowW 
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

npm安装依赖报错npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND 4480
ubuntu下启动数据库报错Plugin 'auth_socket' is not loaded解决办法 2510
爬虫项目报错Traceback (most recent call last): File D:/studay/python/one/day01/07_post请求.py , line 38, 2504