WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順

序文

休日は終わっていますが、それは別の形で（お腹に触れることで）私たちに現れます。ミニプログラムでデータをグラフで表示することが、私に割り当てられた休日前の調査タスクです。インターネットで大手の記事をチェックし、Ucharts、F2、Wx-charts、Echarts について学びました。試したのは F2 と Echarts だけです。Echarts が最近更新され、Echarts に詳しくなったため、Echarts を選択しました。F2 も試しましたが、うまくいきましたが、あまり詳しくなかったので諦めました。

さあ、本題に入りましょう

まず、Echarts に関する他の人の記事を見て、公式サイトへのリンクが貼られていました。その後、公式サイトに行って読んでみました。比較的簡単でした。ここにもリンクを貼っておきます。一般的な手順

1. 公式サイトのサンプルをダウンロードします。

2. 公式サイトのサンプルにあるec-canvasフォルダをプロジェクトディレクトリにコピーします。

3. コンポーネントを使用するのと同じように、特定のページに ec-canvas を導入します。

4. 特定のページの js で初期化します。

公式ウェブサイトの例をダウンロードしたら、echarts.js、wx-canvas.js、ec-canvas が含まれる ec-canvas フォルダーを見つけます。次に、このフォルダを自分のプロジェクトのディレクトリにコピーします。最初は utils の下に置き、サブパッケージ化してから別の場所に置きます。ここでは utils の下に置きます。その後、プロジェクトは 700 KiB 以上大きくなりました。

ページ

xxx.json

{
 "コンポーネントの使用": {
 "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas"
 }
}

xxx.wxml

<view class="container-echarts margin-top-10">
 <ec-canvas class="mycharts" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</ビュー>

xxx.js は、次の initChart メソッドを使用する前に、まず echarts をインポートする必要があるため、配置された ec-canvas のパスに従って echarts をインポートします。

import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 配置されたec-canvasのパスに従ってechartsをインポートします
let chart = null // 変数を使用して echarts の初期化を保存します let options = { // グラフィックス設定、echarts を使用したことがある人なら誰でも意味がわかります～以下は公式サイトの折れ線グラフ xAxis の基本的な例です: {
  タイプ: 'カテゴリ',
  データ: ['月', '火', '水', '木', '金', '土', '日']
 },
 y軸: {
  タイプ: '値'
 },
 シリーズ： [{
  データ: [150, 230, 224, 218, 135, 147, 260],
  タイプ: 'line'
 }]
} 
function initChart(canvas, width, height, dpr) { // ここで canvas, width, height, dpr は無視できます const chart = echarts.init(canvas, null, {
 幅: 幅、
 高さ: 高さ、
 devicePixelRatio: dpr // ピクセル});
 キャンバスにチャートを設定します。
 chart.setOption(オプション);
 リターンチャート;
}

ページ（{
 データ： {
 ec: {
  onInit: initChart // ここで括弧を追加しないでください。
 }
 }
});

保存して実行します。この時点で、echarts は理論的には結果を表示できますが、自分でデバッグする必要があります。

echartsの初期化を省くためにチャート変数を使います。公式サイトもメソッド内にオプションを書いているのでそれを取り出しました。では、チャートは何の役に立つのでしょうか?ほとんどのデータは非同期的に取得されるため、echarts は動的にレンダリングする必要があります。データが取得されると、このチャートが使用されます。

チャート.setOption({
 x軸:
 データ: newData.map(item => {
  アイテム[0]を返します。
 })
 },
 シリーズ： {
 データ: newData.map(item => {
  アイテム[1]を返す。
 })
 }
})

ここでのデータ形式に関しては、各人のオプションでどのような画像をレンダリングしたいかを参考にしてください。公式サイトで提供されているサンプルポータルを使用しています。echartsのデータ更新はsetOptionを使用して直接更新できます。

開発者ツールでのズームとスクロールは機能しませんでしたが、試用版にアップロードした後、携帯電話では機能しました。 WeChatのキャンバスにはtype="2d"があります。ec-canvasでtype="2d"を使用する場合は、ec-canvas.jsを変更する必要があります。

データ： {
 isUseNewCanvas: true // ここで true に変更します。デフォルトは false です。
}

