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

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

序文

最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-chart を選択しましたが、ニーズを満たせないことがわかりました。最終的に ECharts を選択しましたが、いくつかの落とし穴に陥りました。インターネットで情報を収集することで、ようやく理解し、実装プロセスを記録しました。

方法の例

1. まず、ECharts の公式 Web サイトにアクセスしてサンプルをダウンロードし、ec-canvas ファイルをコピーして自分のプロジェクトに配置します。

2. 次に、必要なページをインポートして xxx.json に追加します。ここでのパスに注意してください。私のページはすべて pages フォルダーに配置されています。

"コンポーネントの使用": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
 }

3. では、本題に入りましょう。2 つのグラフがあるページの例を示します。まずは、シンプルなレイアウトとスタイルを正しく設定しましょう。

xxx.wxml:

キャンバス ボックスを 2 つ用意する必要があります。

<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>
</ビュー>

xxx.wxss:

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

ここで注目すべき点は、3 つ、4 つ、またはそれ以上のグラフを配置する場合は、キャンバス ボックスの高さを設定する必要があるということです。そうしないと、最後の 2 つのグラフが表示されなくなります。 !多くの公式チャートには高さが設定されていなかったので、公式のものに従っていくつかの写真を配置しましたが、どれも同じ効果が得られませんでした。私は疲れて長い間探し回った後、それがスタイルの問題であることに気づきました。私は単に各ボックスに50%の高さを設定しました。

4. さて、準備がすべて完了したので、次のステップは主要部分です。(実際、私が書いたものは複雑すぎて、繰り返しのコードがたくさんあると思いますが、今はそれを統合する時間がありません。興味のある友人は、それを統合するための独自の方法を書いてください。)

xx.js

まず最初に、ページの先頭に公式コンポーネントを紹介します。

'../../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) は、
            }
        })  
    }
})

さて、これが大まかな手順です。動的に変更する必要がある場合は、それをパラメータとして渡します。ここでは onUnload のタイマーをクリアしました。これが明確でないと、別のページにジャンプしたときにリクエストが継続されるので、このページを離れる前にタイマーをクリアする必要があります。私は技術の専門家ではないので、もっと良い方法があれば、ぜひ訂正していただければ幸いです。ハハハ

要約する

これで、WeChatミニプログラム+ EChartsによる動的更新の実現に関するこの記事は終了です。WeChatミニプログラム+ EChartsの動的更新に関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットでechartsを使用する方法
  • WeChatアプレットでEchartsチャートコンポーネントを使用する方法の詳細な説明
  • WeChatアプレットはechartsを使用してデータを取得し、折れ線グラフを生成します
  • ECharts を使用して WeChat アプレットでデータを非同期的にロードする方法

<<:  CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

>>:  Linuxカーネルの浮動小数点演算のサポートに関する簡単な説明

推薦する

Vue SPA ファースト スクリーン最適化ソリューション

目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

jQueryはシャトルボックス機能を実現する

この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...

新しいウィンドウで開くジャンプメニュー、window.open の使い方の紹介

コードをコピーコードは次のとおりです。 <前> <div> <sele...

行の高さと垂直方向の配置に関する包括的な理解

前の単語line-height、font-size、vertical-align は、インライン要素...

Ubuntu仮想マシンでシリアル通信にcutecomを使用する方法

Ubuntu仮想マシンでのシリアル通信にcutecomを使用する1. cutecomをインストールす...

nginx-ingress-controller ログ永続化ソリューションのソリューション

最近、nginx-ingress-controller のアプリケーションについて説明した公開アカウ...

ミニプログラムの基本的な使用方法の知識ポイント(非常に包括的で、お勧めです!)

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

Linux で libudev を使用して USB デバイスの VID と PID を取得する方法

この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...

今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...

HTMLは入力完了を検出する機能を実装する

入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...

HTML Web ページ リスト タグ学習チュートリアル

HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...

MySQL 一時テーブルの簡単な使用法

MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...

プロキシはVue3データの双方向バインディングの原理を実現します

目次1. proxy と Object.defineProperty の利点2. プロキシ監視オブジ...