vue使用echart示例

<template>
    <el-card shadow="never">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag :checked="current == item.value" type="primary" @change="onChange(item.value)"
                        v-for="(item, index) in options" :key="index" class="m-1">
                        {{ item.text }}
                    </el-check-tag>
                </div>

            </div>
        </template>
        <!-- card body -->
        <div id="chart" style="width:100%;height:300px" ref="el"></div>
    </el-card>

</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { getStatistics3 } from '~/api';
//图形大小监测
import { useResizeObserver } from '@vueuse/core'
const current = ref("week")
const options = [
    { text: "近1个月", value: "month" },
    { text: "近1周", value: "week" },
    { text: "近24小时", value: "hour" }]


//图形生成
var myChart = null;

//获取数据
function getData() {

    let option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar'
            }
        ]
    };
    // 加载loading
    myChart.showLoading();
    getStatistics3(current.value).then(res => {
        let x = res.x;
        let y = res.y;
        option.xAxis.data = x;
        option.series[0].data = y;
        myChart.setOption(option);
    }).finally(() => {
        // 消除loading
        myChart.hideLoading();
    }

    )
}
// 趋势数据切换
const onChange = (type) => {
    current.value = type;
    // 重新加载趋势图
    getData()
}
//图形大小监测
const el = ref(null)
useResizeObserver(el, (entries) => {
    //浏览器变换时，重新设置图形大小
    myChart.resize()

})

// 挂载时候获取数据
onMounted(() => {
    var chartDom = document.getElementById('chart');
    myChart = echarts.init(chartDom);
    //获取数据
    getData()

})

// 离开前消除图，防止趋势图白屏
onBeforeUnmount(() => {
    if (myChart) echarts.dispose();
})

</script>