WeChatアプレット+EChartsで動的更新プロセス記録を実現

"コンポーネントの使用": {
    "ec-canvas": "../../ec-canvas/ec-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>
</ビュー>

。コンテンツ {
    幅: 100%;
    背景色: #F2F2F2;
    オーバーフロー-y: 自動;
}
#マイチャート-1 {
    位置: 絶対; 
    上: 0;
    高さ: 50%;
    左: 0;
    右: 0;
}
#mychart-2 {
    位置: 絶対; 
    上位: 50%;
    高さ: 50%;
    左: 0;
    右: 0;
}

'../../ec-canvas/echarts' から * を echarts としてインポートします。

関数setOption(チャート、xdata、ydata) {
    const オプション = {
        タイトル：
            テキスト: 'テスト'、
            パディング: [10, 0, 0, 20],
            テキストスタイル: {
                フォントサイズ: 14,
                色: '#696969'
            },
            上: '10rpx'
        },
        背景色: "#fff",
        色: ["#006EFF", "#67E0E3", "#9FE6B8"],
        アニメーション: false、
        グリッド: {
            表示:偽
        },
        x軸:
            タイプ: 'カテゴリ',
            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());
                    h + m を返す
                },
                フォントサイズ: 8
            }
        },
        y軸: {
            x: '中心'、
            スケール: 真、
            タイプ: '値',
            軸ラベル: {
                フォーマッタ: 関数 (値) {
                var val = 値 / 1000000000 + 'G';
                    戻り値
                }
            }
        },
        シリーズ： [{
            タイプ: 'line'、
            data: ydata, //y軸のデータも動的であり、パラメータとして渡されます。シンボル: 'none',
            線のスタイル:
                幅: 1
            }
        }]
    };
    chart.setOption(オプション)
}

ページ（{
    データ： {
        ecOne: {
            遅延ロード: true
        },
        ecTwo: {
            遅延ロード: true
        },
        timer:'' //リアルタイムで更新したいのでタイマーを設定します},
    onLoad: 関数 (オプション) {
        var _this = これ;
        this.getOneOption();
        このオプションは、
        this.setData({ //1分ごとに更新タイマー: setInterval(function () {
                    _this.getOneOption();
                    _this.getTwoOption();
                }, 60000)
        })
    },
    onReady: function () { //このステップには注意を払う必要があります this.oneComponent = this.selectComponent('#mychart-one');  
        this.twoComponent = this.selectComponent('#mychart-two');
    },
    onUnload: 関数 () {
        クリア間隔(this.data.timer)
    },
    init_one: function (xdata, ydata) { // 最初のチャートを初期化します this.oneComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                幅: 幅、
                高さ: 高さ
            });
            setOption(チャート、xデータ、yデータ)
            this.chart = チャート;
            リターンチャート;
        });
    },
    init_two: function (xdata, ydata) { // 2番目のチャートを初期化します this.storagemaxComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                幅: 幅、
                高さ: 高さ
            });
            setOption(チャート、xデータ、yデータ)
            this.chart = チャート;
            リターンチャート;
        });
    },
    getOneOption: function () { //このステップでは、実際にチャートにデータを追加する必要があります var _this = this;
        wx.リクエスト({
            url: 'https://xxxxxxx.com', //データを要求するインターフェースアドレス method: 'POST',
            ヘッダー: {
                「コンテンツタイプ」: 「application/json」
            },
            data: { // 渡されたパラメータ。これについてはこれ以上説明する必要はありません id: xxxx
            },
            成功:function(res){
     //ここでは、res.xdata と res.ydata が必要なデータ、つまり x 軸と y 軸に表示されるデータであると想定しています。これらは配列である必要があることに注意してください。
                _this.init_one(res.xdata、res.ydata) は、
            }
        })  
    },
    //2番目のチャートも同様に処理されます getTwoOption: function () {  
        var _this = これ;
        wx.リクエスト({
            url: 'https://xxxxxxx.com', //データを要求するインターフェースアドレス method: 'POST',
            ヘッダー: {
                「コンテンツタイプ」: 「application/json」
            },
            data: { // 渡されたパラメータ。これについてはこれ以上説明する必要はありません id: xxxx
            },
            成功:function(res){
                _this.init_two(res.xdata、res.ydata) は、
            }
        })  
    }
})