Praktische Aufzeichnung von VUE mithilfe des Wortwolkendiagramms von Echarts

echarts Wortwolke ist eine Erweiterung von echarts

https://echarts.apache.org/zh/download-extension.html

1. Abhängigkeiten installieren

 npm installiere Echarts
 
 npm installiere echarts-wordcloud

2. Importieren Sie main.js

E-Charts aus „E-Charts“ importieren;
Vue.prototype.$echarts = echarts

3. Erweiterungen in den verwendeten Komponenten einführen

<Skript>
importiere "echarts-wordcloud/dist/echarts-wordcloud";
importiere "echarts-wordcloud/dist/echarts-wordcloud.min";
 
 </Skript>

4. Konfiguration

<Vorlage>
  <div Klasse="Ergebnis">
      <el-tabs Typ="Randkarte" v-Modell="Name">
        <el-tab-pane label="Kumuliert bestätigte Fälle in jeder Provinz" name="0">
          <div ref="chart1" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="Bestätigte Fälle in jeder Provinz" name="1">
          <div ref="chart2" style="Breite: 800px;Höhe: 600px;" Klasse="charts-two"></div>
        </el-tab-pane>
        <el-tab-pane label="Kumuliert bestätigte Fälle in jeder Stadt" name="2">
          <div ref="chart3" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="Aktuell bestätigte Fälle in jeder Stadt" name="3">
          <div ref="chart4" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
      </el-tabs>
  </div>
</Vorlage>
 
 
// Wortwolkendiagramm <script>
importiere * als Echarts von „Echarts“;
importiere "echarts-wordcloud/dist/echarts-wordcloud";
importiere "echarts-wordcloud/dist/echarts-wordcloud.min";
 
