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

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'
            }
          }
        ]
      }

//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
	   }
   }