使用折线图中的markPoint实现标注点。如下图:
说明:
1、markPoint:图表标注。
2、markPoint.symbol:标注的图形。
3、markPoint.symbolSize: 标注图形的大小。
4、markPoint.symbolRotate:标柱的旋转角度。事例中对值进行判断,0为正三角,(-180)为倒三角。
5、markPoint.data:标注的数据数组。
6、markPoint.data.coord:标注的坐标。示例中第一位表示数据数组中的下标。数值表示下标,字符串表示指定值。
7、markPoint.data.y:相对容器的屏幕 y 坐标,单位像素。数值越小距离x轴越远,反之越近。
8、markPoint.data.value:标注值。指定显示的文本,不设置则不会显示文本,
9、markPoint.data.label:标注的文本样式。
10、markPoint.data.itemStyle:该标注的样式。
markPoint: {
symbol: 'triangle',
symbolSize: 2,
symbolRotate: 0, // -180
data:[{
coord:[1, 0],
y: 40,
value: 8 + '%',
label:{
show:true,
color: '#5470C6',
fontSize:14,
position: 'right'
},
itemStyle: {
borderWidth: 3,
borderColor: '#5470C6',
color: '#5470C6',
}
}]
}
参考文献:https://echarts.apache.org/zh/option.html#series-line.markPoint