Echarts-Beispielcode zur Verwendung mehrerer X-Achsen zur Erstellung einer siebentägigen Wettervorhersage

Echarts-Beispielcode zur Verwendung mehrerer X-Achsen zur Erstellung einer siebentägigen Wettervorhersage

UI-Design

Design-Effekt

Echarts Beispieleffekt

Beispieleffekt

Vorwort

Für die von der Benutzeroberfläche bereitgestellten Entwurfszeichnungen haben verschiedene meteorologische Websites ähnliche Auswirkungen, und die Implementierungsmethoden können in zwei Kategorien unterteilt werden:

  1. Rasterlayout + Diagrammrahmen zum Zeichnen der Temperaturkurve;
  2. Rasterlayout + selbstgezeichnete Temperaturkurve auf Leinwand;

Der gemeinsame Punkt dieser beiden Implementierungsmethoden besteht darin, dass die Kurve und der Beschreibungstext oben getrennt sind. Die Schwierigkeit dabei besteht darin, eine adaptive Ausrichtung des Datumssymbolteils und des Temperaturkurventeils zu erreichen. Da meine CSS-Erfahrung verhältnismäßig gering ist und ich das Diagramm-Framework Echarts verhältnismäßig häufiger verwende, habe ich beschlossen, es mit Echarts ( Version 4.6.0 ) zu versuchen, um den oben genannten Effekt zu erzielen. Nachdem ich das Dokument überprüft hatte, stellte ich fest, dass Echarts mehrere X-Achsen und Rich-Text-Anzeigen unterstützt. Die Anzeigeposition kann durch Anpassen des X-Achsen-Offsets gesteuert werden. Gleichzeitig unterstützt Rich Text das Festlegen von Hintergrundsymbolen, mit denen Wettersymbole angezeigt werden können. Nach einigen Tests habe ich den folgenden Beispielcode erhalten.

Beispielcode

Der folgende Code kann in Echarts importiert und direkt ausgeführt werden:

