meilan-web/src/views/dataBigScreen/dashboard/LineChart.vue

<template>
  <div ref="lineChart" class="echarts" />
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
import { useEcharts } from '@/hooks/chart.js';
import { getTimeSpan } from "@/api/largeScreen/largeScreen.js"


const lineChart = ref(null);
const chartOption = ref({
  grid: {
    left: '30',
    top: '30',
    right: '30',
    bottom: '70',
    containLabel: true,
  },
  xAxis: {
    data: [],
    axisLine: {
      lineStyle: {
        color: '#fbffff',
      },
    },
    axisLabel: {
      interval: 3,
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#fbffff',
      },
    },
  },
  series: [
    {
      type: 'line',
      symbol: 'none',
      smooth: true,
      itemStyle: {
        color: '#fc8452',
        borderDashOffset: 20,
      },
      endLabel: {
        show: false,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 70, 131)',
          },
          {
            offset: 1,
            color: 'rgb(255, 158, 68)',
          },
        ]),
      },
      data: [],
    },
  ],
});
const { setOption } = useEcharts(lineChart);
const pollingInterval = ref(null);

onMounted(() => {
  const date = new Date('2023-01-01');
  pollingInterval.value = setInterval(fetchData(), 5000);

});
function fetchData() {
  getTimeSpan().then(res => {
    chartOption.value.series[0].data = res.data.map(el => el.total);
    chartOption.value.xAxis.data = res.data.map(el => el.hourOfDay + ':00');
    setOption?.(chartOption.value);
  }).catch(error => {
    console.error(error);
    clearInterval(pollingInterval.value);
  });
  return fetchData
}
</script>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
}
</style>