Echarts折线图显示最高最低点以及首尾两点的标注

最终实现的效果

示例图

option = {
    series: [
        {
            markPoint:{
                data: [
                    {
                        type: 'max',
                        name: '最大值',
                    },  
                    {
                        type: 'min',
                        name: '最小值',
                    },
                    {
                        yAxis: 120,  //第一个值标注的Y轴位置
                        x: '11.65%', //第一个值标注的X轴位置   一般都要重新调整位置
                        value: 120  //第一个值标注的value值
                    },
                    {
                        yAxis: 1000,  // 最后一个值标注的Y轴位置
                        x: '94%',  //最后一个值标注的X轴位置   一般都要重新调整位置
                        value: 1000  //最后一个值标注的value值
                    },
                ]
            }
        }
    ]
}

上面这是写死的数据，接下来就用动态数据再写一遍

//手写假数据
let source = [
    {
        value: [120, 324, 435, 546, 1000],
    },
    {
        value: [120, 324, 435, 546, 1000],
    },
    {
        value: [120, 324, 435, 546, 1000],
    },
];

option = {
    series: source.map(function(item, index){
        return {
            data: item.value,
            markPoint:{
                data: [
                    {
                        type: 'max',
                        name: '最大值',
                    },  
                    {
                        type: 'min',
                        name: '最小值',
                    },
                    {
                        yAxis: item.value[0],  //第一个值标注的Y轴位置 获取折线第一个点的值
                        x: '11.65%', //第一个值标注的X轴位置  一般都要重新调整位置
                        value: item.value[0]  //第一个值标注的value值 获取折线第一个点的值
                    },
                    {
                        yAxis: item.value[item.value.length - 1],  // 最后一个值标注的Y轴位置 获取折线最后一个点的值
                        x: '94%',  //最后一个值标注的X轴位置 一般都要重新调整位置
                        value: item.value[item.value.length - 1]  //最后一个值标注的value值   获取折线最后一个点的值
                    },
                ]
            }
        }
    })
}