diff --git a/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue b/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
index 448dbcc2e..7b114f6c4 100644
--- a/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
+++ b/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
@@ -1,5 +1,22 @@
 <template>
-  <div v-show="!isEmpty" class="line-chart" :id="instanceId"></div>
+  <div v-show="!isEmpty" class="chart-wrapper">
+    <div
+      :class="['line-chart', ['requests', 'non_200_status'].includes(instanceId) ? 'mini' : 'middle']"
+      :id="instanceId"></div>
+    <div
+      :class="['chart-legend', 'custom-scroll-bar', { 'side-legend': instanceId === 'non_200_status' }]"
+      v-if="chartLegend[instanceId]">
+      <div
+        v-for="({ color, name, selected }, legendIndex) in chartLegend[instanceId]"
+        :key="legendIndex"
+        :class="['legend-item', { selected, unselected: !selected }]"
+        @click.stop="handleClickLegend(legendIndex)">
+        <div class="legend-icon" :style="{ background: color }"></div>
+        <div class="legend-name">{{name}}</div>
+      </div>
+    </div>
+  </div>
+
   <div v-show="isEmpty" class="ap-nodata">
     <TableEmpty
       :keyword="tableEmptyConf.keyword"
@@ -17,6 +34,7 @@ import { merge } from 'lodash';
 import { userChartIntervalOption } from '@/hooks';
 import { SeriesItemType, SearchParamsType } from '../type';
 import TableEmpty from '@/components/table-empty.vue';
