SOURCE

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
let option;

// soc数据，功率数据
let socData = [];
let powerData = [];
for (let i = 0; i <= 48; i++) {
    let hours = Math.floor(i / 2);
    let minutes = (i % 2) * 30 === 0 ? '00': '30';
    let timestamp = `2025/05/21 ${hours}:${minutes}`;
    let value1 = Math.floor(Math.random() * 100);
    const a = i % 10 > 5 ? 1 : -1;
    let value2 = Math.floor(Math.random() * 60) * a;
    socData.push([timestamp, value1]);
    powerData.push([timestamp, value2]);
}
// 自定义数据
// 尖峰平谷颜色配置
const colorList = [
    {
    type: '尖峰',
    color: '#FF0003',
    },
    {
    type: '峰电',
    color: '#B8383A',
    },
    {
    type: '平电',
    color: '#30CA5E',
    },
    {
    type: '谷电',
    color: '#0084FF',
    },
    {
    type: '深谷',
    color: '#0061BA',
    },
];
// 尖峰平谷时段配置
const scopeH = 10;
const startPos = -70;
const timeBucket = [
    ['2025/05/21 00:00', '2025/05/21 06:00', scopeH, '谷电'],
    ['2025/05/21 06:00', '2025/05/21 12:00', scopeH, '平电'],
    ['2025/05/21 12:00', '2025/05/21 14:00', scopeH, '谷电'],
    ['2025/05/21 14:00', '2025/05/21 19:00', scopeH, '峰电'],
    ['2025/05/21 19:00', '2025/05/21 21:00', scopeH, '尖峰'],
    ['2025/05/21 21:00', '2025/05/21 24:00', scopeH, '峰电'],
];
const bucketData = timeBucket.map((item) => {
    return {
        value: item,
        itemStyle: {
            color: colorList.find((val) => val.type === item[3]).color,
        },
    };
});

// 判断选择时间处于哪个时间段
// pointTime: hh:mm
function getCurrentTimeBucket(pointTime) {
    const currentTime = pointTime;
    
    for (const bucket of timeBucket) {
        const startTime = bucket[0].split(' ')[1];
        const endTime = bucket[1].split(' ')[1];
        
        // 处理跨天的情况（如21:00-24:00）
        if (endTime === '24:00') {
            if (currentTime >= startTime) {
                return bucket[3];
            }
        } else if (currentTime >= startTime && currentTime < endTime) {
            return bucket[3];
        }
    }
    
    return null; // 如果没有匹配的区间
}  

option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid'
          },
        },
        formatter: function(params) {
            const pointTime = params[0].value[0].split(' ')[1];
            let tip = pointTime;
            tip += '</br>' + '当前时段：'  +  getCurrentTimeBucket(pointTime);
            const power = params[0].value[1];
            const status = power > 0 ? '放电' : '充电';
            tip += '</br>' + '充放状态: ' + status;
            
            for (let i = 0; i < params.length; i++) {
                tip += '</br>' + params[i].seriesName + ': '  + params[i].value[1];
            }
            return tip;
        },
      },
      grid: {
        left: '0',
        right: '5%',
        top: '15%',
        bottom: '8%',
        containLabel: true 
      },
      xAxis: {
        type: 'time',
        name: '时间',
        // 与坐标轴之间的水平距离
        nameGap: 30,
        nameTextStyle: {
            color: '#ffffff',
        },
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
            // show: true,
            // lineStyle: { color: 'red' },
            onZero: true,
            // onZeroAxisIndex: 0,
        },
        axisLabel: {
            color: '#fff',
            inside: true,
            margin: 135,                    // 距离轴线的距离
        },
      },
      yAxis: [
        {
            type: 'value',
            name: 'power',
            nameTextStyle: {
                color: '#ffffff',
            },
            axisLabel: {
                color: '#ffffff'
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                interval: 2,
                lineStyle: {
                    color: '#D8D8D8',
                    opacity: 0.5,
                }
            },
            max: 60,
            min: -60,
        },
        {
            type: 'value',
            position: 'right',
            name: 'SOC',
            nameTextStyle: {
                color: '#ffffff',
            },
            axisLabel: {
                color: '#ffffff',
                formatter: function (value) {
                    if (value >= 0) {
                        return value;
                    } else {
                        return '';
                    }
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#D8D8D8',
                    opacity: 0.5,
                }
            },
            max: 100,
            min: -100,
        }
      ],
      series: [
        {
            name: '储能SOC',
            type: 'bar',
            yAxisIndex: 1,
            barWidth:'100%',
            itemStyle: {
                color: '#00FF4C',
                opacity: 0.18,
                borderColor: '#ffffff'
            },
            data: socData
        },
        {
        // 阶梯折线图
          name: '功率',
          type: 'line',
          yAxisIndex: 0,
          symbol: 'none',
          step: 'end',
          itemStyle: {
              color: '#3FFF25',
          },
          data: powerData
        },
        {
            name: '时段',
            type: 'custom',
            yAxisIndex: 0,
            renderItem: function (params, api) {
                var yValue = api.value(2);
                var start = api.coord([api.value(0), startPos]);
                var size = api.size([api.value(1) - api.value(0), -yValue]);
                var style = api.style();
                return {
                    type: 'rect',
                    shape: {
                        x: start[0],
                        y: start[1],
                        width: size[0],
                        height: size[1],
                    },
                    style: style,
                };
            },
            // 使用的是柱状图的配置？
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                fontSize: 10,
            },
            // dimensions: ['from', 'to', '-', 'profit'],
            tooltip: {
                show: false,
            },
            encode: {
                x: [0, 1],
                y: 2,
                tooltip: [0, 1, 2, 3],
                itemName: 3,
            },
            data: bucketData,
        }
      ],
    }

option && myChart.setOption(option);

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Echarts示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
   
    </script>
</body>

</html>

body {
    background-color: #142238;
}