SaaS-lib/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue

<template>
  <div ref="graphChart" style="width: 100%; height: 80%"></div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, watch } from 'vue';
  import * as echarts from 'echarts';

  const data = [
    {
      date: '2023-12-01 0:00',
      unit: 'V',
      data: [
        {
          name: 'AC_002（暖通电表）',
          value: '21',
        },
        {
          name: 'AC_003（照明电表）',
          value: '36',
        },
        {
          name: 'AC_004（给排水电表）',
          value: '5',
        },
      ],
    },
    {
      date: '2023-12-02 0:00',
      unit: 'V',
      data: [
        {
          name: 'AC_002（暖通电表）',
          value: '26',
        },
        {
          name: 'AC_003（照明电表）',
          value: '25',
        },
        {
          name: 'AC_004（给排水电表）',
          value: '47',
        },
      ],
    },
    {
      date: '2023-12-03 0:00',
      unit: 'V',
      data: [
        {
          name: 'AC_002（暖通电表）',
          value: '18',
        },
        {
          name: 'AC_003（照明电表）',
          value: '22',
        },
        {
          name: 'AC_004（给排水电表）',
          value: '26',
        },
      ],
    },
    {
      date: '2023-12-04 0:00',
      unit: 'V',
      data: [
        {
          name: 'AC_002（暖通电表）',
          value: '40',
        },
        {
          name: 'AC_003（照明电表）',
          value: '15',
        },
        {
          name: 'AC_004（给排水电表）',
          value: '12',
        },
      ],
    },
    {
      date: '2023-12-05 0:00',
      unit: 'V',
      data: [
        {
          name: 'AC_002（暖通电表）',
          value: '15',
        },
        {
          name: 'AC_003（照明电表）',
          value: '18',
        },
        {
          name: 'AC_004（给排水电表）',
          value: '15',
        },
      ],
    },
  ];

  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Graph',

    setup() {
      const graphChart = ref(null);
      let chartInstance: echarts.ECharts | null = null;

      onMounted(() => {
        chartInstance = echarts.init(graphChart.value);
        var seriesList = [];
        var date = [];
        var legendList: string | any[] = [];
        for (let i = 0; i < data.length; i++) {
          date.push(data[i].date);

          for (let j = 0; j < data[i].data.length; j++) {
            if (seriesList.length < j + 1) {
              seriesList.push({
                name: data[i].data[j].name,
                data: [data[i].data[j].value],
                type: 'line',
                smooth: true,
              });
            } else {
              seriesList[j].data.push(data[i].data[j].value);
            }
            if (legendList.length == 0 || legendList.length < j + 1) {
              legendList.push(data[i].data[j].name);
            }
          }
        }
        const option = {
          legend: {
            data: legendList,
            orient: 'horizontal',
            bottom: 30,
          },
          tooltip: {
            trigger: 'axis',
            formatter: (params: any) => {
              const date = params[0].name;
              const values = params
                .map((param: any) => {
                  const unit = data.find((d) => d.date === date)?.unit || '';
                  return `<tr>
                          <td>${param.marker}${param.seriesName}</td>
                          <td style="text-align: right;">${param.value} ${unit}</td>
                        </tr>`;
                })
                .join('');
              return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
            },
          },
          xAxis: {
            type: 'category',
            data: date,
          },
          yAxis: {
            type: 'value',
          },
          dataZoom: [
            {
              height: 10,
              start: 0,
              end: 100,
              handleSize: '300%', // 设置滑块的大小
              bottom: 15,
            },
          ],
          series: seriesList,
        };

        chartInstance = echarts.init(graphChart.value);
        chartInstance.setOption(option);
      });
      // 下载图表
      const downloadChart = () => {
        if (chartInstance) {
          const base64 = chartInstance.getDataURL({
            type: 'png',
            backgroundColor: '#fff',
          });
          const link = document.createElement('a');
          link.href = base64;
          link.download = 'chart.png';
          link.click();
        }
      };

      return {
        graphChart,
        downloadChart,
      };
    },
  });
</script>
<style lang="less" scoped></style>