<template>
    <el-card style="">
        <template #header>
            <div class="card-header">
                <span>这是个啥起码子标题</span>
            </div>
        </template>
        <div id="ProjectPayment" class="chart"></div>
    </el-card>
</template>
<script setup>

import * as echarts from 'echarts';
import { apistatisticsprojectRefund } from '@/api/statistics'
const labelOption = {
    show: true,
    rich: {
        name: {}
    }
};

const initChart = (id, opt) => {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    myChart.setOption(opt);
}
const getCustom = async () => {
    let res = await apistatisticsprojectRefund()
    await nextTick()
    var option4 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: [res.invoice_series.name, res.refund_plan_series.name, res.refund_series
                .name, res.not_refund_series.name,]
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',

        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: res.column
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: res.invoice_series.name,
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.invoice_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
            {
                name: res.refund_plan_series.name,
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.refund_plan_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
            {
                name: res.refund_series.name,
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.refund_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
            {
                name: res.not_refund_series.name,
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.not_refund_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
        ]
    };

    initChart("ProjectPayment", option4)
}
getCustom()
</script>
<style>
.chart {
    width: 100%;
    height: 400px;
}
</style>