<template>
    <div class="container">
        <border4 ref="refborder4">
            <template v-slot>
                <div ref="power"></div>
            </template>
        </border4>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref,watch,onUpdated } from "vue"
import border4 from "@/components/borderBox/border6.vue"
const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
    title: string,
    series: any,
    listName:string[]
}>()

let power = ref()
let Ebox = null
function init() {
    Ebox = proxy.$echarts.init(power.value, "dark");
    let option = {
        title: {
            text: props.title,
            show: true,
            textStyle: {
                color: '#fff',
                fontSize: 20
            },
            top: '3%',
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
                axis: 'auto',

            },
        },
        // color:color,
        legend: {
            type: 'scroll',
            // width:400,
            // right:20,
            top: '11%',
            // itemStyle:{
            //     data:yue
            //   },
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "10%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: {
            type: 'value',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: props.listName
        },
        series: props.series
    };
    Ebox.setOption(option)
}

watch(props,(newVal)=>{
    
},{deep:true})

onMounted(()=>{
    init()
})

</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
</style>
