echarts 折线图与柱状图 如何实现在每两点线段之间显示自定义文案

Question

Answer 1

直接用markPoint好了，大概长这样：

代码如下：

// 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},
                ]
            },
        },
    ]
};

希望能帮助到你。

Answer 2

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