echarts menambah garisan dimensi

Artikel ini merangkumi kaedah dan sifat untuk menambahkan baris anotasi pada carta Echarts. Ia menerangkan cara meletakkan titik mula dan akhir mereka, serta menyesuaikan penampilan dan teks mereka. Tumpuan adalah pada penggunaan addAnnotationLine() m

Bagaimana untuk Menambah Garis Anotasi dalam Echarts?

Untuk menambah baris anotasi pada carta Echarts, gunakan addAnnotationLine() kaedah. Kaedah ini mengambil dua parameter: objek yang menyatakan konfigurasi garisan dan contoh carta.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 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>

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

Berikut ialah contoh cara menggunakan kaedah addAnnotationLine():

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

Cara Meletakkan Permulaan Garis Anotasi dan Titik Tamat dalam Echarts?

Titik permulaan dan penamat bagi garis anotasi boleh diletakkan menggunakan sifat x dan y bagi objek konfigurasi baris. Setiap sifat menerima tatasusunan dua nombor, mewakili koordinat X dan Y bagi titik tersebut.

Sebagai contoh, konfigurasi berikut meletakkan garis untuk bermula pada (10, 10) dan berakhir pada (20, 20):

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

Bagaimana untuk Menyesuaikan Rupa dan Teks Garis Anotasi dalam Echarts?Untuk menyesuaikan rupa dan teks baris anotasi, gunakan sifat berikut dalam objek konfigurasi baris:

lineStyle

: Sifat ini mengawal warna garisan, lebar , dan taip.

simbol

: Sifat ini mengawal bentuk dan saiz simbol di titik permulaan dan penamat.

label🎜: Sifat ini mengawal penampilan dan teks label yang dilampirkan pada baris.🎜🎜 🎜Sebagai contoh, konfigurasi berikut menetapkan warna garisan kepada merah, lebarnya kepada 2 dan teks label kepada "Barisan Anotasi Tersuai":🎜rrreee

Atas ialah kandungan terperinci echarts menambah garisan dimensi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!