微信小程序+ECharts实现动态刷新的过程记录

更新时间：2021年05月07日 15:09:39 作者：海賊王的迷妹

这篇文章主要给大家介绍了关于微信小程序+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实现动态刷新的文章就介绍到这了,更多相关微信小程序+ECharts动态刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

再谈javascript注入黑客必备！
这篇文章主要为大家详细介绍了js注入，黑客之路必备！本文告诉大家js注入是什么，js注入攻防如何进行，感兴趣的小伙伴们可以参考一下
2016-09-09
HTML5canvas 绘制一个圆环形的进度表示实例
这篇文章主要介绍了HTML5canvas绘制一个圆环形的进度表示实例的相关资料,需要的朋友可以参考下
2016-12-12
微信小程序实现IP归属地获取功能
在日常开发中，后端主要提供数据以及处理业务逻辑，前端主要提供页面布局以及数据展示。本文主要介绍如何实现一个简单获取IP归属地的小程序，感兴趣的可以了解一下
2022-09-09
javascript抖动元素的小例子
这篇文章介绍了javascript抖动元素的小例子，有需要的朋友可以参考一下
2013-10-10
Js中parseInt的使用及注意事项
parseInt是一种字符串转数字的,下面这篇文章主要给大家介绍了关于Js中parseInt的使用及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
JSON.stringify(递归)与 JSON.parse(有限状态自动机)的实现代码
这篇文章主要介绍了JSON.stringify（递归）与 JSON.parse（有限状态自动机）的实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
javascript substr和substring用法比较
在js中substring和substr都是用来截取字符串的，那么substring和substr之间的具体区别在哪里，有没有区别呢，下面我来给各位详细引用一些实例来介绍这些问题
2009-06-06
调用jQuery滑出效果时闪烁的解决方法
这篇文章主要介绍了在调用jQuery 滑出效果时，层会现次闪烁一下的解决方法,需要的朋友可以参考下
2014-03-03
Javascript数组常用方法你都知道吗
这篇文章主要为大家详细介绍了Javascript数组常用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
2022-02-02
js仿手机页面文件下拉刷新效果
这篇文章主要为大家详细介绍了js仿手机页面文件的下拉刷新,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10