<template   ref="assetEchart" class="asset_echart">
    <div class="asset">
        <div ref="assetEchart" class="asset_echart"></div>
    </div>
</template>
<script lang="ts"  setup>
import { init } from 'echarts';
import { reactive, toRefs, Ref, ref, onMounted } from 'vue';
        const assetEchart: Ref<HTMLElement | null | any> = ref(null);
       let {data}= defineProps(['data'])
       console.log(data,'11');
        onMounted(() => {
            const chart = init(assetEchart.value as HTMLElement);
            chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}：{c}%"
                },
                xAxis: {
                    type: 'category',
                    data: data.xData,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            //color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            //color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '占比 %',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            //color: '#fff'
                        }
                    },
                    nameTextStyle: {
                        //color: '#fff'
                    },
                    axisLine: {
                        lineStyle: {
                            //color: '#fff'
                        }
                    }
                },
                series: [{
                    data: data.yData,
                    type: 'bar',
                    barWidth: 30
                }],
                color: ['#108ee9']
            })
        })


</script>

<style lang="scss" scoped>
.asset_echart {
    width: 820px;
    height: 604px;
    margin: 10px 14px 0 16px;
    padding: 24px;

    &_echart {
        width: 100%;
        height: 230px;
    }
}
</style>