102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import Panel from "@/components/common/Panel.vue";
|
|
import {onMounted, onUnmounted, ref} from "vue";
|
|
import * as echarts from "echarts";
|
|
import {getThisWeek} from "@/utils/dateUtils.ts";
|
|
import {post} from "@/utils/request.ts";
|
|
const echart = ref<HTMLElement | null>(null)
|
|
let myChart: echarts.ECharts | null = null;
|
|
onMounted(()=>{
|
|
initEcharts(dateList.value, vipData.value, commonData.value)
|
|
getPersonPayOverview()
|
|
window.addEventListener('resize', handleResize);
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize);
|
|
});
|
|
const handleResize = () => {
|
|
if (myChart) {
|
|
myChart.resize();
|
|
}
|
|
window.removeEventListener('resize', handleResize);
|
|
};
|
|
const getPersonPayOverview = () => {
|
|
const thisWeek = getThisWeek();
|
|
post("statistics/getPersonPayOverview", {beginTime: thisWeek.start, endTime: thisWeek.end}).then((res: any) => {
|
|
dateList.value = res.dateList
|
|
vipData.value = res.vipPrice
|
|
commonData.value = res.commonPrice
|
|
initEcharts(dateList.value, vipData.value, commonData.value)
|
|
})
|
|
}
|
|
const dateList = ref([
|
|
'2024-04-01',
|
|
'2024-03-30',
|
|
'2024-03-26',
|
|
'2024-03-22',
|
|
'2024-03-18',
|
|
'2024-03-14',
|
|
'2024-03-10',
|
|
'2024-03-06',
|
|
'2024-03-02',
|
|
])
|
|
const vipData = ref([120, 132, 101, 134, 90, 230, 210])
|
|
const commonData = ref([220, 182, 191, 234, 290, 330, 310])
|
|
const initEcharts = (dateList: any[], vipData: any, commonData: any) => {
|
|
if (myChart) {
|
|
myChart.dispose();
|
|
}
|
|
myChart = echarts.init(echart.value);
|
|
myChart.setOption(
|
|
{
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['患者', '普通',]
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
data: dateList
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '患者',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: vipData
|
|
},
|
|
{
|
|
name: '普通',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: commonData
|
|
}
|
|
]
|
|
}
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Panel title="经营概况">
|
|
<div class="tu" ref="echart" style="height: 100%;width: 100%"></div>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |