ID

18

配置代码

const option = {
        backgroundColor: 'transparent',
        title: {
            text: '服务器负载监控',
            subtext: 'CPU使用率月度趋势（区域始终向下）',
            left: 'center',
            top: '3%',
            textStyle: {
                fontSize: 22,
                fontWeight: 'bold',
                color: '#6a9cd5'
            },
            subtextStyle: {
                fontSize: 14,
                color: 'rgba(106,156,213,0.8)'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                lineStyle: {
                    color: '#3deaff',
                    width: 1,
                    type: 'dashed'
                }
            },
            backgroundColor: 'rgba(5,13,25,0.95)',
            borderColor: '#3deaff',
            borderWidth: 1,
            textStyle: {
                fontSize: 13,
                color: '#F1F1F3'
            },
            extraCssText: 'box-shadow: 0 6px 20px rgba(0,0,0,0.4); border-radius: 10px;',
            formatter: (params) => {
                const value = params[0].value;
                return `
                    <div style="padding: 12px; text-align: center;">
                        <div style="font-size: 16px; font-weight: bold; margin-bottom: 8px;">${params[0].axisValue}</div>
                        <div style="font-size: 20px; color: ${value >= 0 ? '#3deaff' : '#ff6b6b'};

完整示例代码