140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<template>
|
||
<Card :loading="loading">
|
||
<template #title>
|
||
<!-- <div class="text-18px font-extrabold">{{ title }}</div> -->
|
||
<div class="flex items-end">
|
||
<div class="text-18px font-extrabold">{{ title }}</div>
|
||
<div class="ml-8px text-14px">{{ unit }}</div>
|
||
</div>
|
||
</template>
|
||
<template #extra></template>
|
||
<div ref="chartRef" :style="{ width, height }"></div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import dayjs from 'dayjs'
|
||
import { Card } from 'ant-design-vue'
|
||
import { Ref, ref, watch, computed } from 'vue'
|
||
import { useECharts } from '/@/hooks/web/useECharts'
|
||
import echarts from '/@/utils/lib/echarts'
|
||
const props = defineProps({
|
||
loading: Boolean,
|
||
title: {
|
||
type: String as PropType<string>,
|
||
default: '标题',
|
||
},
|
||
width: {
|
||
type: String as PropType<string>,
|
||
default: '100%',
|
||
},
|
||
height: {
|
||
type: String as PropType<string>,
|
||
default: '300px',
|
||
},
|
||
data: {
|
||
type: Object as PropType<object>,
|
||
default: () => {},
|
||
},
|
||
company: {
|
||
type: String as PropType<string>,
|
||
default: '',
|
||
},
|
||
time: {
|
||
type: Object as PropType<object>,
|
||
default: () => {},
|
||
},
|
||
unit: {
|
||
type: String as PropType<string>,
|
||
default: '',
|
||
},
|
||
})
|
||
const format = computed(() => {
|
||
if (props.time) {
|
||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||
if (start_time === end_time) return 'HH:mm'
|
||
}
|
||
if (props.company === 'day') return 'HH:mm'
|
||
return 'YYYY-MM-DD'
|
||
})
|
||
const chartRef = ref<HTMLDivElement | null>(null)
|
||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||
watch(
|
||
() => props.data,
|
||
(e) => {
|
||
if (e) {
|
||
setOptions({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#019680',
|
||
},
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||
series: [
|
||
{
|
||
smooth: true,
|
||
data: Object.values(e),
|
||
type: 'line',
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#d7f3f2',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#ebf9f9',
|
||
},
|
||
]),
|
||
},
|
||
itemStyle: {
|
||
color: '#5ab1ef',
|
||
},
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
type: 'inside', //slider表示有滑动块的，inside表示内置的
|
||
show: false,
|
||
xAxisIndex: 0,
|
||
},
|
||
],
|
||
})
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<style scoped></style>
|