<template>
    <div class="asset">
        <div ref="assetEchart" class="asset_echart"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, Ref, ref, onMounted } from 'vue';
import { init } from 'echarts';
        const assetEchart: Ref<HTMLElement | null | any> = ref(null);
       let {data}= defineProps(['data'])
        onMounted(() => {
            const chart = init(assetEchart.value as HTMLElement);
            chart.setOption({
                xAxis: [{
                    type: 'category',
                    axisTick: { show: false },
                    data:data.xData,
                    nameTextStyle: {
                        //color: '#fff'
                    },
                    axisLine: {
                        lineStyle: {
                            //color: '#fff'
                        }
                    }
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: `{b}年<br/>${data.title || ''}{c}%`
                },
                yAxis: {
                    type: 'value',
                    name: data.yTitle || '',
                    axisLine: {
                        lineStyle: {
                            //color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        data: data.data,
                        barWidth:'10%'
                    },
                ],
                color: ['#00E4FF', '#9632C4']
            });
        });

</script>

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

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