JavaScript-Datenvisualisierung: ECharts-Kartenerstellung

Inhaltsverzeichnis

Überblick
Vorsichtsmaßnahmen

1. Nutzung
2. Schritte zur Umsetzung

Vorläufiger Implementierungscode

Wirkung:

Gemeinsame Geokonfiguration

Das Effektdiagramm nach dem Hinzufügen der obigen Konfiguration:

Eine Provinz anzeigen (Provinz Henan)

Wirkung

Verschiedene Bereiche zeigen unterschiedliche Farben an

Kombination aus Karte und Streudiagramm

Zusammenfassen

Überblick

Karten sind ein sehr gängiges Anzeigemittel bei unserer täglichen Datenvisualisierungsanalyse. Sie sind nicht nur schön, sondern auch großartig. Besonders bei Großbildschirmen spielt es eine unverzichtbare Rolle

Vorsichtsmaßnahmen

1. Nutzung

1. Baidu-Karten-API (AutoNavi-Karten-API)

Sie müssen sich für die Baidu-API bewerben

2. Vektorkarte

Vektorkartendaten müssen vorbereitet werden

2. Schritte zur Umsetzung

1. Die grundlegendste Codestruktur von ECharts

Js-Datei importieren – DOM-Container – Objekt initialisieren – Option setzen

2. Bereiten Sie die JSON-Datei der Vektorkarte von China vor und legen Sie sie im Verzeichnis json/map/ ab.

3. Verwenden Sie Ajax, um china.json abzurufen

//
$get('json/map/china.json',Funktion (chinaJson) {})

4. Registrieren Sie die JSON-Daten der Karte im globalen Echarts-Objekt in der Rückruffunktion

echarts.registerMap('chinaMap',chinaJson)

5. Unter Geo festlegen

{
    Typ: 'Karte',
    Karte: „ChinaKarte“
}

Vorläufiger Implementierungscode

<!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>Map-Implementierung</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</Kopf>
<Text>
    <div Stil="Breite:600px;Höhe:400px;"></div>
    <Skript>
        var meineCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', Funktion (chinaJson) {
            // chinaJson sind die Vektorkartendaten jeder Provinz in China // console.log(chinaJson);
            // Karte registrieren dataecharts.registerMap('chinaMap',chinaJson)
            var option = {
                geo: {
                    Typ: "Karte",
                    //chinaMap muss mit dem ersten Parameter in registerMapmap übereinstimmen: „chinaMap“
                }
            }
            myCharts.setOption(Option)
        })
    </Skript>
</body>
</html>

Die zurückgegebenen Daten gibt chinaJson als Screenshot im Browserhintergrund aus:

Bildbeschreibung hier einfügen

Lassen Sie uns eine Provinz erweitern und einen Blick darauf werfen (Provinz Taiwan als Beispiel):

Bildbeschreibung hier einfügen

Wirkung:

Bildbeschreibung hier einfügen

Gemeinsame Geokonfiguration

Ermöglicht Zoom- und Zieheffekte

durchstreifen: wahr

Namensanzeige

Etikett{
anzeigen:wahr
}

Anfängliches Zoomverhältnis

Zoom: 1,2

Legen Sie die Koordinaten des Kartenmittelpunkts fest

// Dieser Koordinatenpunkt kann in den Daten abgerufen werden, die wir zurückgeben
Mitte: [121.509062, 25.044332]

Das Effektdiagramm nach dem Hinzufügen der obigen Konfiguration:

Bildbeschreibung hier einfügen

Eine Provinz anzeigen (Provinz Henan)

Hier gibt es nicht viel zu sagen, ändern Sie einfach die Vektorkartendaten vom ursprünglichen gesamten Land in Henan.

PS: Kuan Ge kommt aus Henan, deshalb habe ich die Provinz Henan als Beispiel verwendet

<!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>Kartendarstellung eines bestimmten Gebietes</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</Kopf>
<Text>
    <div Stil="Breite:600px;Höhe:400px;"></div>
    <Skript>
        var meineCharts = echarts.init(document.querySelector('div'))
        $.get('json/map/henan.json',(ret) => {
            echarts.registerMap('henanMap', ret)
            Konsole.log(ret);
            var option = {
                geo: {
                    Typ: 'Karte',
                    Karte: „henanMap“,
                    Zoom: 1,
                    Etikett: {
                        zeigen: wahr
                    },
                    Mitte: [115.650497, 34.437054],
                    durchstreifen: wahr
                }
            }
            myCharts.setOption(Option)
        })
    </Skript>