Standard exportieren {
  Name: "VisitShow",
  Daten() {
    zurückkehren {
      BenutzerBesuchsnummer: [],
      Datum: [],
      guteBesuchszahl: [],
      Warenname: [],
      Name: "0",
    };
  },
  montiert() {
    dies.showEeharts();
  },
 
  Methoden: {
    zeigEeharts() {
      var chart1 = echarts.init(this.$refs.chart1);
      var chart2 = echarts.init(this.$refs.chart2);
      var chart3 = echarts.init(this.$refs.chart3);
      var chart4 = echarts.init(this.$refs.chart4);
      var Daten1 = [
         {'name': 'Hongkong', 'value': 11801},
         {'Name': 'Taiwan', 'Wert': 1178},
         {'Name': 'Shanghai', 'Wert': 2006},
         {'Name': 'Guangdong', 'Wert': 2365},
         {'Name': 'Yunnan', 'Wert': 347},
         {'Name': 'Sichuan', 'Wert': 992},
         {'Name': 'Fujian', 'Wert': 595},
         {'Name': 'Zhejiang', 'Wert': 1345},
         {'Name': 'Hainan', 'Wert': 188},
         {'Name': 'Jiangsu', 'Wert': 720},
         {'Name': 'Tianjin', 'Wert': 387},
         {'Name': 'Shanxi', 'Wert': 251},
         {'Name': 'Guangxi', 'Wert': 275},
         {'Name': 'Shaanxi', 'Wert': 592},
         {'Name': 'Hubei', 'Wert': 38158},
         {'Name': 'Chongqing', 'Wert': 597},
         {'name': 'Innere Mongolei', 'value': 382},
         {'Name': 'Hunan', 'Wert': 1045},
         {'Name': 'Shandong', 'Wert': 879},
         {'name': 'Peking', 'value': 1057},
         {'Name': 'Henan', 'Wert': 1312},
         {'Name': 'Gansu', 'Wert': 193},
         {'Name': 'Tibet', 'Wert': 1},
         {'Name': 'Jilin', 'Wert': 573},
         {'name': 'Hebei', 'value': 1317},
         {'Name': 'Qinghai', 'Wert': 18},
         {'name': 'Macau', 'value': 49},
         {'Name': 'Xinjiang', 'Wert': 980},
         {'Name': 'Liaoning', 'Wert': 408},
         {'Name': 'Anhui', 'Wert': 994},
         {'Name': 'Heilongjiang', 'Wert': 1610},
         {'Name': 'Guizhou', 'Wert': 147},
         {'Name': 'Jiangxi', 'Wert': 937},
         {'Name': 'Ningxia', 'Wert': 75}
      ]
      var Daten2 = [
         {'name': 'Hongkong', 'value': 118},
         {'Name': 'Taiwan', 'Wert': 89},
         {'Name': 'Shanghai', 'Wert': 56},
         {'Name': 'Guangdong', 'Wert': 51},
         {'Name': 'Yunnan', 'Wert': 46},
         {'Name': 'Sichuan', 'Wert': 30},
         {'Name': 'Fujian', 'Wert': 25},
         {'Name': 'Zhejiang', 'Wert': 22},
         {'Name': 'Hainan', 'Wert': 17},
         {'Name': 'Jiangsu', 'Wert': 8},
         {'Name': 'Tianjin', 'Wert': 7},
         {'Name': 'Shanxi', 'Wert': 7},
         {'Name': 'Guangxi', 'Wert': 7},
         {'Name': 'Shaanxi', 'Wert': 6},
         {'Name': 'Hubei', 'Wert': 6},
         {'Name': 'Chongqing', 'Wert': 6},
         {'name': 'Innere Mongolei', 'value': 4},
         {'Name': 'Hunan', 'Wert': 4},
         {'Name': 'Shandong', 'Wert': 3},
         {'name': 'Peking', 'value': 2},
         {'Name': 'Henan', 'Wert': 1},
         {'Name': 'Gansu', 'Wert': 1},
         {'Name': 'Tibet', 'Wert': 0},
         {'Name': 'Jilin', 'Wert': 0},
         {'Name': 'Hebei', 'Wert': 0},
         {'Name': 'Qinghai', 'Wert': 0},
         {'Name': 'Macau', 'Wert': 0},
         {'Name': 'Xinjiang', 'Wert': 10},
         {'Name': 'Liaoning', 'Wert': 0},
         {'Name': 'Anhui', 'Wert': 0},
         {'Name': 'Heilongjiang', 'Wert': 0},
         {'Name': 'Guizhou', 'Wert': 0},
         {'Name': 'Jiangxi', 'Wert': 0},
         {'Name': 'Ningxia', 'Wert': 0}
         ]
      var Daten3 = [
         {'name': 'Hongkong', 'value': 11801},
         {'Name': 'Taiwan', 'Wert': 1178},
         {'Name': 'Shanghai', 'Wert': 2006},
         {'Name': 'Guangdong', 'Wert': 2365},
         {'Name': 'Yunnan', 'Wert': 347},
         {'Name': 'Sichuan', 'Wert': 992},
         {'Name': 'Fujian', 'Wert': 595},
         {'Name': 'Zhejiang', 'Wert': 1345},
         {'Name': 'Hainan', 'Wert': 188},
         {'Name': 'Jiangsu', 'Wert': 720},
         {'Name': 'Tianjin', 'Wert': 387},
         {'Name': 'Shanxi', 'Wert': 251},
         {'Name': 'Guangxi', 'Wert': 275},
         {'Name': 'Shaanxi', 'Wert': 592},
         {'Name': 'Hubei', 'Wert': 38158},
         {'Name': 'Chongqing', 'Wert': 597},
         {'name': 'Innere Mongolei', 'value': 382},
         {'Name': 'Hunan', 'Wert': 1045},
         {'Name': 'Shandong', 'Wert': 879},
         {'name': 'Peking', 'value': 1057},
         {'Name': 'Henan', 'Wert': 1312},
         {'Name': 'Gansu', 'Wert': 193},
         {'Name': 'Tibet', 'Wert': 1},
         {'Name': 'Jilin', 'Wert': 573},
         {'name': 'Hebei', 'value': 1317},
         {'Name': 'Qinghai', 'Wert': 18},
         {'name': 'Macau', 'value': 49},
         {'Name': 'Xinjiang', 'Wert': 980},
         {'Name': 'Liaoning', 'Wert': 408},
         {'Name': 'Anhui', 'Wert': 994},
         {'Name': 'Heilongjiang', 'Wert': 1610},
         {'Name': 'Guizhou', 'Wert': 147},
         {'Name': 'Jiangxi', 'Wert': 937},
         {'Name': 'Ningxia', 'Wert': 75}
      ]
      var data4 = [
         {'name': 'Hongkong', 'value': 118},
         {'Name': 'Taiwan', 'Wert': 89},
         {'Name': 'Shanghai', 'Wert': 56},
         {'Name': 'Guangdong', 'Wert': 51},
         {'Name': 'Yunnan', 'Wert': 46},
         {'Name': 'Sichuan', 'Wert': 30},
         {'Name': 'Fujian', 'Wert': 25},
         {'Name': 'Zhejiang', 'Wert': 22},
         {'Name': 'Hainan', 'Wert': 17},
         {'Name': 'Jiangsu', 'Wert': 8},
         {'Name': 'Tianjin', 'Wert': 7},
         {'Name': 'Shanxi', 'Wert': 7},
         {'Name': 'Guangxi', 'Wert': 7},
         {'Name': 'Shaanxi', 'Wert': 6},
         {'Name': 'Hubei', 'Wert': 6},
         {'Name': 'Chongqing', 'Wert': 6},
         {'name': 'Innere Mongolei', 'value': 4},
         {'Name': 'Hunan', 'Wert': 4},
         {'Name': 'Shandong', 'Wert': 3},
         {'name': 'Peking', 'value': 2},
         {'Name': 'Henan', 'Wert': 1},
         {'Name': 'Gansu', 'Wert': 1},
         {'Name': 'Tibet', 'Wert': 0},
         {'Name': 'Jilin', 'Wert': 0},
         {'Name': 'Hebei', 'Wert': 0},
         {'Name': 'Qinghai', 'Wert': 0},
         {'Name': 'Macau', 'Wert': 0},
         {'Name': 'Xinjiang', 'Wert': 10},
         {'Name': 'Liaoning', 'Wert': 0},
         {'Name': 'Anhui', 'Wert': 0},
         {'Name': 'Heilongjiang', 'Wert': 0},
         {'Name': 'Guizhou', 'Wert': 0},
         {'Name': 'Jiangxi', 'Wert': 0},
         {'Name': 'Ningxia', 'Wert': 0}
         ]
			var chart1Option = {
          Titel:
              Text: 'Kumuliert bestätigte Fälle in jeder Provinz - Wortwolke', //Titel x: 'Mitte',
              Textstil: {
                  Schriftgröße: 23
              }
 
          },
          Hintergrundfarbe: '#fff', //F7F7F7
          Tooltip: {
              zeigen: wahr
          },
          Serie: [{
              Name: „Kumuliert bestätigte Fälle in jeder Provinz“, //Dateneingabeaufforderungsfenstertiteltyp: „Wortwolke“,
              sizeRange: [12, 64], //Canvas-Bereich. Wenn die Einstellung zu groß ist, gibt es weniger Wörter (Bildschirmüberlauf)
              rotationRange: [-45, 90], //Daten-Flip-Bereich //shape: 'Kreis',
              Textauffüllung: 0,
              automatische Größe: {
                  aktivieren: wahr,
                  minGröße: 6
              },
              Textstil: {
                  normal: {
                      Farbe: Funktion() {
                          returniere 'rgb(' + [
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  Schwerpunkt:
                      Schattenunschärfe: 10,
                      Schattenfarbe: '#333'
                  }
              },
              Daten: Daten1,
          }]
      };
 
      var chart2Option = {
          Titel:
              Text: 'Bestätigte Fälle in jeder Provinz - Wortwolke', //Titel x: 'Mitte',
              Textstil: {
                  Schriftgröße: 23
              }
 
          },
          Hintergrundfarbe: '#fff',
          Tooltip: {
              zeigen: wahr
          },
          Serie: [{
              Name: „Bestätigte Fälle in jeder Provinz“, //Titel des Dateneingabeaufforderungsfensters Typ: „Wortwolke“,
              sizeRange: [12, 64], //Canvas-Bereich. Wenn die Einstellung zu groß ist, gibt es weniger Wörter (Bildschirmüberlauf)
              rotationRange: [-45, 90], //Daten-Flip-Bereich //shape: 'Kreis',
              Textauffüllung: 0,
              automatische Größe: {
                  aktivieren: wahr,
                  minGröße: 6
              },
              Textstil: {
                  normal: {
                      Farbe: Funktion() {
                          returniere 'rgb(' + [
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  Schwerpunkt:
                      Schattenunschärfe: 10,
                      Schattenfarbe: '#333'
                  }
              },
              Daten: Daten2,
          }]
      };
      var chart3Option = {
          Titel:
              Text: 'Kumuliert bestätigte Fälle in jeder Stadt - Wortwolke', //Titel x: 'Mitte',
              Textstil: {
                  Schriftgröße: 23
              }
 
          },
          Hintergrundfarbe: '#fff',
          Tooltip: {
              zeigen: wahr
          },
          Serie: [{
              Name: „Kumuliert bestätigte Fälle in jeder Stadt“, //Dateneingabeaufforderungsfenstertiteltyp: „Wortwolke“,
              sizeRange: [12, 64], //Canvas-Bereich. Wenn die Einstellung zu groß ist, gibt es weniger Wörter (Bildschirmüberlauf)
              rotationRange: [-45, 90], //Daten-Flip-Bereich //shape: 'Kreis',
              Textauffüllung: 0,
              automatische Größe: {
                  aktivieren: wahr,
                  minGröße: 6
              },
              Textstil: {
                  normal: {
                      Farbe: Funktion() {
                          konsole.log('rgb(' + [
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160)
                          ].join(',') + ')')
                          returniere 'rgb(' + [
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  Schwerpunkt:
                      Schattenunschärfe: 10,
                      Schattenfarbe: '#333'
                  }
              },
              Daten: Daten3,
          }]
      };
      var chart4Option = {
          Titel:
              Text: 'Aktuelle bestätigte Fälle in jeder Stadt - Wortwolke', //Titel x: 'Mitte',
              Textstil: {
                  Schriftgröße: 23
              }
 
          },
          Hintergrundfarbe: '#fff',
          Tooltip: {
              zeigen: wahr
          },
          Serie: [{
              Name: „Bestätigte Fälle in jeder Stadt“, //Titel des Dateneingabefensters Typ: „Wortwolke“,
              sizeRange: [12, 64], //Canvas-Bereich. Wenn die Einstellung zu groß ist, gibt es weniger Wörter (Bildschirmüberlauf)
              rotationRange: [-45, 90], //Daten-Flip-Bereich //shape: 'Kreis',
              Textauffüllung: 0,
              automatische Größe: {
                  aktivieren: wahr,
                  minGröße: 6
              },
              Textstil: {
                  normal: {
                      Farbe: Funktion() {
                          konsole.log('rgb(' + [
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160)
                          ].join(',') + ')')
                          returniere 'rgb(' + [
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160),
                              Mathe.Runde(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  Schwerpunkt:
                      Schattenunschärfe: 10,
                      Schattenfarbe: '#333'
                  }
              },
              Daten: Daten4,
          }]
      };
      chart1.setOption(chart1Option);
      chart2.setOption(chart2Option);
      chart3.setOption(chart3Option);
      chart4.setOption(chart4Option);
    },
  },
};
</Skript>
<style lang="less">
 
</Stil>

5. Fertige Zeichnung

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Echarts-Wortwolkendiagrammen in Vue. Weitere relevante Inhalte zu Echarts-Wortwolkendiagrammen in Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Grundlegendes Tutorial zum Hinzufügen von Echarts-Diagrammen in Vue
Detailliertes Tutorial zur Verwendung von Vue zur Entwicklung dynamischer Aktualisierungs-Echarts-Komponenten
Beispielcode für die Verwendung von E-Charts in Vue (3 Bildtypen)
Detaillierte Erläuterung von Vue2+Echarts zur Realisierung eines Dashboards zur Visualisierung mehrerer Diagrammdaten (mit Quellcode)
Detaillierte Erläuterung von zwei Möglichkeiten zur Verwendung von echarts.js in Vue-Dateien
Verwenden von eCharts in vue.js zum Implementieren einer dynamischen Datenaktualisierungsfunktion
Ein Beispiel für eine Methode zur Anzeige der Datenvisualisierung auf einem großen Bildschirm basierend auf vue+echarts
Vue Echarts implementiert ein visuelles Weltkarten-Codebeispiel
Detaillierte Erklärung zum asynchronen Update und Laden von Daten bei der Verwendung von ECharts in Vue
Vue + echarts realisiert die Methode zum dynamischen Zeichnen von Diagrammen und zum asynchronen Laden von Daten

<<: Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux

>>: Detaillierte Erklärung des Update-Befehls für Software (Bibliothek) unter Linux