小程序图表绘制库
程序 绘制 图表
2023-09-11 14:19:38 时间
1. ECharts 的微信小程序版本 (echarts-for-weixin )
https://github.com/ecomfe/echarts-for-weixin
2.wx-charts (https://github.com/xiaolin3303/wx-charts )
第一个比较全,功能强,但是700kb有些大;第二个,只用引入一个js文件就可以了,小一点30kb.
下面是一个 wx-charts的例子;
wxss:
/*步数曲线框开始*/ .run_charts_box{ box-sizing: border-box; width: 100%; height: 500rpx; } .canvas { width: 100%; height: 180px; } /*步数曲线框结束*/
wxml:
<!--微信步数曲线图绘制--> <view class="run_charts_box"> <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas> </view>
js:
/** * 步数曲线绘制 */ runLlineCanva:function(){ let windowWidth = 320; try { let res = wx.getSystemInfoSync(); windowWidth = res.windowWidth; } catch (e) { // do something when get system info failed } new Charts({ canvasId: 'lineCanvas', type: 'line', categories: ['2012', '2013', '2014', '2015', '2016', '2017'], series: [{ name: '每日步数', data: [2, 1000, 5000, 2562, 50000, 100], format: function (val) { return val + '步'; } }], yAxis: { //title: '步数', format: function (val) { return val; }, min: 0 }, width: windowWidth - 10, //canvas宽度,单位为px height: 180, //canvas高度,单位为px dataLabel: true, //是否在图表中显示数据内容值 legend: false, //是否显示图表下方各类别的标识 background: '#f5f5f5', padding: 0 }); }
把wxcharts-min.js复制到,utils文件夹中,
在页面js文件最上面引入库: let Charts = require('../../../utils/wxcharts-min.js');//绘制图表库
然后再onShow中调用:
this.runLlineCanva();//步数曲线图绘制
ECharts的参考文章:
https://github.com/ecomfe/echarts-for-weixin
https://cloud.tencent.com/developer/article/1450181
https://www.jb51.net/article/163896.htm
wx-charts的参考文章:
https://github.com/xiaolin3303/wx-charts
https://www.cnblogs.com/dudu123/p/10400806.html
https://www.cnblogs.com/zxf100/p/9956415.html
相关文章
- Xcode中iOS模拟器程序中的plist路径
- 我的第一个Go web程序 纪念一下
- 在微信小程序中绘制图表(part2)
- 获取项目程序集,排除所有的系统程序集(Microsoft.***、System.***等)、Nuget下载包
- 在JAVA程序中处理输入参数
- 微信小程序----动态设置导航栏标题
- 在线预约小程序搭建教程9-预约页面
- 客户关系管理小程序实战教程01-需求分析
- 微搭低代码开发设备巡检小程序
- [转载]用VB编写一个聊天程序!_彭世瑜_新浪博客
- win10 程序管理员权限读写文件和界面无法拖入的情况解决
- 小程序搭建
- Android培训班(86)内核运行之前的引导程序
- windows程序消息机制(Winform界面更新有关)
- 电商小程序实战教程-商品详情页开发