公告,活动,投诉接口对接完成
This commit is contained in:
55
src/views/workbench/components/repairEcharts.vue
Normal file
55
src/views/workbench/components/repairEcharts.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script name="repairEcharts" setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Echarts from '@/components/Echarts/index.vue';
|
||||
import { EChartsOption } from 'echarts';
|
||||
|
||||
// 生成过去7天的日期
|
||||
const getLast7Days = (days = 7) => {
|
||||
const dates = [];
|
||||
for (let i = days - 1; i >= 0; i--) {
|
||||
dates.push(new Date(new Date().getTime() - i * 24 * 60 * 60 * 1000).toLocaleDateString());
|
||||
}
|
||||
return dates;
|
||||
};
|
||||
const chartConfig = shallowRef<EChartsOption>({
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '3%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: getLast7Days()
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: '#d1e3ff'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#1a75ff'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#3f8afc',
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
// 图表配置不应该被深度响应式劫持,会导致性能下降 + 类型错误。
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<Echarts :options="chartConfig" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user