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カーネルの浮動小数点演算のサポートに関する簡単な説明

推薦する

MySQLのスロークエリの詳細な説明

MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。

ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...

Vue h関数の使い方の詳しい説明

目次1. 理解2. 使用1. h() パラメータ2. 使い方が簡単3. カウンターケースを実装する4...

MySQL のスロークエリの方法と例

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

複数の条件を持つ MySQL クエリ メソッド

複数の条件を持つ MySQL クエリ環境: MySQL 5.7 where ステートメントに複数の ...

MySQL クイックデータ比較テクニック

MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

CentOS7でFTPサーバーを設定する方法

FTP は主にファイル転送に使用され、Linux では vsftpd で実装されるのが一般的です。F...

JenkinsのLinuxインストール手順と各種問題解決(ページアクセス初期化パスワード)

1. Java環境jdk1.8を準備するJavaがインストールされているかどうかを確認します。イン...

理論の普及——ユーザーエクスペリエンス

1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...

Uniappの小規模プログラム開発経験

1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...