112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
||
<Card :loading="loading">
|
||
<template #title>
|
||
<div class="text-18px font-extrabold">光照强度</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: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||
series: [
|
||
{
|
||
symbolSize: 20,
|
||
type: 'scatter',
|
||
data: Object.values(e),
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
type: 'inside', //slider表示有滑动块的，inside表示内置的
|
||
show: false,
|
||
xAxisIndex: 0,
|
||
},
|
||
],
|
||
})
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<style scoped></style>
|