怎么在微信小程序中使用ECharts實(shí)現(xiàn)動(dòng)態(tài)刷新

怎么在微信小程序中使用ECharts實(shí)現(xiàn)動(dòng)態(tài)刷新？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

方法實(shí)例

1.首先到ECharts官網(wǎng)下載它的例子，然后把ec-canvas文件拷貝下來(lái)放到你自己的項(xiàng)目中：

2.然后在你需要用的頁(yè)面引入，在xxx.json中加入，這里要注意路徑，我的頁(yè)面統(tǒng)一是放在pages文件夾中的：

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

3.Ok，開(kāi)始干正事了，我這里就舉一個(gè)頁(yè)面兩個(gè)圖表的例子，先把簡(jiǎn)單的布局和樣式弄好

xxx.wxml：

需要提供兩個(gè)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;
}

這里值得注意的是，如果你想放三個(gè)圖表，四個(gè)圖表或者多個(gè)，一定要設(shè)canvas盒子的高度，要不然你會(huì)發(fā)現(xiàn)后面兩個(gè)表咋不見(jiàn)了??！官方的多個(gè)圖表沒(méi)有設(shè)高度，所以我照官方的放了幾個(gè)圖，發(fā)現(xiàn)都沒(méi)有，心累，找了半天，才發(fā)現(xiàn)是樣式問(wèn)題，索性每個(gè)盒子都設(shè)了50%的高度。

4.好了，準(zhǔn)備條件都做足，接下來(lái)就是重頭戲了，（其實(shí)我覺(jué)得我寫(xiě)的好繁瑣，全是重復(fù)的代碼，不過(guò)暫時(shí)也沒(méi)時(shí)間整合了，有興趣的朋友可以自己寫(xiě)方法整合一下啦）

xx.js

首先肯定就是要在頁(yè)面最開(kāi)始引入那個(gè)官方的組件了

import * as echarts from '../../ec-canvas/echarts';

先將表格要展示的樣式配置之類的設(shè)好

function setOption(chart, xdata, ydata) {
    const option = {
        title: {
            text: '測(cè)試',
            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軸上的數(shù)據(jù)是動(dòng)態(tài)的，所以我作為參數(shù)傳進(jìn)來(lái)
            axisLabel: {
                interval: 5,   //x軸間隔多少顯示刻度
                formatter: function (value) {   //顯示時(shí)間
                    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軸上的數(shù)據(jù)也是動(dòng)態(tài)的，也作為參數(shù)傳進(jìn)來(lái)
            symbol: 'none',
            lineStyle: {
                width: 1
            }
        }]
    };
    chart.setOption(option)
}

寫(xiě)page的一些方法

Page({
    data: {
        ecOne: {
            lazyLoad: true
        },
        ecTwo: {
            lazyLoad: true
        },
        timer:''                 //因?yàn)槲乙獙?shí)時(shí)刷新，所以設(shè)置了個(gè)定時(shí)器
    },
    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) {           //初始化第一個(gè)圖表
        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) {        //初始化第二個(gè)圖表
        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 () {        //這一步其實(shí)就要給圖表加上數(shù)據(jù)
        var _this = this;
        wx.request({
            url: 'https://xxxxxxx.com',    //你請(qǐng)求數(shù)據(jù)的接口地址
            method: 'POST',
            header: {
                "Content-Type": "application/json"
            },
            data: {               //傳的參數(shù)，這些都不用多說(shuō)了吧
                id:xxxx
            },
            success:function(res){
     //我這里就假設(shè)res.xdata和res.ydata是我們需要的數(shù)據(jù)，即在x軸和y軸展示的數(shù)據(jù)，記住一定是數(shù)組哦！
                _this.init_one(res.xdata,res.ydata)
            }
        })  
    },
    //第二個(gè)圖表也是一樣的處理
    getTwoOption: function (){  
        var _this = this;
        wx.request({
            url: 'https://xxxxxxx.com',    //你請(qǐng)求數(shù)據(jù)的接口地址
            method: 'POST',
            header: {
                "Content-Type": "application/json"
            },
            data: {                       //傳的參數(shù)，這些都不用多說(shuō)了吧
                id:xxxx
            },
            success:function(res){
                _this.init_two(res.xdata,res.ydata)
            }
        })  
    }
})

關(guān)于怎么在微信小程序中使用ECharts實(shí)現(xiàn)動(dòng)態(tài)刷新問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。