Vue und ECharts4Taro3 in Aktion: Erstellen Sie ein wunderschönes Datenvisualisierungs-Dashboard

Vue und ECharts4Taro3 in Aktion: Erstellen Sie ein wunderschönes Datenvisualisierungs-Dashboard

Einführung:
Heutzutage ist die Datenvisualisierung angesichts des schnellen Wachstums und der Komplexität von Daten zu einem wichtigen Werkzeug für die Entscheidungsfindung und Analyse von Unternehmen geworden. Vue ist ein beliebtes Front-End-Entwicklungsframework und ECharts4Taro3 ist eine Datenvisualisierungsbibliothek, die in Taro3 verwendet werden kann. Ihre Kombination ermöglicht es uns, schnell und flexibel schöne Datenvisualisierungs-Dashboards zu erstellen. In diesem Artikel wird erläutert, wie Sie mit Vue und ECharts4Taro3 ein interaktives und dynamisches Datenvisualisierungs-Dashboard erstellen.

1. Installation und Konfiguration

1. Installieren Sie Taro3 und Vue. Die spezifischen Befehle lauten wie folgt:
   

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

   Nach dem Login kopieren

2. Installieren Sie ECharts4Taro3

   Als nächstes müssen wir ECharts4Taro3 installieren. Der spezifische Befehl lautet wie folgt:
   

   npm install echarts-for-taro@next

   Nach dem Login kopieren

3. Konfigurieren Sie ECharts4Taro3

   In Taro3 müssen wir es in der Datei config/index.js konfigurieren. Der spezifische Code lautet wie folgt:
   

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

   Nach dem Login kopieren

4. Einführen von ECharts4Taro3

   In der Vue-Komponente müssen wir ECharts4Taro3 einführen und registrieren. Der spezifische Code lautet wie folgt:
   

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

   Nach dem Login kopieren

1. Zeichnen Sie grundlegende Diagramme.

   Zuerst können wir einige grundlegende Diagramme zeichnen Diagramme wie Kreisdiagramme, Balkendiagramme usw. Der spezifische Code lautet wie folgt:
   

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

   Nach dem Login kopieren

2. Interaktive und dynamische Effekte hinzufügen

   Zusätzlich zu statischen Diagrammen können wir die Benutzererfahrung auch durch interaktive und dynamische Effekte verbessern. Unten sehen Sie ein Beispiel. Klicken Sie auf ein Datenelement im Histogramm, um die entsprechenden Detailinformationen anzuzeigen. Der spezifische Code lautet wie folgt:
   

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

   Nach dem Login kopieren

Durch die oben genannten Schritte können wir mit Vue und ECharts4Taro3 schnell ein schönes Datenvisualisierungs-Dashboard erstellen. Zusätzlich zu einfachen Diagrammen können wir die Benutzererfahrung auch durch das Hinzufügen interaktiver und dynamischer Effekte verbessern. Ich hoffe, dass dieser Artikel den Lesern helfen kann, Vue und ECharts4Taro3 besser zu verstehen und anzuwenden, um Dashboards zur Datenvisualisierung zu erstellen.

Das obige ist der detaillierte Inhalt vonVue und ECharts4Taro3 in Aktion: Erstellen Sie ein wunderschönes Datenvisualisierungs-Dashboard. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!