序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。 まずEChartsの公式サイトにアクセスして公式サイトのアドレスをダウンロードしてください 上記の URL からコードをダウンロードし、ec-canvas ファイルを自分のプロジェクトにコピーします。 ツールフォルダに入れました。インポートする際はパスに注意してください。 2. 使用次に、必要なページにインポートしてjsonに追加します。パスechart.jsonに注意してください。 "コンポーネントの使用": { "タブ":"../../component/tabs/tab", "ec-canvas":"../../tools/ec-canvas/ec-canvas" }, 3 レンダリングまず、シンプルなレイアウトとスタイルechart.wxmlを作成します。 <view class="echart"> <tab active-tab="{{activeTab}}" period-list="{{periodList}}" bind:changePeriodType='changePeriodType'></tab> <view class="echart-position"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas> </ビュー> </ビュー> スタイル echart.wxss .echart-position { 位置:相対; 高さ: 280px; オーバーフロー:非表示; } チャート まず紹介する '../../tools/ec-canvas/echarts' から * を echarts としてインポートします。 関数setOption(チャート,データ){ var オプション = { タイトル: 文章: '' }, ツールチップ: { トリガー: 'アイテム' }, 伝説: { データ: [] }, シリーズ: [{ 名前: ''、 タイプ: 'パイ'、 半径: ['40%', '70%'], ラベルの重複を避ける: false, ラベル: { 表示: 偽、 位置: '中央' }, 強調: ラベル: { 表示: true、 フォントサイズ: '40', フォントの太さ: '太字' } }, ラベル行: 表示:偽 }, データ: [ ...データ ] }] }; chart.setOption(オプション); リターンチャート; } ページ({ データ: { 期間リスト: [ { id: '結果', テキスト: 「支出」 }, { id: '収入', テキスト: '収入' }, ]、 アクティブタブ: '結果', echartsData: null, //echartsデータ}, // 収入と支出の切り替えイベント changePeriodType(e) { console.log(e, '<=収入支出切り替えイベント') this.setData({ アクティブタブ: e.detail.params.type }) // リストを再クエリします this.getEchartData(); }, // 収入と支出のデータを照会する getEchartData() { wx.cloud.database().collection('spendD').where({ タイプ: this.data.activeTab == 'outcome' ? 0 : 1 }).get().then(res => { calcResult = this.handleOriginData(res.data); とします。 this.setData({ echartsData:calcResult }) this.init_one(計算結果) }) }, ハンドルオリジンデータ(配列) { 結果 = [] とします。 obj = {} とします 配列.forEach(項目 => { if (!obj[item.name]) { obj[アイテム名] = 0; } obj[item.name] += Number(item.amount); }) for(let key in obj){ temp = {} とします。 temp['name'] = キー; temp['値'] = obj[キー]; 結果をプッシュします(temp); } console.log(結果、'結果') 結果を返す }, /** * ライフサイクル機能 - ページの読み込みをリッスンする*/ init_one: function (data) { // チャートを初期化します this.echartComponent.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { 幅: 幅、 高さ: 高さ }); setOption(チャート、データ) this.chart = チャート; リターンチャート; }); }, onLoad: 関数 (オプション) { this.getEchartData() }, /** * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/ onReady: 関数 () { this.echartComponent = this.selectComponent('#mychart-dom-bar'); }, }) ピットを見つけるためのヒント:チュートリアルに従って構成された画像が期待どおりにならない場合は、次のスタイルを追加することに注意してください 要約するWeChat ミニプログラムでの echart の使用に関する基本的なチュートリアルに関するこの記事はこれで終わりです。WeChat ミニプログラムでの echart の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。 以下もご興味があるかもしれません:
|
<<: Windows 8 での ssh コマンドの使用記録
>>: MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル
VMware Toolsをインストールすると、仮想マシンホスト間で①テキストをコピーして貼り付けるこ...
1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...
1. CentOSイメージをダウンロードする1.1 ダウンロードウェブサイトhttp://mirro...
レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...
序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...
1. データベースとデータベースインスタンスMySQL の研究では、データベースとデータベース イン...
HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <o...
日常の運用・保守作業では、nginx サービスが頻繁に使用され、nginx の高同時実行性によって生...
整合性制約整合性制約はテーブル データの正確性を保つためのものです。データが正しくない場合は、そもそ...
イメージをダウンロードします(オプションの手順です。省略した場合は、手順 3 と 4 で自動的にイン...
目次ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを...
クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...
Windows Server 2008R2を忘れた場合の対処方法サーバーの数が多すぎる、サーバーが多...
目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...
vi/vim の紹介どちらもマルチモード エディターです。違いは、vim が vi のアップグレー...