Echarts implementiert das Umschalten verschiedener X-Achsen in einem Diagramm (Beispielcode)

<Vorlage>
  <div>
    <div id="main" style="Höhe:350px;Breite:100%"></div>
  </div>
</Vorlage>
<Skript>
E-Charts aus „E-Charts“ importieren
Standard exportieren {
 Daten() {
    zurückkehren {
      Antwort:[],
      // dayX: [], // X-Achse des Tages weekX: [], // X-Achse der Woche monthX: [], // X-Achse des Monats yearX: [], // X-Achse des Jahres timeX: [], // X-Achse eines beliebigen Zeitraums dataY: [] // Y-Achse }
  },
 erstellt() {
    dies.fetchData()
  },
  
Methoden: {
//Daten in die Datenbank holen fetchData() {
    dies.axios({
          Methode: 'GET',
          URL: 'http://localhost:8080/xxxx/xxxx' }).dann(Funktion(resp) {
          Konsole.log("Sauerstoff ===>", bzw. Daten)
          let num = resp.data.length //Länge des Arrays ermitteln for (let i = 0; i <num; i++) {
            //Erstelle ein Objekt let arr = {}
            arr.timeX = resp.data[i].chkDate.slice(5, 10)
            arr.timeY = resp.data[i].oxgnSaturation
            vm.ans.push(arr)

          }

        })
     },
       init(DatenX, DatenY) {
      dies.meinChart = echarts.init(document.getElementById('main'))

      let-Option = {
        Legende: {
          Symbol: „Stapel“,
          // Daten: ['dieser Tag', 'dieser Monat', 'dieses Jahr'],
          Daten: ['diese Woche', 'diesen Monat', 'dieses Jahr', 'ausgewählter Zeitraum'],
          selectedMode: 'single', // Einzelauswahl selected: {
            Diese Woche: wahr,
            Aktueller Monat: false,
            Aktuelles Jahr: false,
            Ausgewählter Zeitraum: false
          }
        },
        Tooltip: {
          Auslöser: 'Achse',
          Achsenzeiger:
            Typ: „Kreuz“
          },
          //Benutzerdefiniertes Anzeigeetikettenformatierungsprogramm:Funktion(Parameter) {
            return params[0].name + '<br>Blutsauerstoff: '+params[0].data+' %'
          }
        },
        // Symbolleisten-Toolbox: {
          Besonderheit:
            saveAsImage: {} //Sie können einen Screenshot des Liniendiagramms machen und speichern.}
        },
        Netz: {
          left: 10, //Der Abstand zwischen der Komponente und der linken Seite des Containers right: 10,
          oben: 30,
          unten: 20,
          containLabel: wahr
        },

        dataZoom: [ // Mit der Maus das Vergrößern und Verkleinern des Liniendiagramms steuern {
            zeigen: wahr,
            Typ: 'innen',
            Filtermodus: „keine“,
            xAchsenIndex: [0]

          },
          {
            zeigen: wahr,
            Typ: 'innen',
            Filtermodus: „keine“,
            yAchsenIndex: [0]

          }
        ],
        x-Achse:
          Typ: "Kategorie",
          Miniintervall: 3,
          boundageGap: falsch,
          AchseTick: {
            anzeigen:false
          },
          geteilte Zeile: {
            // Stil der Trennlinie der X-Achse anzeigen: true,
            Linienstil:
              Farbe: ['#f3f0f0'],
              Breite: 1,
              Typ: „solide“
            }
          },
          Daten: DatenX
        },
        yAchse: [
          {
            Name: „Blutsauerstoff-Trenddiagramm“,
            Typ: "Wert",
            geteilte Zeile: {
              // Stil der Trennlinie der Y-Achse anzeigen: true,
              Linienstil:
                Farbe: ['#f3f0f0'],
                Breite: 1,
                Typ: „solide“
              }
            }
          }
        ],
        Serie: dataY

      }
      
  		this.myChart.on('legendselectchanged', obj => {
        var Optionen = this.myChart.getOption()
        //Hier ist die Auswahl, welche X-Achse umgeschaltet werden soll. Anschließend wird der Y-Wert umgeschaltet, wenn (obj.name == 'this week'){
          options.xAxis[0].data = diese.wocheX
        }sonst wenn (obj.name == 'diesen Monat'){
          options.xAxis[0].data = dieser.MonatX
        }sonst wenn (obj.name == 'dieses Jahr'){
          Optionen.xAxis[0].data = dieses.JahrX
        }else if (obj.name == 'ausgewählter Zeitraum'){
          Optionen.xAxis[0].data = this.timeX
        }

        this.myChart.setOption(Optionen, wahr)
      })

      // Zeigen Sie das Diagramm mit den gerade angegebenen Konfigurationselementen und Daten an.
      this.myChart.setOption(Option)

			
  },
    montiert() {

    setzeTimeout(() => {
      dies.$nextTick(() => {

        this.monthX = (this.res.map(item => item.monthX)).filter(Boolean) //Undefined, NaN, null, empty string herausfiltern this.weekX = (this.res.map(item => item.weekX)).filter(Boolean) //Undefined, NaN, null, empty string herausfiltern this.yearX = (this.res.map(item => item.yearX)).filter(Boolean) //Undefined, NaN, null, empty string herausfiltern this.timeX = (this.ans.map(item => item.timeX)).filter(Boolean) //Undefined, NaN, null, empty string herausfiltern //Werte dataY zuweisen. Wenn Sie möchten, dass eine X-Achse mehreren Y-Werten entspricht, können Sie ein {} hinzufügen.
        dies.dataY.push({
          Name: 'Aktueller Monat',
          Typ: 'Linie', // gerade Linie
          Artikelstil: {
            normal: {
              Farbe: '#2E2E2E',
              Linienstil:
                Farbe: '#2E2E2E',
                Breite: 2
              }
            }
          },
          Daten: diese.res.map(Artikel => Artikel.MonatY)
        })

        this.dataY.push({ //Hier können Sie die Anzeigemethode und Farbe eines unterbrochenen Zeilennamens anpassen: 'diese Woche',
          Typ: "Linie",
          Artikelstil: {
            normal: {
              Farbe: '#FF0000',
              Linienstil:
                Farbe: '#FF0000',
                Breite: 2
              }
            }
          },
          Daten: diese.res.map(Element => Element.WocheY)
        })


        this.dataY.push({ //Hier können Sie die Anzeigemethode und Farbe einer unterbrochenen Linie anpassen name: '年', //Dies muss mit dem Längentyp übereinstimmen: 'line',
          Artikelstil: {
            normal: {
              Farbe: '#0404B4',
              Linienstil:
                Farbe: '#0404B4',
                Breite: 2
              }
            }
          },
          Daten: diese.res.map(Artikel => Artikel.JahrY)
        })

        this.dataY.push({ //Hier können Sie die Anzeigemethode und Farbe eines unterbrochenen Liniennamens anpassen: 'Ausgewählter Zeitraum',
          Typ: "Linie",
          Artikelstil: {
            normal: {
              Farbe: '#DF01D7',
              Linienstil:
                Farbe: '#DF01D7',
                Breite: 2
              }
            }
          },
          Daten: diese.ans.map(Element => Element.timeY)
        })

        this.init(this.weekX, this.dataY) //Datenanzeige initialisieren window.onresize = this.myChart.resize //Fenstergröße des Icons adaptiv })
    }, 1000)
  }
}
</Skript>