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

<template>

  <div ref="chart" 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({
    name: 'Graph',
    setup() {
    const chart = ref(null);
 
    onMounted(() => {

      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: [
          // {
          //   type: 'inside',
          //   start: 0,
          //   end: 10
          // },
          {
            height: 10,
            start: 0,
            end: 100,
            handleSize: '300%', // 设置滑块的大小
            bottom: 15,

          }
        ],
        series: seriesList
        // series: [

        //   {
        //     data: [820, 932, 901, 934, 1290, 1330, 1320],
        //     type: 'line'
        //   }
        // ]
      };
 
      const chartInstance = echarts.init(chart.value);
      chartInstance.setOption(option);
    });
 
    return { chart };
  }
  })
</script>
<style lang="less" scoped>
 
  </style>