<template>
    <div class="chart">
        <v-chart :style="{ height: height }" class="chart" :option="option" />
    </div>
</template>

<script setup>
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
    GridComponent,
    TitleComponent,
    LegendComponent,
    TooltipComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

use([
    GridComponent,
    TitleComponent,
    LegendComponent,
    TooltipComponent,
    LineChart,
    CanvasRenderer
])

const props = defineProps({
    height: {
        type: String,
        default: '400px'
    },
    lineData: {
        type: Array,
        default: []
    }
})

const option = computed(() => {
    return {
        xAxis: {
            type: 'category',
            data: props.lineData.map(item => item.name),
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            type: 'value',
            // max: 100,
            // min: 0,
            axisLabel: {
                color: '#fff',
                // formatter: '{value}%'
            }
        },
        grid: {
            left: '5%',
            top: 60,
            right: '5%',
            bottom: '10%',
        },
        title: {
            text: '有功功率w',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            data: ['有功功率'],
            right: '5%',
            textStyle: {
                color: '#fff'
            },
        },
        tooltip: {
            trigger: 'axis', // 触发类型，默认数据项触发，可选为：'item' | 'axis' | 'none'
            axisPointer: {
                type: 'cross', // 默认为直线，可选为：'line' | 'shadow'
                label: {
                    formatter: '{value} 时'
                }
            },
            // valueFormatter: (value) => value + '%'
        },
        series: [
            {
                data: props.lineData.map(item => item.value),
                type: 'line',
                name: '有功功率',
                color: '#00E0F4',
                smooth: true,
                symbolSize: 10
            }
        ]
    }
})
</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
}
</style>