Vue と ECharts4Taro3 の動作: 美しいデータ視覚化ダッシュボードを作成する

Vue と ECharts4Taro3 の実戦: 美しいデータ視覚化ダッシュボードの作成

はじめに:
現在、データの急速な増加と複雑化に伴い、データ視覚化は企業の意思決定や意思決定のための重要なツールとなっています。分析。人気のフロントエンド開発フレームワークである Vue と、Taro3 で使用できるデータ視覚化ライブラリである ECharts4Taro3 を組み合わせることで、美しいデータ視覚化ダッシュボードを迅速かつ柔軟に作成できます。この記事では、Vue と ECharts4Taro3 を使用して、インタラクティブで動的なデータ視覚化ダッシュボードを作成する方法を紹介します。

1. インストールと構成

1. Taro3 と Vue のインストール
   まず、Taro3 と Vue をインストールする必要があります (npm または Yarn を通じてインストールできます)。具体的なコマンドは次のとおりです。

   npm install -g @tarojs/cli
   taro init myApp
   cd myApp
   npm install vue

   ログイン後にコピー

2. ECharts4Taro3 のインストール
   次に、ECharts4Taro3 をインストールする必要があります。具体的なコマンドは次のとおりです。

   npm install echarts-for-taro@next

   ログイン後にコピー

3. Configure ECharts4Taro3
   In Taro3, we need to configure it in the config/index.js file. 具体的なコードは次のとおりです:

   module.exports = {
     // ...
     mini: {
    // ...
    webpackChain(chain) {
      chain.resolve.alias.set('@tarojs/components$', '@tarojs/components/dist-h5/vue3/index.js');
    },
     },
   };

   ログイン後にコピー

4. ECharts4Taro3
   の導入Vue コンポーネントでは、ECharts4Taro3 を導入して登録する必要があります。具体的なコードは次のとおりです:

   <template>
     <ec-canvas :options="options" ref="ec" @init="onInit"></ec-canvas>
   </template>
   
   <script>
   import { ref } from 'vue';
   import { useReady, usePageEvent } from '@tarojs/taro';
   import { ecCanvas } from 'echarts-for-taro';
   
   export default {
     setup() {
    const ec = ref(null);
   
    useReady(() => {
      ec.value.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr,
        });
        ec.value = chart;
        return chart;
      });
    });
   
    return {
      ec,
    };
     },
   };
   </script>

   ログイン後にコピー

2. ダッシュボードを作成します

1. 基本的なグラフを描画する
   まず、円グラフ、棒グラフなどの基本的なグラフを描画します。具体的なコードは次のとおりです。

   import { ref } from 'vue';
   import { useReady, usePageEvent } from '@tarojs/taro';
   import { ecCanvas } from 'echarts-for-taro';
   
   export default {
     setup() {
    const ec = ref(null);
   
    useReady(() => {
      ec.value.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr,
        });
        ec.value = chart;
        return chart;
      });
   
      const options = {
        title: {
          text: '基础图表示例',
        },
        series: [
          {
            type: 'pie',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ],
          },
        ],
      };
      ec.value.setOption(options);
    });
   
    return {
      ec,
    };
     },
   };

   ログイン後にコピー

2. インタラクティブで動的な効果を追加する
   静的なグラフに加えて、インタラクティブで動的な効果を通じてユーザー エクスペリエンスを向上させることもできます。以下は一例で、ヒストグラム上のデータ項目をクリックすると詳細情報が表示されます。具体的なコードは次のとおりです:

   import { ref } from 'vue';
   import { useReady, usePageEvent } from '@tarojs/taro';
   import { ecCanvas } from 'echarts-for-taro';
   
   export default {
     setup() {
    const ec = ref(null);
    const selectedData = ref({});
   
    useReady(() => {
      ec.value.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr,
        });
        ec.value = chart;
        return chart;
      });
   
      const options = {
        title: {
          text: '交互和动态效果示例',
        },
        series: [
          {
            type: 'bar',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ],
          },
        ],
      };
   
      ec.value.setOption(options);
      ec.value.on('click', (event) => {
        const { name, value } = event;
        selectedData.value = { name, value };
      });
    });
   
    return {
      ec,
      selectedData,
    };
     },
   };

   ログイン後にコピー

結論:
上記の手順を通じて、Vue と ECharts4Taro3 を使用して美しいデータ視覚化ダッシュボードをすばやく構築できます。基本的なグラフに加えて、インタラクティブで動的な効果を追加することでユーザー エクスペリエンスを向上させることもできます。この記事が、読者が Vue と ECharts4Taro3 をよりよく理解し、データ視覚化ダッシュボードを作成するために適用するのに役立つことを願っています。

以上がVue と ECharts4Taro3 の動作: 美しいデータ視覚化ダッシュボードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。