</body>
</html>

Wirkung

Bildbeschreibung hier einfügen

Verschiedene Bereiche zeigen unterschiedliche Farben an

1. Grundlegende Karte von China anzeigen

2. Stellen Sie die Luftqualitätsdaten auf die Objekte unter der Serie ein

3. Verknüpfen Sie die Daten unter der Serie mit Geo

4. Konfigurieren Sie visualMap

Hinweis: Hier müssen wir ein Array vorbereiten, das ein Objekt enthält. Jedes Objekt hat zwei Schlüsselwerte: Name entspricht dem Provinznamen und Wert entspricht dem Farbwert.

Schauen Sie sich zunächst das Effektdiagramm an und prüfen Sie, ob es Ihnen bekannt vorkommt:

Bildbeschreibung hier einfügen

Dies ähnelt unserem COVID-19-Datendiagramm. Die Epidemie ist noch lange nicht vorbei. Jeder darf sie nicht auf die leichte Schulter nehmen, sich aktiv impfen lassen und sich täglich gut schützen.

Der Code ist wie folgt und die Kommentare sind ziemlich detailliert, daher werde ich sie nicht einzeln erklären.

<!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>Map-Implementierung</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</Kopf>
<Text>
    <div Stil="Breite:600px;Höhe:400px;"></div>
    <Skript>
        /**
         * 1. Zeigen Sie eine einfache Karte von China an. * 2. Legen Sie Daten zur Luftqualität für Objekte unter Serien fest. * 3. Verknüpfen Sie Daten unter Serien mit Geo. * 4. Konfigurieren Sie visualMap
         */
        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'))
        $.get('./json/map/china.json', Funktion (chinaJson) {
            echarts.registerMap('chinaMap',chinaJson)
            var option = {
                geo: {
                    Typ: "Karte",
                    //chinaMap muss mit dem ersten Parameter in registerMapmap übereinstimmen: 'chinaMap',
                    // Zoom- und Zieheffekte zulassen roam: true,
                    // Anzeigebezeichnung für Namen:{
                        zeigen: wahr
                    }
                },
                Serie: [
                    {
                        Typ: "Karte",
                        Daten: airData,
                        geoIndex: 0 //Verknüpfe die Luftqualitätsdaten mit der Konfiguration des 0. Geo}
                ],
                visuelle Karte:
                    Mindestwert: 0,
                    max: 300,
                    im Bereich: {
                        // Steuere den Bereich des Farbverlaufs color: ['#fff', '#f00']
                    },
                    // Slider erscheint berechenbar: true
                }
            }
            myCharts.setOption(Option)
        })
    </Skript>
</body>
</html>

Kombination aus Karte und Streudiagramm

1. Basierend auf dem obigen Code fügen Sie der Serie die folgende Konfiguration hinzu

{
     data: scatterData, //Konfiguriere die Koordinatendaten der verstreuten Punkte type: 'effectScatter',
     coordinateSystem: 'geo', //Geben Sie das von den verstreuten Punkten verwendete Koordinatensystem an. Das Koordinatensystem von geo rippleEffect: {
          scale: 10 //Stellt den Maßstab der Wellenanimation ein}
}

Effektbild:

Bildbeschreibung hier einfügen

Zusammenfassen

Dies ist das Ende dieses Artikels. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie den weiteren Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:

So verwenden Sie Echarts zum Visualisieren von Komponenten in Vue
Implementierung der Drag-Datenvisualisierungsfunktion in Vue basierend auf Echarts
Vollständige Schritt-für-Schritt-Anleitung zur Verwendung der Echarts-Visualisierungsbibliothek in Vue
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
JavaScript Echart Visualisierung lernen

<<: Verstehen Sie einfach die Schreib- und Ausführungsreihenfolge von MySQL-Anweisungen

>>: Detaillierte Erläuterung der MySQL-Transaktionsverwaltungsvorgänge