Wie kann ich das Problem lösen, dass das zweite X-Achse-Etikett nicht in Echarts angezeigt wird?

Echarts Dual X-Achse: Lösen

Wenn Sie Echarts verwenden, um ein Diagramm mit einer doppelten X-Achse (z. B. einem Leistungsdiagramm) zu erstellen, können Sie auf das Problem stoßen, dass das zweite X-Achse-Etikett nicht angezeigt werden kann. Auch wenn axisLabel.show: true festgelegt ist, kann das Etikett noch fehlen und nur die Achse anzeigen. Dieser Artikel bietet eine effektive Lösung.

Hier finden Sie eine Beispielkonfiguration, die dieses Problem verursachen kann:

 xaxis: [{{
    Name: 'x Achse 1',
    min: Startzeit,
    Skala: wahr,
    Axisline: {
        Show: wahr,
        Linestyle: {
          Farbe: Farben [2]
        }
      },
    AxisLabel: {
      BackgroundColor: 'Rot',
      Formatter: '{Wert} ml'
    }
  }, {
    Name: 'x Achse 2',
    Axisline: {
        Show: wahr,
        Linestyle: {
          Farbe: Farben [2]
        }
      },
    min: Startzeit,
    Skala: wahr,
    AxisLabel: {
      BackgroundColor: 'Rot',
      innen: wahr,
      Show: wahr,
      HideOverlap: Richtig
    }
  }],

Das Problem ist, dass das Konfigurieren der X-Achse allein die Etikettenanzeige nicht garantiert. Der Schlüssel liegt in der Konfiguration von series . Um sicherzustellen, dass die Beschriftungen für die zweite X-Achse angezeigt werden, muss xAxisIndex: 1 für series mit der zweiten X-Achse zugeordneten Seriendaten festgelegt werden (der Index beginnt bei 0). Um potenzielle Rendering -Probleme zu lösen, können für series Seriendaten Duplikate erforderlich sein.

Lösung:

 Serie: [
    {
      Typ: 'Custom',
      Renderitem: RenderItem,
      ItemStyle: {
        Deckkraft: 0.8
      },
      codieren: {
        X: [1, 2],
        Y: 0
      },
      Daten: Daten
    },
    {
      Typ: 'Custom',
      Renderitem: RenderItem,
      xaxiSindex: 1, // Schlüssel: Geben Sie den zweiten X-Achsen-Elementstyle an: {{
        Deckkraft: 0.8
      },
      codieren: {
        X: [1, 2],
        Y: 0
      },
      Daten: Daten
    }
  ]

Durch das Einstellen xAxisIndex: 1 für die zweite series ist die Daten gezwungen, mit der zweiten X-Achse verbunden zu sein, sodass die Etikett der zweiten X-Achse angezeigt werden kann. Während dieser Ansatz möglicherweise wiederholtes Rendering beinhaltet, handelt es sich um eine effektive Lösung in der aktuellen Echarts -Version. Zukünftige Versionen von Echarts können eine optimiertere Lösung darstellen. Es wird empfohlen, effektivere Lösungen weiter zu untersuchen, um wiederholte Renderings zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie kann ich das Problem lösen, dass das zweite X-Achse-Etikett nicht in Echarts angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!