<!-- 折线图卡片 -->
|
<template>
|
<div class="art-card relative overflow-hidden" :style="{ height: `${height}rem` }">
|
<div class="mb-2.5 flex-b items-start p-5">
|
<div>
|
<p class="text-2xl font-medium leading-none">
|
{{ value }}
|
</p>
|
<p class="mt-1 text-sm text-g-500">{{ label }}</p>
|
</div>
|
<div
|
class="text-sm font-medium"
|
:class="[
|
percentage > 0 ? 'text-success' : 'text-danger',
|
isMiniChart ? 'absolute bottom-5' : ''
|
]"
|
>
|
{{ percentage > 0 ? '+' : '' }}{{ percentage }}%
|
</div>
|
<div v-if="date" class="absolute bottom-5 right-5 text-xs text-g-500">
|
{{ date }}
|
</div>
|
</div>
|
<div
|
ref="chartRef"
|
class="absolute bottom-0 left-0 right-0 box-border w-full"
|
:class="isMiniChart ? '!absolute !top-5 !right-5 !bottom-auto !left-auto !h-15 !w-4/10' : ''"
|
:style="{ height: isMiniChart ? '60px' : `calc(${height}rem - 5rem)` }"
|
></div>
|
</div>
|
</template>
|
|
<script setup>
|
import { graphic } from '@/plugins/echarts'
|
import { getCssVar, hexToRgba } from '@/utils/ui'
|
import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
|
|
defineOptions({ name: 'ArtLineChartCard' })
|
const props = defineProps({
|
value: { required: false },
|
label: { required: false },
|
date: { required: false },
|
percentage: { required: false, default: 0 },
|
isMiniChart: { required: false, default: false },
|
height: { required: false, default: 11 },
|
color: { required: false },
|
chartData: { required: false, default: () => [] },
|
showAreaColor: { required: false, default: false }
|
})
|
const { chartRef } = useChartComponent({
|
props: {
|
height: `${props.height}rem`,
|
loading: false,
|
isEmpty: !props.chartData?.length || props.chartData.every((val) => val === 0)
|
},
|
checkEmpty: () => !props.chartData?.length || props.chartData.every((val) => val === 0),
|
watchSources: [() => props.chartData, () => props.color, () => props.showAreaColor],
|
generateOptions: () => {
|
const computedColor = props.color || useChartOps().themeColor
|
return {
|
grid: {
|
top: 0,
|
right: 0,
|
bottom: 0,
|
left: 0
|
},
|
xAxis: {
|
type: 'category',
|
show: false,
|
boundaryGap: false
|
},
|
yAxis: {
|
type: 'value',
|
show: false
|
},
|
series: [
|
{
|
data: props.chartData,
|
type: 'line',
|
smooth: true,
|
showSymbol: false,
|
lineStyle: {
|
width: 3,
|
color: computedColor
|
},
|
areaStyle: props.showAreaColor
|
? {
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: props.color
|
? hexToRgba(props.color, 0.2).rgba
|
: hexToRgba(getCssVar('--el-color-primary'), 0.2).rgba
|
},
|
{
|
offset: 1,
|
color: props.color
|
? hexToRgba(props.color, 0.01).rgba
|
: hexToRgba(getCssVar('--el-color-primary'), 0.01).rgba
|
}
|
])
|
}
|
: void 0
|
}
|
]
|
}
|
}
|
})
|
</script>
|
