<script lang="js" setup>
import { reactive, onMounted } from 'vue';
import * as echarts from 'echarts';
const state = reactive({
    title: '性能指标可视化',
    echartInstance: null,
    domId: 'visual-performance-id'
})


const initChart = () => {
    // 基于准备好的dom，初始化echarts实例
    const domInstance = document.getElementById(state.domId)
    if (domInstance) {
        domInstance.removeAttribute('_echarts_instance_')
    }
    else {
        return
    }
    const myChart = echarts.init(domInstance);
    const option = {
        title: {
            text: 'World Population'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['fmp', 'fp', 'dns', 'res', 'dom']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744]
            }
        ]
    };
    console.log('option', option)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    myChart.on('click', function (params) {
        console.log('params', params)
    });
    window.onresize = myChart.resize;
}

onMounted(() => {
    initChart()
})
</script>
<template>
    <div>

        <a-card :title="state.title" style="width: 900px">
            <div :id="state.domId" style="width: 800px;height:600px;">

            </div>
        </a-card>

    </div>
</template>