理由: isUseNewCanvas はデフォルトでは false であり、これはキャンバスの古いバージョンです。

<!-- 新機能: H5 に合わせたインターフェース -->
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
<!-- 古い -->
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

echarts.js はサイズが大きく、アップロードプロジェクトには 2 MiB の制限があります。

ダウンロードしたec-canvas内のecharts.jsは数百KiBあり、2MiBに比べるとかなり大きいです。プロジェクトをアップロードしたところ、制限を超えたというメッセージが表示されました。すぐに効果がありそうな方法は、echarts.jsのサイズを小さくすることと、別のパッケージに分割することの2つしか思いつきませんでした。

echarts.js のサイズが大きい問題

echartsの公式サイト（ポータル---オンラインカスタマイズ）には、オンデマンド構築方法があります。以下のオンラインカスタマイズに入り、必要なグラフを選択します。私は折れ線グラフと直交座標系を選択しました。コンポーネントでは、ブラシ選択、ツールバー、カスタムグラフィック以外のすべてのコンポーネントを選択しました。他のオプションでもsvgをチェックしました。次に、ダウンロードをクリックして構築ページに入ります。構築が完了すると、echarts.min.jsファイルが自動的にダウンロードされ、サイズが約200 KiB削減されます。次に、名前を echarts.js に変更し、ec-canvas で置き換えます。

アップロードプロジェクトの 2MiB 制限の問題

echarts.js のサイズは縮小されましたが、サブパッケージ化というアップロード制限の問題は依然として存在します。

app.jsonにはサブパッケージがあります

{
 「サブパッケージ」: [
 {
  "ルート": "xxx/xxx",
  "名前": "xxx",
  「独立」：偽、
  「ページ」: [
  「ページ/xxx」、
  「ページ/xxx」、
  「ページ/xxx」
  ]
 },
 {
  "ルート": "baoziTask/",
  "名前": "包子",
  「ページ」: [
  「ページ/roubaozi/roubaozi」
  ]
 }
 ]、
}

このサブパッケージは公式サイトで非常に簡単に説明されていますが、私が使用したときにはこのように理解しました。

ルートはサブパッケージ化されるパスであり、ルート ディレクトリに配置します。そうすると、baoziTask の下にあるすべてのファイルがパッケージとして扱われます。 baoziTask パスにないすべてのファイルは、アプリのメイン パッケージにパッケージ化されます。

name は、事前ダウンロード中に使用されるサブパッケージのエイリアスです。この事前ダウンロードは、特定のページにいるときに、アクセス速度を向上させるために使用される可能性のあるサブパッケージを積極的にダウンロードすることを意味します。たとえば、特定のページに入ると、どこかをクリックして特定のサブパッケージにジャンプする可能性が高くなります。このとき、ジャンプ時にこのサブパッケージをダウンロードするのではなく、事前にダウンロードすることができます。

独立というのは下請けが独立しているかどうかということだが、使ったことがないので直感的にわからない。アプリ本体のパッケージに依存せず、独立して実行できるとのこと。これには、コードのダウンロードではなく、preloadRule の設定が必要です。詳細については、公式サイトを参照して自分で試してみる必要があります。ポータル---サブパッケージの事前ダウンロード

ページはパッケージ内のページなので、理解しやすいです。

これらのサブパッケージ内のページにジャンプしたい場合は、ジャンプ URL に正しいパスを記述するだけです。たとえば、roubaozi にジャンプする場合、URL は次のように記述されます。

url: '/baoziTask/pages/roubaozi/roubaozi'

下請けが成功したかどうかを確認するにはどうすればよいですか?

開発者ツールの右上隅に詳細ボタンがあります。クリックして詳細を表示し、下にスライドします。「ローカル コード」の行が表示されます。その後ろのサイズをクリックすると、メイン パッケージと各サブ パッケージのサイズが表示されます。メイン パッケージが 2MiB を超えていない場合は、アップロードは成功です。

群衆: KB と MB の間に i を追加するのはなぜですか?小津喬：正確に表現すると1024です

要約する

WeChatミニプログラムにおけるEchartsの使用と下請けに関するこの記事はこれで終わりです。WeChatミニプログラムEchartsと下請けに関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様が今後も123WORDPRESS.COMを応援してくれることを願っています。