<template>
    <RightTitle subtitle="实时数据监控" icon="sjjk" />

    <div class="sjjk-container">
        <div class="chart-container">
            <div id="chart" class="echarts-wrapper" style="width: 800px; height: 200px;"></div>
        </div>
    </div>
</template>

<script setup>
import RightTitle from './RightTitle.vue';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
    // 初始化图表
    const myChart = echarts.init(document.getElementById('chart'));

    // 图表配置项
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: {
            data: ['电压(kv)', '电流(A)', '功率(MW)'],
        },
        grid: {
              top: '15%',
              left: '12%',
              right: '12%',
              bottom: '20%',
              containLabel: true,
              show: false
            },
        xAxis: {
            type: 'category',
            data: ['发电机1', '发电机2', '发电机3', '发电机4', '发电机5', '发电机6'],
            axisLabel: {
                interval: 0,
                rotate: 45
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '电压(kv)/电流(A)',
                splitLine: {
                    show: false
                }
            },
            {
                type: 'value',
                name: '功率(MW)',
                splitLine: {
                    show: false
                }
            },
        ],
        series: [
            {
                name: '电压(kv)',
                type: 'bar',
                data: [80, 70, 55, 80, 80, 80],
            },
            {
                name: '电流(A)',
                type: 'bar',
                data: [65, 80, 65, 65, 65, 65],
            },
            {
                name: '功率(MW)',
                type: 'bar',
                yAxisIndex: 1,
                data: [58, 80, 80, 58, 58, 58],
            },
        ],
    };

    // 渲染图表
    myChart.setOption(option);

    // 窗口大小变化时，图表自适应
    window.addEventListener('resize', () => {
        myChart.resize();
    });
});
</script>

<style scoped>
:deep(.el-card__body) {
    padding: 0;
}

.sjjk-container {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 8px;
    /* padding: 20px; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 800px;
}

.chart-container {
    width: 100%;
    max-width: 800px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.echarts-wrapper {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 4px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}
</style>