var option = {
        Netz: {
          zeigen: wahr,
          Hintergrundfarbe: 'transparent',
          Deckkraft: 0,3,
          Rahmenbreite: '0',
          oben: '180',
          unten: '0'
        },
        Tooltip: {
          Auslöser: ‚Achse‘
        },
        Legende: {
          anzeigen:false
        },
        xAchse: [
          // Datum{
            Typ: "Kategorie",
            boundageGap: falsch,
            Position: 'oben',
            Einpresstiefe: 130,
            z-Ebene: 100,
            Achsenlinie: {
              anzeigen:false
            },
            AchseTick: {
              anzeigen:false
            },
            Achsenbezeichnung: {
              Intervall: 0,
              Formatierer: [
                „{a|{Wert}}“
              ].join('\n'),
              reich:
                A: {
                  // Farbe: 'weiß',
                  Schriftgröße: 18
                }
              }
            },
            NameTextStyle: {

            },
            Daten: ["25.","26.","27.","28.","29.","30.","31."]
          },
          // Woche{
            Typ: "Kategorie",
            boundageGap: falsch,
            Position: 'oben',
            Einpresstiefe: 110,
            z-Ebene: 100,
            Achsenlinie: {
              anzeigen:false
            },
            AchseTick: {
              anzeigen:false
            },
            Achsenbezeichnung: {
              Intervall: 0,
              Formatierer: [
                „{a|{Wert}}“
              ].join('\n'),
              reich:
                A: {
                  // Farbe: 'weiß',
                  Schriftgröße: 14
                }
              }
            },
            NameTextStyle: {
              Schriftstärke: "fett",
              Schriftgröße: 19
            },
            Daten: ["Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"]
          },
          // Wettersymbol {
            Typ: "Kategorie",
            boundageGap: falsch,
            Position: 'oben',
            Versatz: 20,
            z-Ebene: 100,
            Achsenlinie: {
              anzeigen:false
            },
            AchseTick: {
              anzeigen:false
            },
            Achsenbezeichnung: {
              Intervall: 0,
              Formatierer: Funktion (Wert, Index) {
                gibt '{' + Index + '| }\n{b|' + Wert + '}' zurück
              },
              reich:
                0: {
                  Hintergrundfarbe:
                    // Bild: erfordern('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                    Bild: „https://d.scggqx.com/forecast/img/小雨.png“
                  },
                  Höhe: 40,
                  Breite: 40
                },
                1: {
                  Hintergrundfarbe:
                    // Bild: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                    Bild: „https://d.scggqx.com/forecast/img/小雨.png“
                  },
                  Höhe: 40,
                  Breite: 40
                },
                2: {
                  Hintergrundfarbe:
                    // Bild: erfordern('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                    Bild: „https://d.scggqx.com/forecast/img/阴.png“
                  },
                  Höhe: 40,
                  Breite: 40
                },
                3: {
                  Hintergrundfarbe:
                    // Bild: erfordern('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                    Bild: „https://d.scggqx.com/forecast/img/小雨.png“
                  },
                  Höhe: 40,
                  Breite: 40
                },
                4: {
                  Hintergrundfarbe:
                    // Bild: erfordern('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                    Bild: „https://d.scggqx.com/forecast/img/多云.png“
                  },
                  Höhe: 40,
                  Breite: 40
                },
                5: {
                  Hintergrundfarbe:
                    // Bild: erfordern('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                    Bild: „https://d.scggqx.com/forecast/img/小雨.png“
                  },
                  Höhe: 40,
                  Breite: 40
                },
                6: {
                  Hintergrundfarbe:
                    // Bild: erfordern('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                    Bild: „https://d.scggqx.com/forecast/img/小雨.png“
                  },
                  Höhe: 40,
                  Breite: 40
                },
                B: {
                  // Farbe: 'weiß',
                  Schriftgröße: 12,
                  Zeilenhöhe: 30,
                  Höhe: 20
                }
              }
            },
            NameTextStyle: {
              Schriftstärke: "fett",
              Schriftgröße: 19
            },
            // Daten: diese.Wetterdaten.Wetter
            Daten: ["leichter Regen","leichter Regen","bewölkt","leichter Regen","bewölkt","leichter Regen","leichter Regen"]
          }
        ],
        yAchse: {
          Typ: "Wert",
          anzeigen: falsch,
          Achsenbezeichnung: {
            Formatierer: '{Wert} °C',
            Farbe: 'weiß'
          }
        },
        Serie: [
          {
            Name: 'Maximale Temperatur',
            Typ: "Linie",
            Daten: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
            Symbol: 'leererKreis',
            Symbolgröße: 10,
            showSymbol: true,
            glatt: wahr,
            Artikelstil: {
              normal: {
                Farbe: '#C95843'
              }
            },
            Etikett: {
              zeigen: wahr,
              Position: 'oben',
              // Farbe: 'weiß',
              Formatierer: "{c} °C"
            },
            Linienstil:
              Breite: 1,
              // Farbe: 'weiß'
            },
            Bereichsstil: {
              Deckkraft: 1,
              Farbe: 'transparent'
            }
          },
          {
            Name: 'Minimale Temperatur',
            Typ: "Linie",
            Daten: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
            Symbol: 'leererKreis',
            Symbolgröße: 10,
            showSymbol: true,
            glatt: wahr,
            Artikelstil: {
              normal: {
                Farbe: 'blau'
              }
            },
            Etikett: {
              zeigen: wahr,
              Position: 'unten',
              // Farbe: 'weiß',
              Formatierer: "{c} °C"
            },
            Linienstil:
              Breite: 1,
              // Farbe: 'weiß'
            },
            Bereichsstil: {
              Deckkraft: 1,
              Farbe: 'transparent'
            }
          }
        ]
      }

