feat: 在管理看板组件中添加图例选中状态和点击事件处理，优化图表数据展示

src/views/dashboard/admin/components/content-chart.vue

@@ -36,7 +36,11 @@
           <a-button type="primary" @click="handleDetailClick">明细</a-button>
         </a-space>
       </template>
-      <Chart height="289px" :option="chartOption" />
+      <Chart
+        height="289px"
+        :option="chartOption"
+        @legendselectchanged="handleLegendSelect"
+      />
     </a-card>
 
     <!-- 明细模态框 -->
@@ -90,6 +94,7 @@ import {
   KamiApiOrderV1OrderSummaryDailyRecord
 } from '@/api/generated';
 import dayjs from 'dayjs';
+import { LegendComponentOption } from 'echarts';
 
 // 状态变量
 const dateRange = ref<[dayjs.Dayjs, dayjs.Dayjs] | null>(null);
@@ -317,6 +322,20 @@ const graphicElements = ref([
   graphicFactory({ right: 0 })
 ]);
 
+// 定义图例选中状态的类型
+interface LegendSelected {
+  成功订单量: boolean;
+  总订单量: boolean;
+  成功率: boolean;
+}
+
+// 添加图例选中状态
+const legendSelected = ref<LegendSelected>({
+  成功订单量: true,
+  总订单量: true,
+  成功率: true
+});
+
 const { chartOption } = useChartOption(() => {
   return {
     grid: {
@@ -331,8 +350,10 @@ const { chartOption } = useChartOption(() => {
       right: 0,
       textStyle: {
         color: '#4E5969'
-      }
-    },
+      },
+      selectedMode: 'multiple',
+      selected: legendSelected.value
+    } as LegendComponentOption,
     xAxis: {
       type: 'category',
       offset: 2,
@@ -393,6 +414,26 @@ const { chartOption } = useChartOption(() => {
             type: 'dashed',
             color: '#E5E8EF'
           }
+        },
+        min: 0,
+        max: function (value: { min: number; max: number }) {
+          // 获取当前显示的数据系列
+          const visibleSeries = seriesData.value.filter((_, index) => {
+            const name = ['成功订单量', '总订单量', '成功率'][index];
+            return legendSelected.value[name as keyof LegendSelected];
+          });
+
+          // 如果是成功率，返回 100
+          if (visibleSeries.some(s => s.name === '成功率')) {
+            return 100;
+          }
+
+          // 否则返回订单量的最大值
+          const maxValue = Math.max(
+            ...seriesData.value[0].data,
+            ...seriesData.value[1].data
+          );
+          return Math.ceil(maxValue / 1000) * 1000; // 向上取整到最接近的千位
         }
       },
       {
@@ -505,6 +546,14 @@ const fetchData = async () => {
 onMounted(() => {
   initData();
 });
+
+// 添加图例点击事件处理
+const handleLegendSelect = (params: { selected: LegendSelected }) => {
+  // 更新图例选中状态
+  legendSelected.value = params.selected;
+  // 重新计算并更新图表
+  updateChartData();
+};
 </script>
 
 <style scoped lang="less">