Maison > interface Web > Voir.js > le corps du texte

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

王林
Libérer: 2023-07-22 16:25:22
original
1684 Les gens l'ont consulté

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal