Vue et ECharts4Taro3 en action : créez un magnifique tableau de bord de visualisation de données

Vue et ECharts4Taro3 en action : créez un magnifique tableau de bord de visualisation de données

Introduction :
De nos jours, avec la croissance rapide et la complexité des données, la visualisation des données est devenue un outil important pour la prise de décision et l'analyse des entreprises. Vue est un framework de développement front-end populaire et ECharts4Taro3 est une bibliothèque de visualisation de données qui peut être utilisée dans Taro3. Leur combinaison nous permet de créer rapidement et de manière flexible de superbes tableaux de bord de visualisation de données. Cet article expliquera comment utiliser Vue et ECharts4Taro3 pour créer un tableau de bord de visualisation de données interactif et dynamique.

1. Installation et configuration

1. Installez Taro3 et Vue
   Tout d'abord, nous devons installer Taro3 et Vue, qui peuvent être installés via npm ou Yarn. Les commandes spécifiques sont les suivantes :

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

   Copier après la connexion

2. Installez ECharts4Taro3
   . Ensuite, nous avons besoin d'installer ECharts4Taro3, la commande spécifique est la suivante :

   npm install echarts-for-taro@next

   Copier après la connexion

3. Configurer ECharts4Taro3
   Dans Taro3, nous devons le configurer dans le fichier config/index.js, le code spécifique est le suivant :

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

   Copier après la connexion

4. Introduire ECharts4Taro3
   Dans le composant Vue, nous ECharts4Taro3 devons être introduits et enregistrés, le code spécifique est le suivant :

   <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>

   Copier après la connexion

2. Créer un tableau de bord

1. Dessiner des graphiques de base
   Tout d'abord, nous pouvons dessiner quelques graphiques de base des graphiques, tels que des diagrammes circulaires, des graphiques à barres, etc. Le code spécifique est le suivant :

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

   Copier après la connexion

2. Ajouter des effets interactifs et dynamiques
   En plus des graphiques statiques, nous pouvons également améliorer l'expérience utilisateur grâce à des effets interactifs et dynamiques. Ci-dessous un exemple. Cliquez sur un élément de données dans l'histogramme pour afficher les informations détaillées correspondantes. Le code spécifique est le suivant :

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

   Copier après la connexion

Conclusion :
Grâce aux étapes ci-dessus, nous pouvons rapidement créer un magnifique tableau de bord de visualisation de données en utilisant Vue et ECharts4Taro3. En plus des graphiques de base, nous pouvons également améliorer l'expérience utilisateur en ajoutant des effets interactifs et dynamiques. J'espère que cet article pourra aider les lecteurs à mieux comprendre et appliquer Vue et ECharts4Taro3 pour créer des tableaux de bord de visualisation de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!