<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>
