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

<template>
  <a-row type="flex" style="height: 92%">
    <a-col :span="8">
      <a-radio-group
        v-model:value="mode"
        @change="changeMode"
        style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px">
        <a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
        <a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
      </a-radio-group>
      <div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
    </a-col>
    <a-col :span="16" />
  </a-row>
</template>

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

  export default defineComponent({
    name: 'AnalysisGraph',
    setup() {
      const mode = ref<String>('1');
      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 changeMode = () => {};
      const analysisGraphchart = ref(null);

      let chartInstance: echarts.ECharts | null = null;

      const draw = () => {
        data.value = pageData.analysisGraphList;
        if (data.value && data.value.length > 0) {
          if (chartInstance) {
            chartInstance.dispose();
          }
          chartInstance = echarts.init(analysisGraphchart.value);

          var seriesdata = [];
          var dateX = [];
          // var legendList: string | any[] = [];
          for (let i = 0; i < data.value.length; i++) {
            dateX.push(data.value[i].name);

            seriesdata.push({ value: data.value[i].value, label: data.value[i].labelRight });
          }

          var seriesList = [
            {
              name: data.value[0].energyType,
              data: seriesdata,
              type: 'bar',
              label: {
                show: true,
                formatter: '{b}',
              },
            },
          ];

          const option = {
            // tooltip: {
            //   trigger: 'axis',
            //   formatter: (params: any) => {
            //     const date = params[0].name;
            //     const values = params
            //       .map((param: any) => {
            //         const unit = data.value.find((d) => d.name === 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>`;
            //   },
            // },
            yAxis: {
              type: 'category',
              axisLine: { show: false },
              axisLabel: { show: false },
              axisTick: { show: false },
              splitLine: { show: false },
              data: dateX,
            },
            xAxis: {
              type: 'value',
              position: 'top',
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                },
              },
            },
            series: seriesList,
          };

          chartInstance = echarts.init(analysisGraphchart.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 {
        analysisGraphchart,
        downloadChart,
        mode,
        changeMode,
      };
    },
  });
</script>
<style lang="less" scoped></style>