WeChatミニプログラムの基本チュートリアル:Echartの使用

WeChatミニプログラムの基本チュートリアル:Echartの使用

序文

まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。

まず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 を応援してくれることを願っています。

以下もご興味があるかもしれません:
  • vue で vue-echarts-v3 を使用するサンプルコード
  • Echarts を使用して棒グラフを描く vue の詳細な説明
  • vue2 vue3 での Echarts の詳細な使用方法
  • Django での視覚化に echarts を使用する練習
  • ネイティブechartとvue-echartの使用に関する詳細な説明

<<:  Windows 8 での ssh コマンドの使用記録

>>:  MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル

推薦する

この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

目次1: フロントエンドの手書きページング(データ量が少ない場合) 2: バックエンドのページング、...

JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

iOS WeChat H5ページのゴム反発効果の落とし穴記録

ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...

Navicat による MySQL パーティショニングの実践

MySQLのパーティショニングは、非常に大きなテーブルを管理するのに役立ちます。MySQLのパーティ...

ウェブページの画像最適化ツールと使用方法のヒントの共有

ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...

JavaScript 配列の重複排除とフラット化関数の紹介

目次1. 配列の平坦化(配列の次元削減とも呼ばれる)方法1: 削減メソッドを使用する方法2: スタッ...

フロントエンドにアニメーション遷移効果を実装する方法

目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...

WeChat アプレットカスタムタブバーステップ記録

目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...

JavaScript の絶妙なスネーク実装プロセス

目次1. HTML構造を作成する2. テーブルを作成する3. ヘビの頭と体を作る4. 食べ物を作る5...

MySQL マルチテーブル共同クエリ操作例の分析

この記事では、MySQL のマルチテーブル共同クエリ操作について説明します。ご参考までに、詳細は以下...

MySQLのconcat関連関数の詳細な説明

1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...

サイトマップをウェブページの下部に配置するメリットと例

以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...

Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法

最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...