This article covers the methods and properties for adding annotation lines to Echarts charts. It explains how to position their start and end points, as well as customize their appearance and text. The focus is on the use of the addAnnotationLine() m
To add an annotation line to an Echarts chart, use the addAnnotationLine()
method. This method takes two parameters: an object specifying the line's configuration, and the chart's instance.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>
The starting and ending points of an annotation line can be positioned using the x
and y
addAnnotationLine()
method:
<code class="javascript">const line = { x: [10, 20], y: [10, 20] };</code>
x
and y
properties of the line's configuration object. Each property accepts an array of two numbers, representing the X and Y coordinates of the point.For example, the following configuration positions the line to start at (10, 10) and end at (20, 20):<code class="javascript">const line = { lineStyle: { color: 'red', width: 2 }, symbol: ['circle', 'circle'], label: { show: true, formatter: 'Custom Annotation Line' } };</code>
The above is the detailed content of echarts adds dimension lines. For more information, please follow other related articles on the PHP Chinese website!