fe.ems.vue3/src/views/monitor/overview/components/UPFFlow/index.vue

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { listKPIData } from '@/api/perfManage/goldTarget';
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { markRaw } from 'vue';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { upfNeUId, upfFlowData, upfFlowParse } from '../../hooks/useUPFTotalFlow';
import { currentCoreUid } from '@/hooks/useCoreUid';

const { t } = useI18n();

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | LineSeriesOption
>;

/**图DOM节点实例对象 */
const upfFlow = ref<HTMLElement | undefined>(undefined);

/**图实例对象 */
const upfFlowChart = ref<any>(null);

function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
  if (!container) {
    return;
  }
  if (!upfFlowChart.value) {
    upfFlowChart.value = markRaw(echarts.init(container, 'light'));
  }

  option && upfFlowChart.value.setOption(option);

  // 创建 ResizeObserver 实例
  var observer = new ResizeObserver(entries => {
    if (upfFlowChart.value) {
      upfFlowChart.value.resize();
    }
  });
  // 监听元素大小变化
  observer.observe(container);
}

//渲染速率图
function handleRanderChart() {
  const { lineXTime, lineYUp, lineYDown } = upfFlowData.value;

  var yAxisSeries: any = [
    {
      name: t('views.dashboard.overview.upfFlow.up'),
      type: 'line',
      color: 'rgba(250, 219, 20)',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(250, 219, 20, .5)',
          },
          {
            offset: 1,
            color: 'rgba(250, 219, 20, 0.5)',
          },
        ]),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
      },
      symbol: 'circle',
      symbolSize: 5,
      formatter: '{b}',
      data: lineYUp,
    },
    {
      name: t('views.dashboard.overview.upfFlow.down'),
      type: 'line',
      color: 'rgba(92, 123, 217)',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(92, 123, 217, .5)',
          },
          {
            offset: 1,
            color: 'rgba(92, 123, 217, 0.5)',
          },
        ]),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
      },
      symbol: 'circle',
      symbolSize: 5,
      formatter: '{b}',
      data: lineYDown,
    },
  ];

  const optionData: EChartsOption = {
    tooltip: {
      show: true, //是否显示提示框组件
      trigger: 'axis',
      //formatter:'{a0}:{c0}<br>{a1}:{c1}'
      formatter: function (param: any) {
        var tip = '';
        if (param !== null && param.length > 0) {
          tip += param[0].name + '<br />';
          for (var i = 0; i < param.length; i++) {
            tip +=
              param[i].marker +
              param[i].seriesName +
              ': ' +
              param[i].value +
              '<br />';
          }
        }
        return tip;
      },
    },
    legend: {
      data: yAxisSeries.map((s: any) => s.name),
      textStyle: {
        fontSize: 12,
        color: 'rgb(0,253,255,0.6)',
      },
      left: 'center', // 设置图例居中
    },
    grid: {
      top: '14%',
      left: '4%',
      right: '4%',
      bottom: '12%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: lineXTime,
      axisLabel: {
        formatter: function (params: any) {
          return params;
        },
        fontSize: 14,
      },
      axisLine: {
        lineStyle: {
          color: 'rgb(0,253,255,0.6)',
        },
      },
    },
    yAxis: [
      {
        name: '(Mbps)',
        nameTextStyle: {
          fontSize: 12, // 设置文字距离x轴的距离
          padding: [0, -10, 0, 0], // 设置名称在x轴方向上的偏移
        },
        type: 'value',
        //  splitNumber: 4,
        min: 0,
        //max: 300,
        axisLabel: {
          formatter: '{value}',
        },
        splitLine: {
          lineStyle: {
            color: 'rgb(23,255,243,0.3)',
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgb(0,253,255,0.6)',
          },
        },
      },
    ],
    series: yAxisSeries,
  };
  fnDesign(upfFlow.value, optionData);
}

/**查询初始UPF数据 */
function fnGetInitData() {
  // 查询5分钟前的
  const nowDate = new Date().getTime();

  listKPIData({
    coreUid: currentCoreUid(),
    neUid: upfNeUId.value,
    neType: 'UPF',
    beginTime: nowDate - 5 * 60 * 1000,
    endTime: nowDate,
    interval: 5, // 5秒
    sortField: 'timeGroup',
    sortOrder: 'asc',
  })
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS) {
        for (const item of res.data) {
          upfFlowParse(item);
        }
      }
    })
    .finally(() => {
      handleRanderChart();
    });
}

watch(
  () => upfFlowData.value,
  v => {
    if (upfFlowChart.value == null) return;
    upfFlowChart.value.setOption({
      xAxis: {
        data: v.lineXTime,
      },
      series: [
        {
          data: v.lineYUp,
        },
        {
          data: v.lineYDown,
        },
      ],
    });
  },
  {
    deep: true,
  }
);

onMounted(() => {
  setTimeout(() => {
    fnGetInitData();
  }, 1000);
});
</script>

<template>
  <div ref="upfFlow" class="chart-container"></div>
</template>

<style lang="less" scoped>
.chart-container {
  /* 设置图表容器大小和位置 */
  width: 100%;
  height: 100%;
}
</style>