198 lines
3.9 KiB
Vue
198 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { watch } from 'vue';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { useEcharts } from '@/hooks/common/echarts';
|
|
import { $t } from '@/locales';
|
|
import dayjs from 'dayjs';
|
|
import { getMktLineData } from '@/service/api/statistics/statistics'; // 引入获取线图数据的API
|
|
|
|
defineOptions({
|
|
name: 'LineChartMkt'
|
|
});
|
|
|
|
const props = defineProps<{
|
|
dateRange: [number, number];
|
|
}>();
|
|
|
|
const appStore = useAppStore();
|
|
|
|
// 初始化默认数据（空图表）
|
|
const defaultChartData = {
|
|
dates: [],
|
|
yoyData: [],
|
|
momData: []
|
|
};
|
|
|
|
// 初始化ECharts实例
|
|
const { domRef, updateOptions } = useEcharts(() => ({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['同比', '环比']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: [] as string[]
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
color: '#8e9dff',
|
|
name: '同比',
|
|
type: 'line',
|
|
smooth: true,
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0.25,
|
|
color: '#8e9dff'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#fff'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [] as number[]
|
|
},
|
|
{
|
|
color: '#26deca',
|
|
name: '环比',
|
|
type: 'line',
|
|
smooth: true,
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0.25,
|
|
color: '#26deca'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#fff'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [] as number[]
|
|
}
|
|
]
|
|
}));
|
|
|
|
// 从API获取线图数据
|
|
async function fetchLineData() {
|
|
try {
|
|
|
|
// 显示默认空数据0
|
|
updateOptions(opts => {
|
|
opts.xAxis.data = defaultChartData.dates.map(date =>
|
|
dayjs(date).format('MM/DD')
|
|
);
|
|
opts.series[0].data = defaultChartData.yoyData;
|
|
opts.series[1].data = defaultChartData.momData;
|
|
return opts;
|
|
});
|
|
|
|
// 格式化日期参数
|
|
const startDate = dayjs(props.dateRange[0]).format('YYYY-MM-DD');
|
|
const endDate = dayjs(props.dateRange[1]).format('YYYY-MM-DD');
|
|
|
|
// 调用API获取数据
|
|
const { error, data } = await getMktLineData(startDate, endDate);
|
|
|
|
if (error) {
|
|
console.error('获取线图数据失败:', error);
|
|
return;
|
|
}
|
|
|
|
// 更新图表数据
|
|
updateOptions(opts => {
|
|
// 设置X轴日期标签
|
|
opts.xAxis.data = data.dates.map(date =>
|
|
dayjs(date).format('MM/DD')
|
|
);
|
|
|
|
// 设置同比数据
|
|
opts.series[0].data = data.yoyData;
|
|
|
|
// 设置环比数据
|
|
opts.series[1].data = data.momData;
|
|
|
|
return opts;
|
|
});
|
|
} catch (err) {
|
|
console.error('获取线图数据时出错:', err);
|
|
}
|
|
}
|
|
|
|
// 更新多语言配置
|
|
function updateLocale() {
|
|
updateOptions((opts, factory) => {
|
|
const originOpts = factory();
|
|
|
|
opts.legend.data = originOpts.legend.data;
|
|
opts.series[0].name = originOpts.series[0].name;
|
|
opts.series[1].name = originOpts.series[1].name;
|
|
|
|
return opts;
|
|
});
|
|
}
|
|
|
|
// 监听日期范围变化
|
|
watch(() => props.dateRange, () => {
|
|
fetchLineData();
|
|
}, { immediate: true });
|
|
|
|
// 监听语言变化
|
|
watch(
|
|
() => appStore.locale,
|
|
() => {
|
|
updateLocale();
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<NCard :bordered="false" class="card-wrapper">
|
|
<div ref="domRef" class="h-360px overflow-hidden"></div>
|
|
</NCard>
|
|
</template>
|
|
|
|
<style scoped></style>
|