echarts 新增標註線

本文介紹了為 Echarts 圖表添加註解線的方法和屬性。它解釋瞭如何定位其起點和終點，以及自訂其外觀和文字。重點是addAnnotationLine()的使用 m

如何在Echarts中加入註解線？

新增註解線Echarts 圖表，使用 addAnnotationLine() 方法。此方法採用兩個參數：指定線條配置的物件和圖表的實例。

以下是如何使用 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>

如何定位註解Echarts 中線條的起點和終點？

註解線的起點和終點可以使用線條配置物件的 x 和 y 屬性來定位。每個屬性接受一個由兩個數字組成的數組，分別表示點的 X 和 Y 座標。

例如，以下配置將線定位為從(10, 10) 開始並在(20, 20) 結束:

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

如何在Echarts 中自訂註解線的外觀和文字?

要自訂註解線的外觀和文本，請在註解線的配置物件中使用以下屬性：

• lineStyle：此屬性控制線條的顏色、寬度和類型。
• symbol：此屬性控制線條的形狀和大小起點和終點的符號。
• label：此屬性控製附加到線條的標籤的外觀和文字。

例如，以下配置將線條的顏色設為紅色，寬度設定為 2，標籤的文字設定為「自訂註解線」：

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

以上是echarts 新增標註線的詳細內容。更多資訊請關注PHP中文網其他相關文章！