序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は 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を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル
>>: Linuxカーネルの浮動小数点演算のサポートに関する簡単な説明
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...
コンテナを作成する [root@server1 ~]# docker run -it --name ...
この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...
コードをコピーコードは次のとおりです。 <前> <div> <sele...
前の単語line-height、font-size、vertical-align は、インライン要素...
Ubuntu仮想マシンでのシリアル通信にcutecomを使用する1. cutecomをインストールす...
最近、nginx-ingress-controller のアプリケーションについて説明した公開アカウ...
目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...
この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...
1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...
入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...
HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...
MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...
目次1. proxy と Object.defineProperty の利点2. プロキシ監視オブジ...