Detaillierte Erklärung des Javascript Echarts Luftqualitätskarteneffekts

Wir müssen zunächst die Luftqualitätsdaten mit den Kartendaten kombinieren:

Kartendaten haben den Attributnamen

Bildbeschreibung hier einfügen

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:

Bildbeschreibung hier einfügen

Nehmen Sie abschließend einige Effektkonfigurationen vor:

Bildbeschreibung hier einfügen

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>

Zusammenfassen

Dieser 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:

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung
Ein Artikel zum Lösen des Echarts-Kartenkarussell-Highlights
Python verwendet Pyecharts zur Visualisierung von Kartendaten
vue+echarts realisiert den Flusseffekt der China-Karte (detaillierte Schritte)
vue+echarts+datav Datenanzeige auf großem Bildschirm und Implementierung einer Drilldown-Funktion für Provinzen, Städte und Landkreise auf einer Karte Chinas
Fallstudie zur Einführung einer chinesischen Karte in Echarts in Vue

<<: 21 Best Practices zur MySQL-Standardisierung und -Optimierung!

>>: Docker-Image erstellen Dockerfile und Commit-Operationen