记录下微信小程序这边用的可视化图表插件 WXChart 可以在小程序端口这边把数据展示成图表 图表形式比较多样 引入也还算简单 项目地址是这个域名

https://github.com/xiaolin3303/wx-charts

引入出的效果有下面几种 安装完成之后可以按照样式自己选择

小程序这边 引入一下wxchart.js

var wxCharts = require("./utils/wxchart");

方法里的数据做展示用 暂时固定写了 如果需要有数据变动 在固定数值的地方 做下数据请求就ok

//图表测试方法 chartTest: function () { new wxCharts({ canvasId: 'columnCanvas', type: 'column', categories: ['2017', '2018', '2019', '2020', '2021'], series: [{ name: '成交量1', data: [15, 20, 45, 37, 4] }, { name: '成交量2', data: [70, 40, 65, 100, 34] }], yAxis: { format: function (val) { return val + '万'; } }, width: 330, height: 180 }); },

前端页面的方法也贴一下

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

显示出的效果是下面这样

官方还提供了一个小程序这边的Demo 其他样式可以下载官方Demo做微调

https://github.com/xiaolin3303/wx-charts-demo

保持好奇 不断进步 下期见~