怎么在微信小程序中使用ECharts实现动态刷新

怎么在微信小程序中使用ECharts实现动态刷新？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

方法实例

首先到ECharts官网下载它的例子，然后把ec-canvas文件拷贝下来放到你自己的项目中：

然后在你需要用的页面引入，在xxx.JSON中加入，这里要注意路径，我的页面统一是放在pages文件夹中的：

"usinGComponents": {    "ec-canvas": "../../ec-canvas/ec-canvas" }

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%的高度。

好了，准备条件都做足，接下来就是重头戏了，（其实我觉得我写的好繁琐，全是重复的代码，不过暂时也没时间整合了，有兴趣的朋友可以自己写方法整合一下啦）

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)            }        })      }})

关于怎么在微信小程序中使用ECharts实现动态刷新问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网精选频道了解更多相关知识。