2 个回答

直接用markPoint好了,大概长这样:
image.png
代码如下:

// specify chart configuration item and data
const STYLES = {label:{color: 'red', backgroundColor: 'white'}, itemStyle:{color: 'transparent'}, symbol: 'triangle'};
var option = {
    title : {
        text: 'Variable income',
        subtext: 'Report period 2016',
       x: 'center'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['Net Profit Loss','Rate of Return'],
       x: 'left'
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug']
        }
    ],
    yAxis : [
        {
            type : 'value',
        },
    ],

    series : [
        {
            name:'Net Profit Loss',
            type:'line',
            data:[14, 18, 17, 15,26, 49,51],
            markPoint : {
                clickable: false,
                large:true,
                data : [
                  {coord: [1,  (14 + 18) / 2], symbolOffset:['-50%', 0], value: (14 + 18) / 2, ...STYLES},
                  {coord: [2,  (18 + 17) / 2], symbolOffset:['-50%', 0], value: (18 + 17) / 2, ...STYLES},
                  {coord: [5,  (26 + 49) / 2], symbolOffset:['-50%', 0], value: (26 + 49) / 2, ...STYLES},
                ]
            },
        },
    ]
};

希望能帮助到你。

通过配置 markPoint 实现,可以自定义位置和内容。先好好看下官方文档,可以搞定的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