<template>
    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template>

<script setup>
import { computed } from 'vue';
import * as echarts from 'echarts';
const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                name: [],
                value: []
            };
        }
    }
});

const options = computed(() => {
    return {
        tooltip: {
            trigger: 'axis'
        },
        backgroundColor: 'transparent',
        legend: {
            data: ['目标产量', '实际产量'],
            textStyle: {
                color: "#FFF",
                fontSize: 10
            },
        },
        toolbox: {
            show: true,
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            data: ['W01', 'W02', 'W03', 'w04', 'W05', 'W06', 'W07', 'W08'],
            axisLabel: {
                color: '#fff'
            },
        },],
        yAxis: [{
            type: 'value',
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                show: false,
            },
        }],
        series: [{
            name: '目标产量',
            type: 'bar',
            data: [20, 15, 30, 25, 18, 35, 20, 15],
            barWidth: '20%',
            itemStyle: {
                borderRadius: [2, 2, 0, 0],
                color: 
                {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: 'rgba(84,194,238,0.1)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgb(84,194,238)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }, {
            name: '实际产量',
            type: 'bar',
            data: [9, 15, 28, 15, 15, 25, 20, 10],
            barWidth: '20%',
            itemStyle: {
                borderRadius: [2, 2, 0, 0],
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: 'rgba(181,202,159,0.1)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgb(181,202,159)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }]
    }
});
</script>

<style lang="scss" scoped></style>