序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は 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カーネルの浮動小数点演算のサポートに関する簡単な説明
MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...
エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...
ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...
目次1. 理解2. 使用1. h() パラメータ2. 使い方が簡単3. カウンターケースを実装する4...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
複数の条件を持つ MySQL クエリ環境: MySQL 5.7 where ステートメントに複数の ...
MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...
1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...
FTP は主にファイル転送に使用され、Linux では vsftpd で実装されるのが一般的です。F...
1. Java環境jdk1.8を準備するJavaがインストールされているかどうかを確認します。イン...
Alibaba Cloud ServerはTomcatをインストールして構成し、外部ネットワークアク...
1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...
1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...