64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<script name="repairEcharts" setup lang="ts">
|
|
import Echarts from '@/components/Echarts/index.vue';
|
|
import { getLast7Days } from '@/utils/time';
|
|
import { EChartsOption } from 'echarts';
|
|
const chartConfig = shallowRef<EChartsOption>({
|
|
grid: {
|
|
left: '1%',
|
|
right: '1%',
|
|
top: '10%',
|
|
bottom: '1%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
data: getLast7Days()
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
series: [
|
|
{
|
|
data: [100, 140, 230, 100, 130, 180, 173],
|
|
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'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full">
|
|
<Echarts :options="chartConfig" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|