微信小程序echarts实时更新
最近遇到了一个需求,就是要在小程序中实时刷新图表,最开始选择的是wx-chart,然后发现不能满足我的需求,最后选择了ECharts,也踩了一些坑,通过在网上收集资料,终于弄出来了,记录下我实现的过程。
1.首先到ECharts官网下载它的例子,然后把ec-canvas文件拷贝下来放到你自己的项目中:
2.然后在你需要用的页面引入,在xxx.json中加入,这里要注意路径,我的页面统一是放在pages文件夹中的:
"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
3.Ok,开始干正事了,我这里就举一个页面两个图表的例子,先把简单的布局和样式弄好
xxx.wxml:
需要提供两个canvas盒子:
<view class="content"><ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{{ ecOne}}"></ec-canvas><ec-canvas id="mychart-two" canvas-id="mychart-multi-two" ec="{{ ecTwo }}"></ec-canvas>
</view>
xxx.wxss:
.content {width: 100%;background-color: #F2F2F2;overflow-y: auto;
}
#mychart-one {position: absolute; top: 0;height: 50%;left: 0;right: 0;
}
#mychart-two {position: absolute; top: 50%;height: 50%;left: 0;right: 0;
}
这里值得注意的是,如果你想放三个图表,四个图表或者多个,一定要设canvas盒子的高度,要不然你会发现后面两个表咋不见了!!官方的多个图表没有设高度,所以我照官方的放了几个图,发现都没有,心累,找了半天,才发现是样式问题,索性每个盒子都设了50%的高度。
4.好了,准备条件都做足,接下来就是重头戏了,(其实我觉得我写的好繁琐,全是重复的代码,不过暂时也没时间整合了,有兴趣的朋友可以自己写方法整合一下啦)
xx.js
首先肯定就是要在页面最开始引入那个官方的组件了
import * as echarts from '../../ec-canvas/echarts';
先将表格要展示的样式配置之类的设好
function setOption(chart, xdata, ydata) {const option = {title: {text: '测试',padding: [10, 0, 0, 20],textStyle: {fontSize: 14,color: '#696969'},top: '10rpx'},backgroundColor: "#fff",color: ["#006EFF", "#67E0E3", "#9FE6B8"],animation: false,grid: {show: false},xAxis: {type: 'category',data: xdata, //x轴上的数据是动态的,所以我作为参数传进来axisLabel: {interval: 5, //x轴间隔多少显示刻度formatter: function (value) { //显示时间var date = new Date(value * 1000);var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());return h + m},fontSize: 8}},yAxis: {x: 'center',scale: true,type: 'value',axisLabel: {formatter: function (value) {var val = value / 1000000000 + 'G';return val}}},series: [{type: 'line',data: ydata, //y轴上的数据也是动态的,也作为参数传进来symbol: 'none',lineStyle: {width: 1}}]};chart.setOption(option)
}
page里面:
Page({data: {ecOne: {lazyLoad: true},ecTwo: {lazyLoad: true},timer:'' //因为我要实时刷新,所以设置了个定时器},onLoad: function (options) {var _this = this;this.getOneOption();this.getTwoOption();this.setData({ //每隔一分钟刷新一次timer: setInterval(function () {_this.getOneOption();_this.getTwoOption();}, 60000)})},onReady: function () { //这一步是一定要注意的this.oneComponent = this.selectComponent('#mychart-one'); this.twoComponent = this.selectComponent('#mychart-two');},onUnload: function () {clearInterval(this.data.timer)},init_one: function (xdata, ydata) { //初始化第一个图表this.oneComponent.init((canvas, width, height) => {const chart = echarts.init(canvas, null, {width: width,height: height});setOption(chart, xdata, ydata)this.chart = chart;return chart;});},init_two: function (xdata, ydata) { //初始化第二个图表this.storagemaxComponent.init((canvas, width, height) => {const chart = echarts.init(canvas, null, {width: width,height: height});setOption(chart, xdata, ydata)this.chart = chart;return chart;});},getOneOption: function () { //这一步其实就要给图表加上数据var _this = this;wx.request({url: 'https://xxxxxxx.com', //你请求数据的接口地址method: 'POST',header: {"Content-Type": "application/json"},data: { //传的参数,这些都不用多说了吧id:xxxx},success:function(res){//我这里就假设res.xdata和res.ydata是我们需要的数据,即在x轴和y轴展示的数据,记住一定是数组哦!_this.init_one(res.xdata,res.ydata)}}) },//第二个图表也是一样的处理getTwoOption: function (){ var _this = this;wx.request({url: 'https://xxxxxxx.com', //你请求数据的接口地址method: 'POST',header: {"Content-Type": "application/json"},data: { //传的参数,这些都不用多说了吧id:xxxx},success:function(res){_this.init_two(res.xdata,res.ydata)}}) }
})
好了,大概步骤就是这样,反正是需要动态变化就当做参数传进去,我这里在onUnload中清除了定时器,因为不清楚的话,你跳转到别的页面,你会发现还会一直请求,所以就要在离开这个页面之前清除定时器,也不是啥技术大牛,如果有更好的方法,盼望大神多多指正咯!哈哈哈
微信小程序echarts实时更新相关推荐
- 微信小程序运行及更新机制
微信小程序运行及更新机制 1.微信小程序运行机制 1.1 前台和后台 1.2 小程序启动:冷启动和热启动 1.3 小程序销毁 2.微信小程序更新机制 2.1 启动时同步更新 定期检查发现版本更新 用户 ...
- echarts异步数据加载MySQL_微信小程序 Echarts 异步数据更新
微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录. 作者:罗兵 地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0.效果图 1 ...
- 微信小程序echarts层级太高
项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...
- 微信小程序集成实时音视频通话功能
微信小程序集成实时音视频通话功能 背景 在项目的开发当中,很多时候,我们会有音频.视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现.尤其是这次的项目开发当中,需要在微信小程序当中 ...
- 微信小程序时间轴demo_微信小程序近期能力更新时间轴汇总
微信小程序近期能力更新频繁,作为第三方服务商,延誉宝CMS近期的升级也非常频繁.我们简单回顾一下具体时间节点. 几个主要的时间轴如下 2020-07-08 H5 跳转小程序能力公测 为满足 H5 和小 ...
- 微信小程序渲染实时时间
微信小程序渲染实时时间 1.看看在框架目录中是否有util文件夹,它用来存放工具栏的JavaScript函数 2.在要获取时间的.js文件中加载util.js文件 3.在onload方法中,调用uti ...
- 如何刷新微信服务器小程序版本,微信小程序版本自动更新
最近在做一个小程序每次更新版本之后都需要删除小程序,再次扫码进入才可以看到新版本,接下来吾爱编程为大家介绍一下微信小程序版本自动更新的方法,有需要的小伙伴可以参考一下: 1.启动机制: (1).热启动 ...
- 微信小程序使用实时播放音视频流
微信小程序使用实时播放音视频流需要先添加类目,不然会显示不符合开通条件,这是添加好类目之后的: 添加类目: 发现添加音视频设备的时候需要上传资质文件,而添加硬件与设备不需要,添加上硬件与设备类目后也可 ...
- 微信小程序版本自动更新用户感知提示方案总结
微信小程序版本自动更新用户感知提示方案总结 需求背景 最近基于uniapp开发微信小程序上线后,在迭代版本后期望自动更新提示. 使感知. 解决方案 使用全局唯一的对象: updateManager. ...
最新文章
- oracle bulk collect
- etcd 日志压缩_etcd集群备份和数据恢复以及优化运维
- oracle 对象管理 01_用户及权限
- linux定时任务Crond生产规范案例精讲09
- Oracle学习:新建表空间
- 三种常用的MySQL建表语句(转)
- python抓有趣的东西_Python 五个有趣的彩蛋,你都知道吗?
- 4170万元人民币的 绿坝 花季护航 预装1年软件,到底值不值
- 三星S9微信和服务器怎么连接,三星s9 微信在后台为什么收不到消息 | 手游网游页游攻略大全...
- netty 之 异步处理双子星io.netty.util.concurrent.Future与io.netty.util.concurrent.Promise
- GBase 8c 迁移工具 DMT 简述
- VxWorks学习笔记一 ------Bootrom和VxWorks镜像的引导
- web调用身份证读卡器品牌选择及技术实现
- HTTP Status 404 - The requested resource (/Test/loginSerlet) is not available.
- JavaScript设计模式 -发布订阅者模式
- android BannerView实现自动轮播广告的用法(参考自github)
- python将数据导出为csv文件时,出现PermissionError: [Errno 13] Permission denied:问题
- 红米k30 允许调用gpu调试层_红米击败自家小米,夺得性能榜第四,红米K30 Pro究竟靠什么?...
- MMLAB学习-Gard-CAM可视化方法
- 压力测试ab安装 linux,Centos8下安装ab压力测试工具及ab命令详解
热门文章
- 深入理解Linux网络技术内幕 第21章 传输
- Win10系统中看不到局域网电脑且服务里没有Computer Browser如何解决
- 【Java导出zip格式压缩包】
- springboot Scheduled
- Laravel学习笔记汇总——Collection方法详解
- iOS开发常用框架总览!
- Cannot nest 'PRJ/src/main/resource' inside 'PRJ/src'. To enable the nesting exclude 'main/' from 'PR
- mate40pro通过华为浏览器下载app后频繁重启问题。
- 九月十月 阿里 百度 华为 校招笔试题
- Argo CD 实践教程 08