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

      let xData = ['2020-09-28 22:45', '2020-09-28 22:50', '2020-09-28 22:55', '2020-09-28 23:00', '2020-09-28 23:05', '2020-09-28 23:10', '2020-09-28 23:15', '2020-09-28 23:20', '2020-09-28 23:25', '2020-09-28 23:30', '2020-09-28 23:35', '2020-09-28 23:40', '2020-09-28 23:45', '2020-09-28 23:50', '2020-09-28 23:55', '2020-09-29 00:00', '2020-09-29 00:05', '2020-09-29 00:10', '2020-09-29 00:15', '2020-09-29 00:20', '2020-09-29 00:25', '2020-09-29 00:30', '2020-09-29 00:35', '2020-09-29 00:40', '2020-09-29 00:45', '2020-09-29 00:50', '2020-09-29 00:55', '2020-09-29 01:00', '2020-09-29 01:05', '2020-09-29 01:10', '2020-09-29 01:15', '2020-09-29 01:20', '2020-09-29 01:25', '2020-09-29 01:30', '2020-09-29 01:35', '2020-09-29 01:40', '2020-09-29 01:45', '2020-09-29 01:50', '2020-09-29 01:55', '2020-09-29 02:00', '2020-09-29 02:05', '2020-09-29 02:10', '2020-09-29 02:15', '2020-09-29 02:20', '2020-09-29 02:25', '2020-09-29 02:30', '2020-09-29 02:35', '2020-09-29 02:40', '2020-09-29 02:45', '2020-09-29 02:50', '2020-09-29 02:55', '2020-09-29 03:00', '2020-09-29 03:05', '2020-09-29 03:10', '2020-09-29 03:15', '2020-09-29 03:20', '2020-09-29 03:25', '2020-09-29 03:30', '2020-09-29 03:35', '2020-09-29 03:40', '2020-09-29 03:45', '2020-09-29 03:50', '2020-09-29 03:55', '2020-09-29 04:00', '2020-09-29 04:05', '2020-09-29 04:10', '2020-09-29 04:15', '2020-09-29 04:20', '2020-09-29 04:25', '2020-09-29 04:30', '2020-09-29 04:35', '2020-09-29 04:40', '2020-09-29 04:45', '2020-09-29 04:50', '2020-09-29 04:55', '2020-09-29 05:00', '2020-09-29 05:05', '2020-09-29 05:10', '2020-09-29 05:15', '2020-09-29 05:20', '2020-09-29 05:25', '2020-09-29 05:30', '2020-09-29 05:35', '2020-09-29 05:40', '2020-09-29 05:45', '2020-09-29 05:50', '2020-09-29 05:55', '2020-09-29 06:00', '2020-09-29 06:05', '2020-09-29 06:10', '2020-09-29 06:15', '2020-09-29 06:20', '2020-09-29 06:25', '2020-09-29 06:30', '2020-09-29 06:35', '2020-09-29 06:40'],
    yData = [73, 60, 67, 65, 67, 70, 59, 73, 64, 61, 58, 61, 72, 63, 66, 74, 61, 69, 62, 74, 74, 63, 71, 61, 73, 61, 72, 57, 68, 69, 73, 70, 73, 67, 59, 60, 73, 57, 59, 59, 58, 71, 73, 62, 59, 74, 70, 74, 74, 68, 62, 65, 61, 74, 64, 57, 74, 69, 63, 74, 67, 61, 64, 67, 59, 57, 58, 57, 61, 71, 66, 57, 65, 57, 67, 64, 71, 61, 67, 57, 68, 68, 72, 67, 66, 63, 64, 69, 70, 69, 72, 60, 74, 64, 66, 58]

option = {
    backgroundColor: '#e8fafc',
    tooltip: {
        show: true
    },
    xAxis: [{
        type: 'category',
        data: xData,
        axisLine: {
            show: false
        },
        axisLabel: {
            interval: 0,
            color: '#b8b8b8',
            formatter: param => {
                if (param === xData[0]) {
                    return param.substring(param.length - 5, param.length)
                } else if (param === xData[xData.length - 1]) {
                    return param.substring(param.length - 5, param.length)
                }
            }

        },
        axisTick: {
            show: false
        }
    }],
    yAxis: [{
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false,
            color: '#ccc'

        },
        axisLine: {
            show: false,
            lineStyle: {
                color: "#333"
            },
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: '心率',
        type: 'line',
        symbolSize: 0,
        data: yData,
        lineStyle: {
            normal: {
                width: 2,
                color: '#18c7ce',
                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: 'white',
                        borderRadius: 5,
                        align: 'center',
                        verticalAlign: 'middle',
                        color: '#777'
                    },
                    'line': {
                        color: 'white'
                    }
                }
            },
            data: [{
                type: 'max',
                itemStyle: {
                    color: '#f26b09',
                    shadowBlur: 0
                },
                label: {
                    color: 'white'
                }
            }, {
                type: 'min',
                itemStyle: {
                    color: '#00c0c2',
                    shadowBlur: 0

                },
                label: {
                    color: 'white'
                }
            }, ]
        },
        markLine: {
            symbolSize: 0,
            label:{
                show:false
            },
            data: [{
                name: '平均值',
                yAxis: 64,
                lineStyle: {
                    type: 'dashed',
                    color: '#18c7ce',
                }
            }]
        }
    }]
};