ID

21

配置代码

const option = {
        backgroundColor: 'transparent',

        // 标题配置
        title: {
            text: '24小时心率监控分析',
            left: 'center',
            top: 20,
            textStyle: {
                color: THEME.text.primary,
                fontSize: 24,
                fontWeight: 800,
                textShadowColor: 'rgba(43, 187, 239, 0.4)',
                textShadowBlur: 8,
                textShadowOffsetY: 2
            },
            subtext: '实时监测 · 智能分区 · 健康守护',
            subtextStyle: {
                color: THEME.text.muted,
                fontSize: 13,
                fontWeight: 400
            }
        },

        // 图例配置
        legend: {
            data: ['心率曲线'],
            top: 75,
            left: 'center',
            textStyle: {
                color: THEME.text.secondary,
                fontSize: 13
            },
            itemWidth: 20,
            itemHeight: 12,
            itemGap: 20
        },

        // 网格配置
        grid: {
            left: '8%',
            right: '8%',
            top: '18%',
            bottom: '20%',
            containLabel: true
        },

        // Tooltip配置 - 核心交互优化
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'transparent',
            borderWidth: 0,
            padding: 0,
            extraCssText: 'box-shadow: none;',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: THEME.secondary,
                    width: 2,
                    type: 'solid',
                    shadowColor: 'rgba(43, 187, 239, 0.5)',
                    shadowBlur: 8
                },
                label: {
                    backgroundColor: THEME.primary,
                    borderColor: 'rgba(255, 255, 255, 0.4)',
                    borderWidth: 1,
                    color: '#fff',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 6,
                    padding: [6, 12],
                    fontSize: 12,
                    fontWeight: 600
                }
            },
            formatter: function(params) {
                if (!params || !params[0]) return '';

                const data = params[0];
                const time = new Date(data.value[0]);
                const heartRate = data.value[1];
                const zone = getHeartRateZone(heartRate);

                const timeStr = `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}`;
                const dateStr = `${time.getMonth() + 1}月${time.getDate()}日`;

                return `
                    <div class="tooltip-wrapper">
                        <div style="color: ${THEME.text.muted};

完整示例代码