最終實現(xiàn)的效果

示例圖

option = {
    series: [
        {
            markPoint:{
                data: [
                    {
                        type: 'max',
                        name: '最大值',
                    },  
                    {
                        type: 'min',
                        name: '最小值',
                    },
                    {
                        yAxis: 120,  //第一個值標注的Y軸位置
                        x: '11.65%', //第一個值標注的X軸位置   一般都要重新調(diào)整位置
                        value: 120  //第一個值標注的value值
                    },
                    {
                        yAxis: 1000,  // 最后一個值標注的Y軸位置
                        x: '94%',  //最后一個值標注的X軸位置   一般都要重新調(diào)整位置
                        value: 1000  //最后一個值標注的value值
                    },
                ]
            }
        }
    ]
}

上面這是寫死的數(shù)據(jù)，接下來就用動態(tài)數(shù)據(jù)再寫一遍

//手寫假數(shù)據(jù)
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軸位置  一般都要重新調(diào)整位置
                        value: item.value[0]  //第一個值標注的value值 獲取折線第一個點的值
                    },
                    {
                        yAxis: item.value[item.value.length - 1],  // 最后一個值標注的Y軸位置 獲取折線最后一個點的值
                        x: '94%',  //最后一個值標注的X軸位置 一般都要重新調(diào)整位置
                        value: item.value[item.value.length - 1]  //最后一個值標注的value值   獲取折線最后一個點的值
                    },
                ]
            }
        }
    })
}