Der schwierigste Teil des obigen Codes ist das Festlegen des Wettersymbols. Da der Wert in der Formatierungsmethode von axisLabel nicht im Rich-Text verwendet werden kann, wird der Index des Werts in der Formatierungsmethode auf den CSS-Namen im Rich-Text festgelegt. Anschließend wird der Index verwendet, um den Symbolnamen abzurufen, der beim Festlegen des Wettersymbols angezeigt werden soll.

//Formatierungsmethode für Achsenlabelformatter: function(value, index) {
 gibt '{' + Index + '| }\n{b|' + Wert + '}' zurück
}

// Rich-Methode von axisLabel rich: {
	Index: {
	     Hintergrundfarbe:
	       Bild: erforderlich('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[index]] + '.png')
	     },
	     Höhe: 40,
	     Breite: 40
	   }
   }

Notiz :
1. this.weatherIconDic ist ein Datenwörterbuch eines Wettersymbols, das ich lokal definiert habe. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
2. this.weatherdata.weather ist der vom Backend zurückgesendete Wettertyp. (Beispiel: ["leichter Regen", "leichter Regen", "bedeckt", "leichter Regen", "wolkig", "leichter Regen", "leichter Regen", "leichter Regen"])

Endergebnis

Bildbeschreibung hier einfügen

Damit ist dieser Artikel über den Beispielcode zur Verwendung von Echarts zur Erstellung einer siebentägigen Wettervorhersage mit mehreren X-Achsen abgeschlossen. Weitere Informationen zur mehrachsigen Wettervorhersage von Echarts finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • echarts implementiert das Abrufen des Startwerts von datazoom (einschließlich x-Achse und y-Achse)
  • Detaillierte Erklärung des numerischen Beispielcodes des Echarts-Statistik-X-Achsenintervalls

<<:  So installieren Sie Tomcat8 im Docker

>>:  So verwenden Sie Cursor-Trigger in MySQL

Artikel empfehlen

So lösen Sie das Problem verschwommener kleiner Symbole auf Mobilgeräten

Vorwort Zuvor habe ich über das Problem der verti...

JavaScript implementiert die Verarbeitung großer Datei-Uploads

Beim Hochladen von Dateien, z. B. Videodateien, d...

Verwenden Sie in JS nicht mehr überall Operatoren für absolute Gleichheit.

Inhaltsverzeichnis Überblick 1. Test auf Nullwert...

So verwenden Sie Verbindungen der Physik-Engine in CocosCreator

Inhaltsverzeichnis Mausgelenk Mausgelenk AbstandG...

Detailliertes Tutorial zum Herstellen einer Verbindung zu einem Remote-Server-Docker zum Bereitstellen eines Spring Boot-Projekts in IDEA

Vorbereitende Schritte Habe einen Cloud-Server, m...

JS realisiert den Scroll-Effekt von Online-Ankündigungen

In diesem Artikel wird der spezifische JS-Code zu...

So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein

Fallstricke bei der Projektimplementierung Beim B...

Installations-Tutorial für die komprimierte Version von MySQL 5.7.18 Archiv

In diesem Artikel wird die spezifische Methode zu...

Linux-Installation Redis-Implementierungsprozess und Fehlerlösung

Ich habe heute Redis installiert und es sind eini...

Ausführliche Erklärung zu Sitzung und Cookie in Tomcat

Vorwort HTTP ist ein zustandsloses Kommunikations...

Designtheorie: Textausdruck und Benutzerfreundlichkeit

<br />Beim Textdesign konzentrieren wir uns ...

JavaScript implementiert die Generierung eines 4-stelligen zufälligen Bestätigungscodes

In diesem Artikelbeispiel wird der spezifische Co...

Miniprogramm zur Implementierung des kompletten Einkaufswagens

Das Miniprogramm implementiert einen vollständige...

Installieren Sie Mininet aus dem Quellcode auf Ubuntu 16.04

Mininet Mininet ist eine leichtgewichtige, softwa...

Schnelle Deinstallation und Installation der Knotenumgebung eines Linux-Servers (einfacher Einstieg)

1. Deinstallieren Sie zuerst npm sudo npm deinsta...