本文介紹了為 Echarts 圖表添加註解線的方法和屬性。它解釋瞭如何定位其起點和終點，以及自訂其外觀和文字。重點是addAnnotationLine()的使用 m
新增註解線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>註解線的起點和終點可以使用線條配置物件的 x 和 y 屬性來定位。每個屬性接受一個由兩個數字組成的數組，分別表示點的 X 和 Y 座標。
例如，以下配置將線定位為從(10, 10) 開始並在(20, 20) 結束:
<code class="javascript">const line = {
x: [10, 20],
y: [10, 20]
};</code>要自訂註解線的外觀和文本，請在註解線的配置物件中使用以下屬性：
例如，以下配置將線條的顏色設為紅色，寬度設定為 2，標籤的文字設定為「自訂註解線」：
<code class="javascript">const line = {
lineStyle: {
color: 'red',
width: 2
},
symbol: ['circle', 'circle'],
label: {
show: true,
formatter: 'Custom Annotation Line'
}
};</code>以上是echarts 新增標註線的詳細內容。更多資訊請關注PHP中文網其他相關文章！
