使用折线图中的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

posted on 2021-07-07 10:01  羽丫头不乖  阅读(1788)  评论(0编辑  收藏  举报