128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<div ref="chartRef" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getCurrentInstance, watch, onMounted, ref } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import theme from '../theme/theme.json'
|
|
echarts.registerTheme('theme', theme)
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
echarts.use([CanvasRenderer])
|
|
const { proxy } = getCurrentInstance()
|
|
const chartRef = ref(null)
|
|
const props = defineProps({
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '350px'
|
|
}
|
|
})
|
|
let options = {
|
|
title: {
|
|
text: '',
|
|
left: 'left'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
// 图例
|
|
legend: {
|
|
type: 'scroll',
|
|
top: 'top',
|
|
width: '70%',
|
|
left: '20%'
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
smooth: false,
|
|
data: [1, 2, 3, 4, 5, 6, 7],
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
textBorderColor: '#fff',
|
|
textBorderWidth: 0,
|
|
color: '#fff'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
const chart = ref(null)
|
|
function initChart() {
|
|
chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
|
|
chart.value.setOption(options)
|
|
}
|
|
onMounted(() => {
|
|
initChart()
|
|
window.addEventListener('resize', () => {
|
|
chart.value?.resize()
|
|
})
|
|
})
|
|
/// ============ 修改数据 ===========
|
|
import { getFaultTypeLine } from '@/api/smartScreen/DeviceScreen/index.js'
|
|
function updateData() {
|
|
const param = {
|
|
devicetTypeId: 1,
|
|
searchTime: [proxy.dayjs().startOf('month'), proxy.dayjs().endOf('month')]
|
|
}
|
|
getFaultTypeLine(param).then((res) => {
|
|
if (res.code === 200) {
|
|
options.xAxis.data = res.data.xData
|
|
options.series = res.data.seriesData
|
|
chart.value?.setOption(options)
|
|
chart.value?.resize()
|
|
}
|
|
})
|
|
}
|
|
function handleQuery() {
|
|
updateData()
|
|
}
|
|
handleQuery()
|
|
let timer1 = null
|
|
const clearSearchTimer = () => {
|
|
clearInterval(timer1)
|
|
timer1 = null
|
|
}
|
|
const createSearchTimer = () => {
|
|
clearSearchTimer()
|
|
timer1 = setInterval(() => {
|
|
handleQuery()
|
|
}, 1000 * 60 * 5)
|
|
}
|
|
onMounted(() => {
|
|
createSearchTimer()
|
|
})
|
|
onUnmounted(() => {
|
|
clearSearchTimer()
|
|
})
|
|
/// ==========================================
|
|
</script>
|