115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
<script name="repairEcharts" setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import { workSpaceRepairTrendListApi } from '@/api/workflow';
|
||
import Echarts from '@/components/Echarts/index.vue';
|
||
import type { EChartsOption } from 'echarts';
|
||
|
||
// 使用 ref 而不是 shallowRef，以确保深层响应式，或者在更新时重新赋值整个对象
|
||
const chartConfig = shallowRef<EChartsOption>({
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
top: '10%',
|
||
bottom: '1%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category', // 建议明确指定类型
|
||
data: [] as string[]
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
series: [
|
||
{
|
||
data: [] as number[],
|
||
type: 'line',
|
||
smooth: true,
|
||
name: '维修单数',
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: '#e2edff' },
|
||
{ offset: 1, color: '#f2f9ff' }
|
||
]
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: '#1a75ff'
|
||
},
|
||
itemStyle: {
|
||
color: '#1a75ff'
|
||
},
|
||
label: {
|
||
show: true,
|
||
color: '#3f8afc',
|
||
position: 'top'
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
// 获取维修列表数据
|
||
function getRepairList() {
|
||
const id = localStorage.getItem('villageid');
|
||
if (!id) return;
|
||
|
||
workSpaceRepairTrendListApi(id)
|
||
.then((res: any[]) => {
|
||
if (!res || res.length === 0) {
|
||
return;
|
||
}
|
||
const map = res.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||
// 提取日期和数量
|
||
const dates = map.map((item) => item.date);
|
||
const counts = map.map((item) => item.count);
|
||
|
||
// 如果使用的是 ref，直接修改属性即可触发响应式
|
||
chartConfig.value = {
|
||
grid: chartConfig.value.grid,
|
||
yAxis: chartConfig.value.yAxis,
|
||
tooltip: chartConfig.value.tooltip,
|
||
xAxis: {
|
||
type: 'category',
|
||
data: dates
|
||
},
|
||
series: [
|
||
{
|
||
...chartConfig.value.series?.[0],
|
||
type: 'line', // 确保 type 存在
|
||
data: counts
|
||
}
|
||
]
|
||
} as EChartsOption;
|
||
|
||
// 注意：如果 <Echarts> 组件内部没有正确监听 options 的变化，
|
||
// 可能需要强制触发更新，例如：
|
||
// chartConfig.value = { ...chartConfig.value };
|
||
// 但大多数封装好的 Echarts 组件会 watch options 并调用 setOption
|
||
})
|
||
.catch((err) => {
|
||
console.error('获取维修趋势数据失败:', err);
|
||
});
|
||
}
|
||
|
||
onMounted(() => {
|
||
getRepairList();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-full h-full">
|
||
<Echarts :options="chartConfig" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss"></style>
|