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

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

王林

リリース： 2023-07-22 16:25:22

オリジナル

1684 人が閲覧しました

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

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

1. インストールと構成

Taro3 と Vue のインストール
まず、Taro3 と Vue をインストールする必要があります (npm または Yarn を通じてインストールできます)。具体的なコマンドは次のとおりです。
```
npm install -g @tarojs/cli
taro init myApp
cd myApp
npm install vue
```
ログイン後にコピー
ECharts4Taro3 のインストール
次に、ECharts4Taro3 をインストールする必要があります。具体的なコマンドは次のとおりです。
```
npm install echarts-for-taro@next
```
ログイン後にコピー

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');
 },
  },
};

ログイン後にコピー

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. ダッシュボードを作成します

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

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,
 };
  },
};

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。