+import { getColorHue } from '@/common/util';
 
 const props = defineProps({
   instanceId: { // 生成图表的元素id
@@ -33,11 +51,30 @@ const props = defineProps({
   },
 });
 
+interface LegendItem {
+  color: string;
+  name: string;
+  selected: boolean,
+};
+
+interface ChartLegend {
+  requests_total?: LegendItem;
+  health_rate?: LegendItem;
+  requests?: LegendItem;
+  non_200_status?: LegendItem;
+  app_requests?: LegendItem;
+  resource_requests?: LegendItem;
+  ingress?: LegendItem;
+  egress?: LegendItem;
+  response_time_90th?: LegendItem;
+};
+
 const emit = defineEmits(['clear-params', 'report-init']);
 
 const { getChartIntervalOption } = userChartIntervalOption();
 
 const myChart = shallowRef();
+const chartLegend = ref<ChartLegend>({});
 const searchParams = ref<SearchParamsType>();
 const isEmpty = ref<boolean>(false);
 const tableEmptyConf = ref<{keyword: string, isAbnormal: boolean}>({
@@ -99,7 +136,6 @@ const chartResize = () => {
 
 const getChartOption = () => {
   const baseOption: echarts.EChartOption = {
-    color: ['#FFB43D', '#4BC7AD', '#FF7756', '#B5E0AB', '#D66F6B', '#3E96C2', '#FFA66B', '#85CCA8', '#FFC685', '#3762B8'],
     title: {
       text: props.title,
       top: 12,
@@ -112,7 +148,7 @@ const getChartOption = () => {
       },
     },
     grid: {
-      right: 140, // 设置距离右侧的间距
+      right: '8%', // 设置距离右侧的间距
     },
     xAxis: {
       type: 'time',
@@ -120,7 +156,8 @@ const getChartOption = () => {
       boundaryGap: false,
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#666666',
-        rotate: 35,
+        fontSize: 12,
+        padding: [0, 5, 0, 0],
       },
       axisLine: { // 坐标轴轴线相关设置
         lineStyle: {
@@ -138,6 +175,8 @@ const getChartOption = () => {
       type: 'value',
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#666666',
+        fontSize: 12,
+        padding: [0, 5, 0, 0],
       },
       splitLine: { // 坐标轴在 grid 区域中的分隔线
         lineStyle: {
@@ -164,34 +203,20 @@ const getChartOption = () => {
           borderWidth: 0, // 边框宽度为0
         },
       },
-    }],
-    legend: { // 图例组件
-      show: true,
-      type: 'scroll',
-      orient: 'vertical', // 垂直排列
-      right: 10,
-      top: 30,     // 垂直居中
-      height: 302,
-      pageIconSize: 12, // 翻页按钮的大小
-      pageIconColor: '#63656E', // 翻页按钮的颜色
-      pageIconInactiveColor: '#C4C6CC', // 翻页按钮不激活时（即翻页到头时）的颜色
-      textStyle: {       // 图例文字的样式设置
-        fontSize: 12,
-        color: '#63656E',
-      },
-      itemWidth: 16, // 图例标记的图形宽度
-      itemHeight: 6, // 图例标记的图形高度
-      itemGap: 16, // 设置图例项之间的间隔
-      tooltip: {
-        show: true,
+      lineStyle: {
+        width: 1,
       },
-      formatter: (name: string) => {
-        return echarts.format.truncateText(name, 80, '12px Microsoft Yahei', '…');
+      markPoint: {
+        symbolSize: 12,
       },
+    }],
+    legend: {
+      show: false,
     },
   };
 
   const chartOption: echarts.EChartOption = {
+    xAxis: {},
     yAxis: {},
     series: [],
     tooltip: {},
@@ -222,15 +247,15 @@ const getChartOption = () => {
       }));
       moreOption = getChartMoreOption(datapoints);
     });
-    if (props.instanceId === 'requests') {
-      chartOption.legend.show = false;
-      chartOption.grid.left = '14%';
-      chartOption.grid.right = '8%';
-    }
-
-    if (props.instanceId === 'non_200_status') {
-      chartOption.grid.left = '14%';
-      chartOption.grid.right = 80;
+    // 设置图表颜色
+    chartOption.color = generateChartColor(props.chartData.series ?? []);
+    if (['requests', 'non_200_status'].includes(props.instanceId)) {
+      chartOption.grid.left = '18%';
+      if (document.body.clientWidth < 1550) {
+        chartOption.xAxis.axisLabel = {
+          rotate: 35,
+        };
+      }
     }
 
     if (props.instanceId === 'ingress' || props.instanceId === 'egress') {
@@ -267,8 +292,6 @@ const getChartOption = () => {
       formatter: '{value} ms',
     };
 
-    chartOption.grid.right = '10%';
-
     const serieData = datapoints.reduce((a, b) => a.concat(b), []);
     moreOption = getChartMoreOption(serieData);
   }
@@ -293,11 +316,99 @@ const getChartMoreOption = (seriesData: Array<Array<number>>) => {
   return xAxisIntervalOption;
 };
 
+const generateChartColor = (chartData: SeriesItemType[]) => {
+  let baseColor = ['#3A84FF', '#5AD8A6', '#5D7092', '#F6BD16', '#FF5656', '#6DC8EC', '#FFB43D', '#4BC7AD', '#FF7756', '#B5E0AB'];
+  let angle = 30;
+  if (props.instanceId.indexOf('failed_') !== -1) {
+    baseColor = ['#FF5656', '#5AD8A6'];
+    angle = 10;
+  }
+  const colors: string[] = [];
+  const interval = Math.ceil(chartData.length / baseColor.length);
+
+  baseColor.forEach((color) => {
+    let i = 0;
+    while (i < interval) {
+      const co = getColorHue(color, i * angle);
+      colors.push(co);
+      i += 1;
+    }
+  });
+
+  const finalColors = colors.reduce((a, b) => a.concat(b), []);
+  return finalColors;
+};
+
+const generateChartLegend = () => {
+  const option = myChart.value?.getOption();
+  // 只有一个系列不需要图例
+  if (option.series.length > 1) {
+    chartLegend.value[props.instanceId] = option?.series?.map((serie: echarts.EChartOption.Series, index: number) => ({
+      color: option.color[index],
+      name: serie.name,
+      selected: false,
+    }));
+  } else {
+    chartLegend.value[props.instanceId] = null;
+  }
+};
+
+const handleClickLegend = (index: number) => {
+  const legend = chartLegend.value[props.instanceId];
+  const currentLegend = legend[index];
+
+  const { selected } = currentLegend;
+
+  // 实现切换单选显示
+  if (!selected) {
+    // 仅显示选中
+    myChart.value.dispatchAction({
+      type: 'legendUnSelect',
+      batch: legend.map(({ name }: LegendItem) => ({ name })),
+    });
+    myChart.value.dispatchAction({
+      type: 'legendSelect',
+      name: currentLegend.name,
+    });
+
+    // 选中状态设置
+    legend.forEach((item: LegendItem, i: number) => {
+      item.selected = index === i;
+    });
+    chartLegend.value = { ...chartLegend.value, ...{ [props.instanceId]: legend } };
+  } else {
+    // 全部显示
+    myChart.value.dispatchAction({
+      type: 'legendSelect',
+      batch: legend.map(({ name }: LegendItem) => ({ name })),
+    });
+
+    legend.forEach((item: LegendItem) => (item.selected = false));
+    chartLegend.value = { ...chartLegend.value, ...{ [props.instanceId]: legend } };
+  }
+};
+
 const renderChart = () => {
   nextTick(() => {
     const option = getChartOption();
     myChart.value?.setOption(option, { notMerge: true });
+    // 切换图例，处理单个数据点x轴显示问题
+    myChart.value?.on('legendselected', (params: LegendItem) => {
+      const currentOption = myChart.value.getOption();
+      const serie = currentOption.series.find((item: echarts.EChartOption.Series) => item.name === params.name) || {};
+      if (serie.data && serie.data.length === 1) {
+        // fix单个数据点xAxis显示异常，本质上是去掉动态计算出的间隔设置
+        myChart.value?.setOption({
+          xAxis: {
+            interval: 'auto',
+          },
+        });
+      } else {
+        myChart.value?.setOption(option);
+      }
+    });
     chartResize();
+    generateChartLegend();
   });
 };
 
@@ -311,8 +422,74 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.line-chart {
-  width: 100%;
-  height: 100%;
+.chart-wrapper {
+  position: relative;
+  .line-chart {
+    &.mini {
+      height: 320px;
+    }
+    &.middle {
+      height: 360px;
+    }
+  }
+  .chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 40px;
+    height: 70px;
+    max-height: 110px;
+    overflow-y: auto;
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      flex: none;
+      font-size: 12px;
+      line-height: 22px;
+      margin-right: 12px;
+      color: #777;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:hover,
+      &.selected {
+        color: #333;
+      }
+
+      &.unselected {
+        color: #ccc;
+      }
+    }
+    .legend-icon {
+      height: 4px;
+      background: #999;
+      flex: none;
+      width: 16px;
+      border-radius: 2px;
+      margin-right: 3px;
+    }
+  }
+  .side-legend {
+    position: absolute;
+    right: -34px;
+    top: 10px;
+    flex-direction: column;
+  }
+  .custom-scroll-bar {
+    &::-webkit-scrollbar {
+      width: 4px;
+      background-color: lighten(#c4c6cc, 80%);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      height: 5px;
+      border-radius: 2px;
+      background-color: #c4c6cc;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
 }
 </style>
diff --git a/src/dashboard-front/src/views/operate-data/statistics-report/index.vue b/src/dashboard-front/src/views/operate-data/statistics-report/index.vue
index b5652cc8c..77deddfc2 100644
--- a/src/dashboard-front/src/views/operate-data/statistics-report/index.vue
+++ b/src/dashboard-front/src/views/operate-data/statistics-report/index.vue
@@ -255,7 +255,7 @@ const handleReportInit = () => {
   }
   .requests {
     .total-requests {
-      width: 254px;
+      width: 200px;
       height: 320px;
       background: #FFFFFF;
       box-shadow: 0 1px 2px 0 #0000001a;
@@ -280,7 +280,6 @@ const handleReportInit = () => {
     }
     .success-requests {
       width: 673px;
-      height: 320px;
       background: #FFFFFF;
       box-shadow: 0 2px 4px 0 #1919290d;
       border-radius: 2px;
@@ -288,7 +287,6 @@ const handleReportInit = () => {
     }
     .error-requests {
       width: 673px;
-      height: 320px;
       background: #FFFFFF;
       box-shadow: 0 2px 4px 0 #1919290d;
       border-radius: 2px;
@@ -297,25 +295,25 @@ const handleReportInit = () => {
   .secondary-panel {
     .secondary-lf {
       width: 808px;
-      height: 360px;
       background: #FFFFFF;
       box-shadow: 0 2px 4px 0 #1919290d;
       border-radius: 2px;
       margin-right: 16px;
+      padding-bottom: 6px;
     }
     .secondary-rg {
       width: 808px;
-      height: 360px;
       background: #FFFFFF;
       box-shadow: 0 2px 4px 0 #1919290d;
       border-radius: 2px;
+      padding-bottom: 6px;
     }
   }
   .full-line {
-    height: 360px;
     background: #FFFFFF;
     box-shadow: 0 2px 4px 0 #1919290d;
     border-radius: 2px;
+    padding-bottom: 12px;
   }
 }
 .full-box {