Detaillierte Erklärung des Javascript Echarts Luftqualitätskarteneffekts
|
Wir müssen zunächst die Luftqualitätsdaten mit den Kartendaten kombinieren: Kartendaten haben den Attributnamen
Die Luftqualität in unseren verschiedenen Städten hat auch ein Namensattribut. Diese beiden Attribute sind gleich und werden beide als Namen bezeichnet, sodass wir sie verknüpfen können:
var airData = [
{ Name: 'Peking', Wert: 39,92 },
{ Name: 'Tianjin', Wert: 39,13 },
{ Name: 'Shanghai', Wert: 31,22 },
{ Name: 'Chongqing', Wert: 66 },
{ Name: 'Hebei', Wert: 147 },
{ Name: 'Henan', Wert: 113 },
{ Name: 'Yunnan', Wert: 25,04 },
{ Name: 'Liaoning', Wert: 50 },
{ Name: 'Heilongjiang', Wert: 114 },
{ Name: 'Hunan', Wert: 175 },
{ Name: 'Anhui', Wert: 117 },
{ Name: 'Shandong', Wert: 92 },
{ Name: 'Xinjiang', Wert: 84 },
{ Name: 'Jiangsu', Wert: 67 },
{ Name: 'Zhejiang', Wert: 84 },
{ Name: 'Jiangxi', Wert: 96 },
{ Name: 'Hubei', Wert: 273 },
{ Name: 'Guangxi', Wert: 59 },
{ Name: 'Gansu', Wert: 99 },
{ Name: 'Shanxi', Wert: 39 },
{ Name: 'Innere Mongolei', Wert: 58 },
{ Name: 'Shaanxi', Wert: 61 },
{ Name: 'Jilin', Wert: 51 },
{ Name: 'Fujian', Wert: 29 },
{ Name: 'Guizhou', Wert: 71 },
{ Name: 'Guangdong', Wert: 38 },
{ Name: 'Qinghai', Wert: 57 },
{ Name: 'Tibet', Wert: 24 },
{ Name: 'Sichuan', Wert: 58 },
{ Name: 'Ningxia', Wert: 52 },
{ Name: 'Hainan', Wert: 54 },
{ Name: 'Taiwan', Wert: 88 },
{ Name: 'Hongkong', Wert: 66 },
{ Name: 'Macao', Wert: 77 },
{ Name: 'Inseln im Südchinesischen Meer', Wert: 55 }
]
Als nächstes müssen wir die Luftqualitätsdaten in die Reihe konfigurieren:
Nehmen Sie abschließend einige Effektkonfigurationen vor:
Vollständiger Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Karte – Luftqualität in verschiedenen Städten</title>
<script src="./lib/echarts.js"></script>
<script src="./lib/axios.js"></script>
</Kopf>
<Text>
<div Stil="Breite: 600px; Höhe: 400px;Rand: 1px durchgehend hellblau;"></div>
<Skript>
var airData = [
{ Name: 'Peking', Wert: 39,92 },
{ Name: 'Tianjin', Wert: 39,13 },
{ Name: 'Shanghai', Wert: 31,22 },
{ Name: 'Chongqing', Wert: 66 },
{ Name: 'Hebei', Wert: 147 },
{ Name: 'Henan', Wert: 113 },
{ Name: 'Yunnan', Wert: 25,04 },
{ Name: 'Liaoning', Wert: 50 },
{ Name: 'Heilongjiang', Wert: 114 },
{ Name: 'Hunan', Wert: 175 },
{ Name: 'Anhui', Wert: 117 },
{ Name: 'Shandong', Wert: 92 },
{ Name: 'Xinjiang', Wert: 84 },
{ Name: 'Jiangsu', Wert: 67 },
{ Name: 'Zhejiang', Wert: 84 },
{ Name: 'Jiangxi', Wert: 96 },
{ Name: 'Hubei', Wert: 273 },
{ Name: 'Guangxi', Wert: 59 },
{ Name: 'Gansu', Wert: 99 },
{ Name: 'Shanxi', Wert: 39 },
{ Name: 'Innere Mongolei', Wert: 58 },
{ Name: 'Shaanxi', Wert: 61 },
{ Name: 'Jilin', Wert: 51 },
{ Name: 'Fujian', Wert: 29 },
{ Name: 'Guizhou', Wert: 71 },
{ Name: 'Guangdong', Wert: 38 },
{ Name: 'Qinghai', Wert: 57 },
{ Name: 'Tibet', Wert: 24 },
{ Name: 'Sichuan', Wert: 58 },
{ Name: 'Ningxia', Wert: 52 },
{ Name: 'Hainan', Wert: 54 },
{ Name: 'Taiwan', Wert: 88 },
{ Name: 'Hongkong', Wert: 66 },
{ Name: 'Macao', Wert: 77 },
{ name: 'Inseln im Südchinesischen Meer', value: 55 }
]
var meineCharts = echarts.init(document.querySelector('div'))
axios.get('./json/map/china.json').then(res => {
konsole.log(res.daten)
echarts.registerMap('china', res.data)
var option = {
geo: {
Typ: "Karte",
Karte: 'China',
wandern: wahr,
Etikett: {
zeigen: wahr
}
},
Serie: [
{
Daten: airData, // Luftqualitätsdaten GeoIndex: 0, // Luftqualitätsdaten dem 0. Geokonfigurationstyp zuordnen: „Karte“
}
],
visuelle Karte:
min: 0, // Minimalwert max: 300, // Maximalwert inRange: {
color: ['pink', 'blue'] // Untere linke Ecke steuern und Farbverlaufsfarbe zuordnen},
berechenbar: true // Steuert den unteren linken Schieberegler}
}
myCharts.setOption(Option)
})
</Skript>
</body>
</html>
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können! Das könnte Sie auch interessieren:
|
<<: 21 Best Practices zur MySQL-Standardisierung und -Optimierung!
>>: Docker-Image erstellen Dockerfile und Commit-Operationen
Artikel empfehlen
Entfernen Sie das Etikett und die Schaltfläche und fügen Sie das Hintergrundbild mit gepunkteter Linie/Schatten hinzu, perfekte Lösung
Wenn sich ein Benutzer registriert, klickt er auf...
Grafisches Tutorial zur Installation der neuesten Version des MySQL-Servers unter Windows 7 64 Bit
In letzter Zeit habe ich die MySQL-Datenbank unte...
Lösen Sie das Problem, dass der MySql-Client in Sekunden beendet wird (my.ini nicht gefunden).
Problembeschreibung (Umgebung: Windows 7, MySql 8...
Probleme beim Laden und Blockieren von JavaScript-Dateien: Fallstudie zur Leistungsoptimierung
Lassen Sie mich mit einer Frage beginnen: Wenn Si...
Alibaba Cloud ESC Server Docker-Bereitstellung von Single Node Mysql
1. Laden Sie die beschleunigte Version von msyql ...
JavaScript-Implementierung eines Karussellbeispiels
In diesem Artikel wird der spezifische Code für J...
Detaillierter Prozess zur Installation des Docker-Plugins in IntelliJ IDEA (Version 2018)
Inhaltsverzeichnis 1. Entwicklungsumgebung 2. Ins...
Lösung für die Willkommensmeldung im Notfallmodus beim Booten von CentOS7.4
Heute habe ich eine virtuelle Maschine für ein Ex...
So erstellen Sie Komponenten in React
Inhaltsverzeichnis Vorwort Komponenteneinführung ...
Tutorial zur Installation von Ubuntu 1804 in VMware Workstation 15 Pro (mit Bildern und Text)
Dieser Hinweis ist ein Installationstutorial. Er ...
Eine kurze Diskussion über den Unterschied zwischen MySQL-Primärschlüsselindex und Nicht-Primärschlüsselindex
Inhaltsverzeichnis Was ist ein Index Der Untersch...
Detaillierte Hinweise zu React für Einsteiger
Inhaltsverzeichnis 1. Grundlegendes Verständnis v...
Daten in der Layui-Tabellenzeile dynamisch bearbeiten
Inhaltsverzeichnis Vorwort Stil Funktion Beschrei...
Was ist ein MIME-TYP? MIME-Typen-Typensammlung
Was ist ein MIME-TYP? 1. Zunächst müssen wir verst...
Webdesign-Dimensionen und Regeln für die Werbegestaltung auf Webseiten
1. Unter 800 x 600 gibt es keine horizontale Bild...