自定义markpointecharts 折线配置项内容和展示

      option = {
    backgroundColor: 'white',
    tooltip: {
        show:true
    },
    xAxis: [{
        type: 'category',
        data: ['2020-09-28 00:00', '2020-09-28 00:15', '2020-09-28 00:30', '2020-09-28 00:45', '2020-09-28 01:00', '2020-09-28 01:15', '2020-09-28 01:30', '2020-09-28 01:45', '2020-09-28 02:00', '2020-09-28 02:15', '2020-09-28 02:30', '2020-09-28 02:45', '2020-09-28 03:00', '2020-09-28 03:15', '2020-09-28 03:30', '2020-09-28 03:45', '2020-09-28 04:00', '2020-09-28 04:15', '2020-09-28 04:30', '2020-09-28 04:45', '2020-09-28 05:00', '2020-09-28 05:15', '2020-09-28 05:30', '2020-09-28 05:45', '2020-09-28 06:00', '2020-09-28 06:15', '2020-09-28 06:30', '2020-09-28 06:45', '2020-09-28 07:00', '2020-09-28 07:15', '2020-09-28 07:30', '2020-09-28 07:45', '2020-09-28 08:00', '2020-09-28 08:15', '2020-09-28 08:30', '2020-09-28 08:45', '2020-09-28 09:00', '2020-09-28 09:15', '2020-09-28 09:30', '2020-09-28 09:45', '2020-09-28 10:00', '2020-09-28 10:15', '2020-09-28 10:30', '2020-09-28 10:45', '2020-09-28 11:00', '2020-09-28 11:15', '2020-09-28 11:30', '2020-09-28 11:45', '2020-09-28 12:00', '2020-09-28 12:15', '2020-09-28 12:30', '2020-09-28 12:45', '2020-09-28 13:00', '2020-09-28 13:15', '2020-09-28 13:30', '2020-09-28 13:45', '2020-09-28 14:00', '2020-09-28 14:15', '2020-09-28 14:30', '2020-09-28 14:45', '2020-09-28 15:00', '2020-09-28 15:15', '2020-09-28 15:30', '2020-09-28 15:45', '2020-09-28 16:00', '2020-09-28 16:15', '2020-09-28 16:30', '2020-09-28 16:45', '2020-09-28 17:00', '2020-09-28 17:15', '2020-09-28 17:30', '2020-09-28 17:45', '2020-09-28 18:00', '2020-09-28 18:15', '2020-09-28 18:30', '2020-09-28 18:45', '2020-09-28 19:00', '2020-09-28 19:15', '2020-09-28 19:30', '2020-09-28 19:45', '2020-09-28 20:00', '2020-09-28 20:15', '2020-09-28 20:30', '2020-09-28 20:45', '2020-09-28 21:00', '2020-09-28 21:15', '2020-09-28 21:30', '2020-09-28 21:45', '2020-09-28 22:00', '2020-09-28 22:15', '2020-09-28 22:30', '2020-09-28 22:45', '2020-09-28 23:00', '2020-09-28 23:15', '2020-09-28 23:30', '2020-09-28 23:45', '2020-09-28 24:00'],
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#ccc',
            formatter: param => {
                if (param.substring(param.length - 5, param.length) === '00:00') {
                    return '00:00'
                } else if (param.substring(param.length - 5, param.length) === '12:00') {
                    return '12:00'
                } else if (param.substring(param.length - 5, param.length) === '24:00') {
                    return '24:00'
                }
            }

        },
        axisTick: {
            show: false
        }
    }],
    yAxis: [{
        type: 'value',
        splitNumber: 3,
        scale: true,
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: '#DDD'
            }
        },
        axisLabel: {
            color: '#ccc'

        },
        axisLine: {
            show: false,
            lineStyle: {
                color: "#333"
            },
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: '心率',
        type: 'line',
        symbolSize: 0,
        data: [90, 114, 108, 93, 76, 67, 108, 52, 73, 58, 93, 95, 101, 81, 77, 108, 65, 93, 93, 93, 96, 62, 54, 52, 53, 92, 67, 64, 80, 84, 59, 74, 67, 98, 61, 96, 110, 75, 84, 72, 83, 94, 88, 72, 77, 85, 59, 112, 76, 76, 114, 75, 55, 71, 53, 116, 114, 111, 73, 52, 71, 66, 74, 64, 86, 92, 116, 80, 89, 98, 77, 104, 87, 98, 54, 104, 105, 95, 71, 110, 62, 53, 69, 95, 100, 92, 76, 70, 101, 81, 97, 78, 70, 116, 58, 53, 90],
        lineStyle: {
            normal: {
                width: 2,
                color: '#55dfeb',
                shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
            }
        },
        smooth: true,
        markPoint: {
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
                borderColor: "#fff",
                borderWidth: 2
            },
            label: {
                show: true,
                distance: 20,
                offset: [52, 0],
                textBorderWidth: 0,
                textShadowBlur: 0,
                textShadowColor:'transparent',
                formatter: param => {
                    return '{line|——}{card|' + param.value + '次/分}'
                },
                rich: {
                    'card': {
                        width: 60,
                        height: 25,
                        backgroundColor: '#339ebd',
                        borderRadius: 5,
                        align: 'center',
                        verticalAlign: 'middle',
                        color: '#ffffff'
                    },
                    'line': {
                        color: '#339ebd'

                    }
                }
            },
            data: [{
                type: 'max',
                itemStyle: {
                    color: '#f26b09',
                    shadowBlur: 0

                },
                label:{
              
                color:'white'
                }
            }, {
                type: 'min',
                itemStyle: {
                    color: '#00c0c2'
                }
            }, ]
        }
    }]
};