110 lines
2.6 KiB
Vue
110 lines
2.6 KiB
Vue
<template>
|
|
<Card :loading="loading">
|
|
<template #title>
|
|
<div class="flex items-end">
|
|
<div class="text-18px font-extrabold">PM25</div>
|
|
<div class="ml-8px text-14px">ug/m3</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'
|
|
const props = defineProps({
|
|
loading: Boolean,
|
|
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: () => {},
|
|
},
|
|
})
|
|
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: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
|
series: [
|
|
{
|
|
data: Object.values(e),
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: '#5ab1ef',
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<style scoped></style>
|