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
Detaillierte Schritte zur Installation von MySql 5.7.21 unter Linux
Vorwort Die am häufigsten verwendete Datenbank in...
So verteilen Sie mit CSS zwei Schaltflächen auf der linken und rechten Seite desselben übergeordneten Tags
In diesem Artikel wird hauptsächlich die Methode ...
Vue3 basierend auf der Skript-Setup-Syntax $refs-Verwendung
Inhaltsverzeichnis 1. Vue2-Syntax 2. Nutzung von ...
Wie verstecke ich einen bestimmten Text in HTML?
Code zum Ausblenden von Text, Ausblenden eines bes...
Vue verwendet MockJS, um simulierte Datenfalldetails zu generieren
Inhaltsverzeichnis Installieren Sie Mockjs in Ihr...
Lösung für das Problem, dass der MySQL-Dienst unter Windows nicht gestoppt oder gelöscht werden kann
Ich habe MySQL unter Windows installiert, indem i...
Detailliertes Tutorial zur Installation von MySQL 8.0.22 auf Redhat 7.3 (binäre Installation)
Inhaltsverzeichnis 1. Laden Sie das MySQL-Install...
Verwenden von js zum Implementieren eines einfachen Lichtschaltercodes
Körperteil: <button>Licht ein-/ausschalten&...
Einführung in die Überwachung des MySQL MHA-Betriebsstatus
Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...
Schritte der MySQL-Methode zum Bestimmen, ob es sich um eine Teilmenge handelt
Inhaltsverzeichnis 1. Problem 2. Lösung Option 1:...
Beispielcode für HTML-Framesets
Dieser Artikel stellt ein möglichst einfaches Fra...
Nginx-Weiterleitung basierend auf URL-Parametern
Anwendungsszenarien: Der Sprungpfad muss entsprec...
vue-pdf realisiert Online-Dateivorschau
In diesem Artikelbeispiel wird der spezifische Co...
Details zur Datenanzeige der Vue3-Listenschnittstelle
Inhaltsverzeichnis 1. Beispiel für die Anzeige de...
So importieren Sie SQL-Dateien in Navicat Premium
Ich habe heute mit der Arbeit an meinem Abschluss...