<template>
    <div>
        <RightTitle subtitle="功率输出趋势" icon="glsc" />
    </div>
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import RightTitle from './RightTitle.vue';
// 创建对 chart DOM 的引用
const chartRef = ref(null);

// 初始化图表并设置配置
onMounted(() => {
    const chart = echarts.init(chartRef.value); // 初始化图表

    const option = {

        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['发电机1', '发电机2'],
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        },
        yAxis: {
            type: 'value',
            min: 10,
            max: 20,
            interval: 2,
        },
        series: [
            {
                name: '发电机1',
                type: 'line',
                data: [14, 16, 14, 15, 16, 14, 16, 15, 16, 17, 16],
                smooth: true,
                color: '#3366FF',
                areaStyle: {
                    opacity: 0.2,
                },
            },
            {
                name: '发电机2',
                type: 'line',
                data: [16, 17, 15, 16, 18, 16, 17, 17, 18, 19, 18],
                smooth: true,
                color: '#FFCC00',
                areaStyle: {
                    opacity: 0.2,
                },
            },
        ],
    };

    // 设置图表的配置
    chart.setOption(option);
});
</script>

<style scoped>
/* Optional styling */
</style>
