配置代码

src/views/SmartScreen/DeviceScreen/charts/chart5.vue

@@ -0,0 +1,126 @@
+<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)
+        }
+    })
+}
+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>