Organisieren Sie einige gängige Konfigurationen von Echarts (mit Codebeispielen)

Ich werde nicht auf die grundlegende Verwendung von Echarts eingehen. Es gibt viele Demos auf der offiziellen Website, Sie können sie einfach kopieren und einfügen. Hier fassen wir hauptsächlich die gängigen Konfigurationen des Autors im Unternehmen zusammen.

1. Doppelte Y-Achse

Wenn Ihre Daten mehrere Polylinien haben und einige Linien große Daten und einige Linien sehr kleine Daten haben, wird die Menge der Daten erhöht, wenn sie alle auf einer Y-Achse platziert werden, um die Daten anzuzeigen Die kleinen Daten liegen sehr nahe an der X-Achse, sodass der sich ändernde Trend der Daten nicht sichtbar ist. Die Daten können separat angezeigt werden. Die große Datenmenge wird auf einer Seite angezeigt. und die kleine Datenmenge wird auf der anderen Seite angezeigt.

Sie müssen nur options.yAxis konfigurieren und dann yAxisIndex für alle Daten in options.series konfigurieren. 0 bleibt übrig , 1 ist richtig. options.yAxis，然后在options.series中，给每个数据配置yAxisIndex即可，0是左边，1是右边。

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2.loading效果

echarts自带了loading，在数据加载时可以调用showLoading()，取消加载时可以用hideLoading()

options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

2. Ladeeffekt

echarts wird mit dem Laden geliefert. Sie können beim Laden von Daten showLoading() aufrufen und beim Abbrechen verwenden Laden. >hideLoading().

3.No-Data-Platzhalter

echarts bietet keinen guten No-Data-Platzhalter, Sie können nur die magische Modifikation des Titels verwenden. Wenn keine Daten vorhanden sind, löschen Sie zuerst die X-Achse und die Y-Achse und fügen Sie dann den Titel hinzu.

<br/>

4. Beschriftungen mit Einheiten

Die Standardbeschriftung von Echarts hat keine Einheiten und Echarts bietet eine Einheitenkonfiguration. Konfigurieren Sie einfach tooltip.valueFormatter in jeder Polylinie der Serie.

Wenn Sie mit dem Stil der Etikettenanzeige nicht zufrieden sind, können Sie mit Echarts auch den HTML-Code des Etiketts anpassen. Zu diesem Zeitpunkt können Sie Einheiten im HTML-Code des Formatierers hinzufügen.

Die Konfiguration ist wie folgt, ändern Sie sie entsprechend Ihrem eigenen Projekt: rrreee

🎜🎜

Das obige ist der detaillierte Inhalt vonOrganisieren Sie einige gängige Konfigurationen von Echarts (mit Codebeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!