102 lines
2.4 KiB
Vue
102 lines
2.4 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 } 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: () => {},
|
||
},
|
||
})
|
||
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('YYYY-MM-DD HH:mm')),
|
||
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: [
|
||
{
|
||
data: Object.values(e).map((e) => {
|
||
if (e === 0) return null
|
||
return e
|
||
}),
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: '#5ab1ef',
|
||
},
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
type: 'inside', //slider表示有滑动块的，inside表示内置的
|
||
show: false,
|
||
xAxisIndex: 0,
|
||
start: 50,
|
||
end: 100,
|
||
},
|
||
],
|
||
})
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<style scoped></style>
|