Echarts fügt Maßlinien hinzu

Dieser Artikel behandelt die Methoden und Eigenschaften zum Hinzufügen von Anmerkungslinien zu Echarts-Diagrammen. Es erklärt, wie Sie ihre Start- und Endpunkte positionieren sowie ihr Erscheinungsbild und ihren Text anpassen. Der Schwerpunkt liegt auf der Verwendung von addAnnotationLine() m Verfahren. Diese Methode benötigt zwei Parameter: ein Objekt, das die Konfiguration der Linie angibt, und die Instanz des Diagramms.

Hier ist ein Beispiel für die Verwendung der Methode addAnnotationLine():

<code class="javascript">const myChart = echarts.init(document.getElementById('myChart'));
const line = {
  type: 'line', // 'line', 'curve'
  x: [10, 20], // Coordinates of the line's starting and ending points.
  y: [10, 20],
  symbol: ['none', 'none'], // Symbols at the starting and ending points.
  label: {   // Label attached to the line.
    show: true,
    formatter: 'annotation line'
  }
};
myChart.addAnnotationLine(line);</code>

So positionieren Sie den Anfang von Anmerkungslinien und Endpunkte in Echarts?

Die Start- und Endpunkte einer Anmerkungslinie können mithilfe der Eigenschaften x und y des Konfigurationsobjekts der Linie positioniert werden. Jede Eigenschaft akzeptiert ein Array aus zwei Zahlen, die die X- und Y-Koordinaten des Punkts darstellen.

Beispielsweise positioniert die folgende Konfiguration die Linie so, dass sie bei (10, 10) beginnt und bei (20, 20) endet:addAnnotationLine() method. This method takes two parameters: an object specifying the line's configuration, and the chart's instance.

Here's an example of how to use the addAnnotationLine() method:

<code class="javascript">const line = {
  x: [10, 20],
  y: [10, 20]
};</code>

How to Position Annotation Lines' Start and End Points in Echarts?

The starting and ending points of an annotation line can be positioned using the x and y

<code class="javascript">const line = {
  lineStyle: {
    color: 'red',
    width: 2
  },
  symbol: ['circle', 'circle'],
  label: {
    show: true,
    formatter: 'Custom Annotation Line'
  }
};</code>

Wie kann ich das Erscheinungsbild und den Text von Anmerkungslinien in Echarts anpassen?

Um das Erscheinungsbild und den Text einer Anmerkungslinie anzupassen, verwenden Sie die folgenden Eigenschaften im Konfigurationsobjekt der Linie:

lineStyle

: Diese Eigenschaft steuert die Farbe und Breite der Linie , und geben Sie ein.
• symbol
: Diese Eigenschaft steuert die Form und Größe der Symbole am Start- und Endpunkt.
• label
: Diese Eigenschaft steuert das Erscheinungsbild und den Text der an die Linie angehängten Beschriftung.
• Die folgende Konfiguration setzt beispielsweise die Farbe der Linie auf Rot, ihre Breite auf 2 und den Text der Beschriftung auf „Benutzerdefinierte Anmerkungslinie“:
rrreee

Das obige ist der detaillierte Inhalt vonEcharts fügt Maßlinien hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!