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:
|
<<: Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux
>>: Detaillierte Erklärung des Update-Befehls für Software (Bibliothek) unter Linux
Artikel empfehlen
Detaillierte Erklärung zur Verwendung von Docker durch Deepin zur Installation einer MySQL-Datenbank
Fragen Sie zuerst die MySQL-Quelle ab Docker-Such...
Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung
Inhaltsverzeichnis 1. Komponentenorganisation 2. ...
So erstellen Sie einen Elastic-Stack-Cluster mit mehreren Knoten auf RHEL8/CentOS8
Elastic Stack, allgemein bekannt als ELK Stack, i...
Detaillierte Schritte zur Implementierung der Excel-Importfunktion in Vue
1. Front-End-geführte Implementierungsschritte De...
Lösung für das Problem der zu hohen Durchdringung von Eingabe- und Textbereichsebenen im WeChat-Applet
Die nativen Komponenten des WeChat-Miniprogramms ...
Linux Überprüfen Sie den Installationsort der Software einfache Methode
1. Überprüfen Sie den Installationspfad der Softw...
Gojs implementiert Ameisenlinien-Animationseffekt
Inhaltsverzeichnis 1. Gojs-Implementierung 1. Zei...
Containerisierungstransformation für Docker-Großprojekte
Virtualisierung und Containerisierung sind zwei u...
Detaillierte Erläuterung des Rundungsgenauigkeitsproblems der toFixed () -Methode in JS
Inhaltsverzeichnis Die Fallstricke Füllmethode Wa...
Vue-Anweisungen für benutzerdefinierte V-HAS, Schritte zur Beurteilung der Schaltflächenberechtigung
Inhaltsverzeichnis Anwendungsszenario Einfach aus...
Zusammenfassung der MySQL-Entwicklungsstandards und -Nutzungskenntnisse
1. Namenskonventionen 1. Datenbanknamen, Tabellen...
gbk utf8 So verstehen und verwenden Sie die GBK- und UTF-8-Webseitencodierung richtig
Die Kodierung von Webseiten wird im Englischen als...
Beispielcode zur Implementierung der Google-Anmeldung über Drittanbieter in Vue
Inhaltsverzeichnis 1. Konfiguration der Entwickle...
border-radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen
border-radius:10px; /* Alle Ecken sind mit einem ...
Einführung in die Apache-Bereitstellung von https in der Kryptografie
Inhaltsverzeichnis Zweck Experimentelle Umgebung ...