新建了API监控页面

src/views/dataSharingAndExchange/ApiMonitor/RightContent2.vue

 <template>
   <Card :loading="loading">
-     2222
+    <div style="font-weight: bold">流量统计</div>
+    <div class="centent">
+      <div class="centent1">
+        <div class="centent1-1">
+          <Divider type="vertical" class="centent1-1-1" style="display: flex;align-items: center;height: 20px;margin-left: 0px;"/>
+          <div class="centent1-1-2">实时总流量</div>
+        </div>
+        <div class="centent1-2">
+          <div>
+            <Img src="src/assets/images/apiMonitor1.png"/><br>
+            <div class="centent1-2-1">
+              <span class="centent1-2-2">SLB</span><br>
+              <span class="centent1-2-3">357</span>MB/S
+            </div>
+          </div>
+        </div>
+      </div>
+      <div ref="chartRef" :style="{ width, height }"></div>
+    </div>
   </Card>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { Tag, Card,Select } from 'ant-design-vue';
+import {onMounted, Ref, ref} from 'vue';
+import { Tag, Card,Select,Divider } from 'ant-design-vue';
 import { BasicTable, useTable, TableAction } from '@/components/Table';
 import {} from "./ApiMonitor.data";
 import {} from "./ApiMonitorData";
 import Icon from '@/components/Icon/Icon.vue';
+import {useECharts} from "@/hooks/web/useECharts";
 
-
+const chartRef = ref<HTMLDivElement | null>(null);
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+const props = defineProps({
+  loading: Boolean,
+  width: {
+    type: String as PropType<string>,
+    default: '70%',
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '300px',
+  },
+});
+onMounted(() => {
+  setOptions({
+    title: {
+      text: '流量统计',
+      left: 'left', // 将标题放在左侧
+      top: '10', // 距离顶部10px
+      textStyle: {
+        color: '#333', // 标题文字颜色
+        fontSize: 16, // 标题字体大小
+        fontWeight: 'bold' // 标题字体加粗
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          width: 1,
+          color: '#019680',
+        },
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [...new Array(8)].map((_item, index) => `10/0${index + 1}`),
+      splitLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          type: 'solid',
+          color: 'rgba(226,226,226,0.5)',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        max: 2.5,
+        splitNumber: 6,
+        axisTick: {
+          show: false,
+        },
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+          },
+        },
+      },
+    ],
+    grid: {
+      left: '1%',
+      right: '1%',
+      top: '50px',
+      bottom: 0,
+      containLabel: true,
+    },
+    series: [
+      {
+        name: '我发布的',
+        smooth: false,
+        data: [1.5, 2.0, 1.5, 2.0, 1.5, 2.2, 2.1, 2.0],
+        type: 'line',
+        areaStyle: {},
+        itemStyle: {
+          color: 'rgb(138, 197, 254,0.4)',
+        },
+      },
+    ],
+  });
+});
 </script>
 <style lang="less" scoped>
-
+.centent{
+  display: flex;
+  width: 100%;
+  .centent1{
+    width: 30%;
+    height: 300px;
+    .centent1-1{
+      display: flex;
+      margin-top: 10px;
+      height: 20px;
+      .centent1-1-1{
+        display: flex;
+        align-items: center;
+        height: 20px;
+        margin-left: 0px;
+      }
+      .centent1-1-2{
+        font-weight: bold;
+        font-size: 15px;
+      }
+    }
+    .centent1-2{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 250px;
+      .centent1-2-1{
+        text-align: center;
+      }
+      .centent1-2-2{
+        font-size: 18px;
+      }
+      .centent1-2-3{
+        font-weight: bold;
+        font-size: 18px;
+        margin-right: 3px;
+      }
+    }
+  }
+}
 </style>