SaaS-lib/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue

<template>
  <div ref="graphGraphchart" style="width: 100%; height: 100%"></div>
  <div
    v-show="!haveData"
    style="
      height: 80%;
      width: 96%;
      position: absolute;
      margin: 0 1% 0 1%;
      z-index: 5;
      top: 20%;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    ">
    <a-empty />
  </div>
</template>

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

  export default defineComponent({
    name: 'GraphGraph',
    setup() {
      let data = ref<any[]>([]);
      interface PageData {
        // 图表 表格数据
        graphTableList: any[];
        // 图表 表格表头
        graphTableColumns: any[];
        // 图表 图表数据
        graphGraphList: any[];
        // 分析 表格数据
        analysisTableList: any[];
        // 分析 图表数据
        analysisGraphList: any[];
      }
      const pageData = inject<PageData>('pageData');

      if (!pageData) {
        throw new Error('pageData is not provided');
      }

      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          // 执行你的逻辑代码
          draw();
        },
        { deep: true },
      );
      const graphGraphchart = ref(null);

      let chartInstance: echarts.ECharts | null = null;

      let haveData = ref(false);
      const draw = () => {
        data.value = pageData.graphGraphList;
        if (data.value && data.value.length > 0) {
          haveData.value = true;
        } else {
          haveData.value = false;
          return;
        }
        if (chartInstance) {
          chartInstance.dispose();
        }
        // chartInstance = echarts.init(graphGraphchart.value);
        var seriesList = [];
        var date = pageData.graphTableColumns;
        var legendList: string | any[] = [];
        for (let i = 0; i < data.value.length; i++) {
          // date.push(data.value[i].date);

          // for (let j = 0; j < data.value[i].data.length; j++) {
          //   if (seriesList.length < j + 1) {
          //     seriesList.push({
          //       name: data.value[i].data[j].name,
          //       data: [data.value[i].data[j].value],
          //       type: 'line',
          //       smooth: true,
          //     });
          //   } else {
          //     seriesList[j].data.push(data.value[i].data[j].value);
          //   }
          //   if (legendList.length == 0 || legendList.length < j + 1) {
          //     legendList.push(data.value[i].data[j].name);
          //   }
          // }
          seriesList.push({
            name: data.value[i].name,
            data: data.value[i].data,
            type: 'line',
            smooth: true,
          });
          legendList.push(data.value[i].name);
        }
        const option = {
          grid: {
            top: 40,
            bottom: 50,
          },
          legend: {
            data: legendList,
            orient: 'horizontal',
            bottom: 0,
            left: 60,
          },
          tooltip: {
            trigger: 'axis',
            formatter: (params: any) => {
              const date = params[0].name;
              const values = params
                .map((param: any) => {
                  const unit = data.value[0]?.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',
          },
          series: seriesList,
          // 使用 ECharts 的 graphic 组件来展示无数据的提示
          graphic:
            data.value.length === 0
              ? {
                  type: 'text',
                  left: 'center',
                  top: 'middle',
                  style: {
                    text: '无数据',
                    fontSize: 20,
                    fontWeight: 'bold',
                    fill: '#999',
                  },
                }
              : null,
        };

        chartInstance = echarts.init(graphGraphchart.value);
        chartInstance.setOption(option);
      };
      onMounted(() => {
        // draw();
      });

      // 下载图表
      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 {
        graphGraphchart,
        downloadChart,
        data,
        haveData,
        draw,
      };
    },
  });
</script>
<style lang="less" scoped></style>