Vue と ECharts4Taro3 を使用してインタラクティブなデータ視覚化を作成する方法

Vue と ECharts4Taro3 を使用してインタラクティブなデータ視覚化を作成する方法

概要:
データ視覚化の分野では、チャート ライブラリの選択が非常に重要です。人気のある最新のフロントエンド フレームワークとして、Vue は応答性の高いデータ バインディングとコンポーネント ベースの開発機能を提供できます。 ECharts4Taro3 は、ECharts および Taro フレームワークに基づくチャート ライブラリであり、ミニ プログラム、H5、およびその他のプラットフォームでインタラクティブなデータ視覚化を作成するために使用できます。この記事では、Vue と ECharts4Taro3 を使用してインタラクティブなデータ視覚化を作成する方法をコード例とともに説明します。

ステップ 1: Taro プロジェクトをインストールして初期化する
まず、Node.js と npm がインストールされていることを確認する必要があります。次に、コマンド ラインで次のコマンドを実行して、Taro スキャフォールディングをインストールします:

npm install -g @tarojs/cli

次に、新しい Taro プロジェクトを作成し、Vue テンプレートを初期化します:

taro init myProject --template vue

プロジェクト ディレクトリを入力します:

cd myProject

プロジェクトを実行します:

npm run dev:weapp

次に、プロジェクトを WeChat 開発ツールにインポートし、シミュレーターでプロジェクトを実行します。

ステップ 2: ECharts4Taro3 をインストールして導入する
コマンド ラインで次のコマンドを実行して、ECharts4Taro3 をプロジェクトにインストールします:

npm install --save echarts-for-taro@3.0.0-alpha.1

使用する必要があるページに ECharts4Taro3 のコンポーネントを導入します。 ECharts :

<template>
  <view>
    <ec-canvas
      :ec="ec"
      canvas-id="mychart-echarts"
      bindload="onLoad"
      binderror="onError"
    ></ec-canvas>
  </view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const ec = ref(null);

    onMounted(() => {
      const query = Taro.createSelectorQuery();
      query.select(`#mychart-echarts`)
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvasNode = res[0].node;
          const ctx = canvasNode.getContext('2d');
          const chart = echarts.init(canvasNode, null, { renderer: 'canvas' });

          canvasNode.setChart = chart;
          canvasNode.ctx = ctx;
        });
    });

    return {
      ec
    }
  }
}
</script>

上記のコードでは、Vue の ref を使用してコンポーネント インスタンスとコンテキスト オブジェクトを取得し、Taro が提供する createSelectorQuery を使用してキャンバス ノードを取得します。 ECharts が使用されます。 init メソッドはチャート インスタンスを初期化します。

ステップ 3: インタラクティブなデータ視覚化を作成する
これで、ECharts の構成項目で特定のデータ視覚化チャートを定義できます。 onMounted のコールバック関数では、setData メソッドを通じてチャート データを更新できます。

以下は単純なヒストグラムの例です:

<template>
  <view>
    <ec-canvas
      :ec="ec"
      canvas-id="mychart-echarts"
      bindload="onLoad"
      binderror="onError"
    ></ec-canvas>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const ec = ref(null);

    onMounted(() => {
      const query = Taro.createSelectorQuery();
      query.select(`#mychart-echarts`)
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvasNode = res[0].node;
          const ctx = canvasNode.getContext('2d');
          const chart = echarts.init(canvasNode, null, { renderer: 'canvas' });

          canvasNode.setChart = chart;
          canvasNode.ctx = ctx;

          const option = {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }]
          };

          chart.setOption(option);
        });
    });

    return {
      ec
    }
  }
}
</script>

上記のコードでは、x 軸、y 軸、およびヒストグラム データを含む構成アイテムを定義しますoption。次に、チャート インスタンスの setOption メソッドを使用して、チャートのデータを設定します。

概要:
この記事では、Vue と ECharts4Taro3 を使用して対話型のデータ視覚化を作成する方法を紹介します。 Taro プロジェクトを初期化し、ECharts4Taro3 をインストールして導入し、ECharts の設定項目とメソッドを使用することで、さまざまなデータ視覚化チャートを簡単に作成できます。これらのコード例が、読者が Vue と ECharts4Taro3 をよりよく理解し、使用するのに役立つことを願っています。

以上がVue と ECharts4Taro3 を使用してインタラクティブなデータ視覚化を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。