refactor: 【crm】【antd/ele】提取图表配置生成函数，统一 legend/grid/tooltip 处理，优化饼图面板生成

apps/web-antd/src/views/crm/statistics/customer/chartOptions.ts

@@ -1,17 +1,34 @@
 import { DICT_TYPE } from '@vben/constants';
 import { getDictLabel } from '@vben/hooks';
 
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+  ...extra,
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
+    // 客户转化率分析
     case 'conversionStat': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '客户转化率',
@@ -21,9 +38,9 @@ export function getChartOptions(activeTabName: any, res: any): any {
                 name: item.time,
                 value: item.customerCreateCount
                   ? (
-                      (item.customerDealCount / item.customerCreateCount) *
+                    (item.customerDealCount / item.customerCreateCount) *
-                      100
+                    100
-                    ).toFixed(2)
+                  ).toFixed(2)
                   : 0,
               };
             }),
@@ -40,12 +57,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户转化率分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: {
           type: 'value',
           name: '转化率(%)',
@@ -59,14 +71,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'customerSummary': {
       return {
-        grid: {
+        grid: getGrid({
-          bottom: '5%',
+          bottom: '8%',
-          containLabel: true,
           left: '5%',
           right: '5%',
-          top: '5 %',
+          top: 80,
-        },
+        }),
-        legend: {},
+        legend: getLegend(),
         series: [
           {
             name: '新增客户数',
@@ -92,12 +103,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -134,13 +140,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
         };
       });
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '成交周期(天)',
@@ -166,12 +167,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -208,13 +204,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
         };
       });
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '成交周期(天)',
@@ -240,12 +231,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -277,13 +263,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
       const customerDealCycleByDate = res.customerDealCycleByDate;
       const customerDealCycleByUser = res.customerDealCycleByUser;
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '成交周期(天)',
@@ -309,12 +290,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -342,15 +318,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
         },
       };
     }
+    // 客户跟进次数分析
     case 'followUpSummary': {
       return {
-        grid: {
+        grid: getGrid({
-          left: 20,
           right: 30, // 让 X 轴右侧显示完整
-          bottom: 20,
+        }),
-          containLabel: true,
+        legend: getLegend(),
-        },
-        legend: {},
         series: [
           {
             name: '跟进客户数',
@@ -376,12 +350,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户跟进次数分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -412,20 +381,21 @@ export function getChartOptions(activeTabName: any, res: any): any {
         },
       };
     }
+    // 客户跟进方式分析
     case 'followUpType': {
       return {
         title: {
           text: '客户跟进方式分析',
           left: 'center',
         },
-        legend: {
+        legend: getLegend({
-          orient: 'vertical',
           left: 'left',
-        },
+        }),
-        tooltip: {
+        tooltip: getTooltip({
           trigger: 'item',
+          axisPointer: undefined,
           formatter: '{b} : {c}% ',
-        },
+        }),
         toolbox: {
           feature: {
             saveAsImage: { show: true, name: '客户跟进方式分析' }, // 保存为图片
@@ -458,13 +428,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'poolSummary': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '进入公海客户数',
@@ -490,12 +455,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '公海客户分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',

apps/web-antd/src/views/crm/statistics/funnel/chartOptions.ts

@@ -1,5 +1,26 @@
 import { erpCalculatePercentage } from '@vben/utils';
 
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+  ...extra,
+});
+
 export function getChartOptions(
   activeTabName: any,
   active: boolean,
@@ -9,26 +30,19 @@ export function getChartOptions(
     case 'businessInversionRateSummary': {
       return {
         color: ['#6ca2ff', '#6ac9d7', '#ff7474'],
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
+        legend: getLegend({
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
-          },
-        },
-        legend: {
           data: ['赢单转化率', '商机总数', '赢单商机数'],
           bottom: '0px',
           itemWidth: 14,
-        },
+        }),
-        grid: {
+        grid: getGrid({
           top: '40px',
           left: '40px',
           right: '40px',
           bottom: '40px',
-          containLabel: true,
           borderColor: '#fff',
-        },
+        }),
         xAxis: [
           {
             type: 'category',
@@ -117,13 +131,11 @@ export function getChartOptions(
     }
     case 'businessSummary': {
       return {
-        grid: {
+        grid: getGrid({
           left: 30,
           right: 30, // 让 X 轴右侧显示完整
-          bottom: 20,
+        }),
-          containLabel: true,
+        legend: getLegend(),
-        },
-        legend: {},
         series: [
           {
             name: '新增商机数量',
@@ -149,12 +161,7 @@ export function getChartOptions(
             saveAsImage: { show: true, name: '新增商机分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -211,10 +218,11 @@ export function getChartOptions(
         title: {
           text: '销售漏斗',
         },
-        tooltip: {
+        tooltip: getTooltip({
           trigger: 'item',
+          axisPointer: undefined,
           formatter: '{a} <br/>{b}',
-        },
+        }),
         toolbox: {
           feature: {
             dataView: { readOnly: false },
@@ -222,9 +230,9 @@ export function getChartOptions(
             saveAsImage: {},
           },
         },
-        legend: {
+        legend: getLegend({
           data: ['客户', '商机', '赢单'],
-        },
+        }),
         series: [
           {
             name: '销售漏斗',

apps/web-antd/src/views/crm/statistics/performance/chartOptions.ts

@@ -1,14 +1,30 @@
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+  ...extra,
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
     case 'ContractCountPerformance': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '当月合同数量（个）',
@@ -65,12 +81,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -131,13 +142,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'ContractPricePerformance': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '当月合同金额（元）',
@@ -260,13 +266,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'ReceivablePricePerformance': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '当月回款金额（元）',

apps/web-antd/src/views/crm/statistics/portrait/chartOptions.ts

@@ -13,6 +13,71 @@ function areaReplace(areaName: string) {
     .replace('省', '');
 }
 
+const getPieTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'item',
+  ...extra,
+});
+
+const getPieLegend = (extra: Record<string, any> = {}) => ({
+  orient: 'vertical',
+  left: 'left',
+  ...extra,
+});
+
+const getPieSeries = (name: string, data: any[]) => ({
+  name,
+  type: 'pie',
+  radius: ['40%', '70%'],
+  avoidLabelOverlap: false,
+  itemStyle: {
+    borderRadius: 10,
+    borderColor: '#fff',
+    borderWidth: 2,
+  },
+  label: {
+    show: false,
+    position: 'center',
+  },
+  emphasis: {
+    label: {
+      show: true,
+      fontSize: 40,
+      fontWeight: 'bold',
+    },
+  },
+  labelLine: {
+    show: false,
+  },
+  data,
+});
+
+const getPiePanel = ({
+  data,
+  legendExtra,
+  seriesName,
+  title,
+  tooltipExtra,
+}: {
+  data: any[];
+  legendExtra?: Record<string, any>;
+  seriesName: string;
+  title: string;
+  tooltipExtra?: Record<string, any>;
+}) => ({
+  title: {
+    text: title,
+    left: 'center',
+  },
+  tooltip: getPieTooltip(tooltipExtra),
+  legend: getPieLegend(legendExtra),
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: title },
+    },
+  },
+  series: [getPieSeries(seriesName, data)],
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
     case 'area': {
@@ -111,326 +176,62 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'industry': {
       return {
-        left: {
+        left: getPiePanel({
-          title: {
+          title: '全部客户',
-            text: '全部客户',
+          seriesName: '全部客户',
-            left: 'center',
+          data: res.map((r: any) => ({
-          },
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
-          tooltip: {
+            value: r.customerCount,
-            trigger: 'item',
+          })),
-          },
+        }),
-          legend: {
+        right: getPiePanel({
-            orient: 'vertical',
+          title: '成交客户',
-            left: 'left',
+          seriesName: '成交客户',
-          },
+          data: res.map((r: any) => ({
-          toolbox: {
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
-            feature: {
+            value: r.dealCount,
-              saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
+          })),
-            },
+        }),
-          },
-          series: [
-            {
-              name: '全部客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(
-                    DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-                    r.industryId,
-                  ),
-                  value: r.customerCount,
-                };
-              }),
-            },
-          ],
-        },
-        right: {
-          title: {
-            text: '成交客户',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
-            },
-          },
-          series: [
-            {
-              name: '成交客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(
-                    DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-                    r.industryId,
-                  ),
-                  value: r.dealCount,
-                };
-              }),
-            },
-          ],
-        },
       };
     }
     case 'level': {
       return {
-        left: {
+        left: getPiePanel({
-          title: {
+          title: '全部客户',
-            text: '全部客户',
+          seriesName: '全部客户',
-            left: 'center',
+          data: res.map((r: any) => ({
-          },
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-          tooltip: {
+            value: r.customerCount,
-            trigger: 'item',
+          })),
-          },
+        }),
-          legend: {
+        right: getPiePanel({
-            orient: 'vertical',
+          title: '成交客户',
-            left: 'left',
+          seriesName: '成交客户',
-          },
+          data: res.map((r: any) => ({
-          toolbox: {
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-            feature: {
+            value: r.dealCount,
-              saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
+          })),
-            },
+        }),
-          },
-          series: [
-            {
-              name: '全部客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-                  value: r.customerCount,
-                };
-              }),
-            },
-          ],
-        },
-        right: {
-          title: {
-            text: '成交客户',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
-            },
-          },
-          series: [
-            {
-              name: '成交客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-                  value: r.dealCount,
-                };
-              }),
-            },
-          ],
-        },
       };
     }
     case 'source': {
       return {
-        left: {
+        left: getPiePanel({
-          title: {
+          title: '全部客户',
-            text: '全部客户',
+          seriesName: '全部客户',
-            left: 'center',
+          data: res.map((r: any) => ({
-          },
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-          tooltip: {
+            value: r.customerCount,
-            trigger: 'item',
+          })),
-          },
+        }),
-          legend: {
+        right: getPiePanel({
-            orient: 'vertical',
+          title: '成交客户',
-            left: 'left',
+          seriesName: '成交客户',
-          },
+          data: res.map((r: any) => ({
-          toolbox: {
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-            feature: {
+            value: r.dealCount,
-              saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
+          })),
-            },
+        }),
-          },
-          series: [
-            {
-              name: '全部客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-                  value: r.customerCount,
-                };
-              }),
-            },
-          ],
-        },
-        right: {
-          title: {
-            text: '成交客户',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
-            },
-          },
-          series: [
-            {
-              name: '成交客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-                  value: r.dealCount,
-                };
-              }),
-            },
-          ],
-        },
       };
     }
     default: {

apps/web-antd/src/views/crm/statistics/rank/chartOptions.ts

@@ -1,5 +1,25 @@
 import { cloneDeep } from '@vben/utils';
 
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = () => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
     case 'contactCountRank': {
@@ -8,15 +28,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '新增联系人数排行',
@@ -34,12 +47,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '新增联系人数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '新增联系人数（个）',
@@ -56,15 +64,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '签约合同排行',
@@ -82,12 +83,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '签约合同排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '签约合同数（个）',
@@ -104,15 +100,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '合同金额排行',
@@ -130,12 +119,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '合同金额排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '合同金额（元）',
@@ -152,15 +136,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '新增客户数排行',
@@ -178,12 +155,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '新增客户数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '新增客户数（个）',
@@ -226,12 +198,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '跟进次数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '跟进次数（次）',
@@ -274,12 +241,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '跟进客户数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '跟进客户数（个）',
@@ -322,12 +284,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '产品销量排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '产品销量',
@@ -370,12 +327,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '回款金额排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '回款金额（元）',

apps/web-ele/src/views/crm/statistics/customer/chartOptions.ts

@@ -1,17 +1,34 @@
 import { DICT_TYPE } from '@vben/constants';
 import { getDictLabel } from '@vben/hooks';
 
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+  ...extra,
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
+    // 客户转化率分析
     case 'conversionStat': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '客户转化率',
@@ -40,12 +57,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户转化率分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: {
           type: 'value',
           name: '转化率(%)',
@@ -59,14 +71,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'customerSummary': {
       return {
-        grid: {
+        grid: getGrid({
-          bottom: '5%',
+          bottom: '8%',
-          containLabel: true,
           left: '5%',
           right: '5%',
-          top: '5 %',
+          top: 80,
-        },
+        }),
-        legend: {},
+        legend: getLegend(),
         series: [
           {
             name: '新增客户数',
@@ -92,12 +103,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -134,13 +140,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
         };
       });
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '成交周期(天)',
@@ -166,12 +167,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -208,13 +204,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
         };
       });
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '成交周期(天)',
@@ -240,12 +231,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -277,13 +263,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
       const customerDealCycleByDate = res.customerDealCycleByDate;
       const customerDealCycleByUser = res.customerDealCycleByUser;
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '成交周期(天)',
@@ -309,12 +290,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -342,15 +318,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
         },
       };
     }
+    // 客户跟进次数分析
     case 'followUpSummary': {
       return {
-        grid: {
+        grid: getGrid({
-          left: 20,
           right: 30, // 让 X 轴右侧显示完整
-          bottom: 20,
+        }),
-          containLabel: true,
+        legend: getLegend(),
-        },
-        legend: {},
         series: [
           {
             name: '跟进客户数',
@@ -376,12 +350,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户跟进次数分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -412,20 +381,21 @@ export function getChartOptions(activeTabName: any, res: any): any {
         },
       };
     }
+    // 客户跟进方式分析
     case 'followUpType': {
       return {
         title: {
           text: '客户跟进方式分析',
           left: 'center',
         },
-        legend: {
+        legend: getLegend({
-          orient: 'vertical',
           left: 'left',
-        },
+        }),
-        tooltip: {
+        tooltip: getTooltip({
           trigger: 'item',
+          axisPointer: undefined,
           formatter: '{b} : {c}% ',
-        },
+        }),
         toolbox: {
           feature: {
             saveAsImage: { show: true, name: '客户跟进方式分析' }, // 保存为图片
@@ -458,13 +428,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'poolSummary': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 40, // 让 X 轴右侧显示完整
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '进入公海客户数',
@@ -490,12 +455,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '公海客户分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',

apps/web-ele/src/views/crm/statistics/funnel/chartOptions.ts

@@ -1,5 +1,26 @@
 import { erpCalculatePercentage } from '@vben/utils';
 
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+  ...extra,
+});
+
 export function getChartOptions(
   activeTabName: any,
   active: boolean,
@@ -9,26 +30,19 @@ export function getChartOptions(
     case 'businessInversionRateSummary': {
       return {
         color: ['#6ca2ff', '#6ac9d7', '#ff7474'],
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
+        legend: getLegend({
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
-          },
-        },
-        legend: {
           data: ['赢单转化率', '商机总数', '赢单商机数'],
           bottom: '0px',
           itemWidth: 14,
-        },
+        }),
-        grid: {
+        grid: getGrid({
           top: '40px',
           left: '40px',
           right: '40px',
           bottom: '40px',
-          containLabel: true,
           borderColor: '#fff',
-        },
+        }),
         xAxis: [
           {
             type: 'category',
@@ -117,13 +131,11 @@ export function getChartOptions(
     }
     case 'businessSummary': {
       return {
-        grid: {
+        grid: getGrid({
           left: 30,
           right: 30, // 让 X 轴右侧显示完整
-          bottom: 20,
+        }),
-          containLabel: true,
+        legend: getLegend(),
-        },
-        legend: {},
         series: [
           {
             name: '新增商机数量',
@@ -149,12 +161,7 @@ export function getChartOptions(
             saveAsImage: { show: true, name: '新增商机分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -211,10 +218,11 @@ export function getChartOptions(
         title: {
           text: '销售漏斗',
         },
-        tooltip: {
+        tooltip: getTooltip({
           trigger: 'item',
+          axisPointer: undefined,
           formatter: '{a} <br/>{b}',
-        },
+        }),
         toolbox: {
           feature: {
             dataView: { readOnly: false },
@@ -222,9 +230,9 @@ export function getChartOptions(
             saveAsImage: {},
           },
         },
-        legend: {
+        legend: getLegend({
           data: ['客户', '商机', '赢单'],
-        },
+        }),
         series: [
           {
             name: '销售漏斗',

apps/web-ele/src/views/crm/statistics/performance/chartOptions.ts

@@ -1,14 +1,30 @@
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+  ...extra,
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
     case 'ContractCountPerformance': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '当月合同数量（个）',
@@ -65,12 +81,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         yAxis: [
           {
             type: 'value',
@@ -131,13 +142,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'ContractPricePerformance': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '当月合同金额（元）',
@@ -260,13 +266,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'ReceivablePricePerformance': {
       return {
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {},
         series: [
           {
             name: '当月回款金额（元）',

apps/web-ele/src/views/crm/statistics/portrait/chartOptions.ts

@@ -13,6 +13,71 @@ function areaReplace(areaName: string) {
     .replace('省', '');
 }
 
+const getPieTooltip = (extra: Record<string, any> = {}) => ({
+  trigger: 'item',
+  ...extra,
+});
+
+const getPieLegend = (extra: Record<string, any> = {}) => ({
+  orient: 'vertical',
+  left: 'left',
+  ...extra,
+});
+
+const getPieSeries = (name: string, data: any[]) => ({
+  name,
+  type: 'pie',
+  radius: ['40%', '70%'],
+  avoidLabelOverlap: false,
+  itemStyle: {
+    borderRadius: 10,
+    borderColor: '#fff',
+    borderWidth: 2,
+  },
+  label: {
+    show: false,
+    position: 'center',
+  },
+  emphasis: {
+    label: {
+      show: true,
+      fontSize: 40,
+      fontWeight: 'bold',
+    },
+  },
+  labelLine: {
+    show: false,
+  },
+  data,
+});
+
+const getPiePanel = ({
+  data,
+  legendExtra,
+  seriesName,
+  title,
+  tooltipExtra,
+}: {
+  data: any[];
+  legendExtra?: Record<string, any>;
+  seriesName: string;
+  title: string;
+  tooltipExtra?: Record<string, any>;
+}) => ({
+  title: {
+    text: title,
+    left: 'center',
+  },
+  tooltip: getPieTooltip(tooltipExtra),
+  legend: getPieLegend(legendExtra),
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: title },
+    },
+  },
+  series: [getPieSeries(seriesName, data)],
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
     case 'area': {
@@ -111,326 +176,62 @@ export function getChartOptions(activeTabName: any, res: any): any {
     }
     case 'industry': {
       return {
-        left: {
+        left: getPiePanel({
-          title: {
+          title: '全部客户',
-            text: '全部客户',
+          seriesName: '全部客户',
-            left: 'center',
+          data: res.map((r: any) => ({
-          },
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
-          tooltip: {
+            value: r.customerCount,
-            trigger: 'item',
+          })),
-          },
+        }),
-          legend: {
+        right: getPiePanel({
-            orient: 'vertical',
+          title: '成交客户',
-            left: 'left',
+          seriesName: '成交客户',
-          },
+          data: res.map((r: any) => ({
-          toolbox: {
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
-            feature: {
+            value: r.dealCount,
-              saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
+          })),
-            },
+        }),
-          },
-          series: [
-            {
-              name: '全部客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(
-                    DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-                    r.industryId,
-                  ),
-                  value: r.customerCount,
-                };
-              }),
-            },
-          ],
-        },
-        right: {
-          title: {
-            text: '成交客户',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
-            },
-          },
-          series: [
-            {
-              name: '成交客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(
-                    DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-                    r.industryId,
-                  ),
-                  value: r.dealCount,
-                };
-              }),
-            },
-          ],
-        },
       };
     }
     case 'level': {
       return {
-        left: {
+        left: getPiePanel({
-          title: {
+          title: '全部客户',
-            text: '全部客户',
+          seriesName: '全部客户',
-            left: 'center',
+          data: res.map((r: any) => ({
-          },
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-          tooltip: {
+            value: r.customerCount,
-            trigger: 'item',
+          })),
-          },
+        }),
-          legend: {
+        right: getPiePanel({
-            orient: 'vertical',
+          title: '成交客户',
-            left: 'left',
+          seriesName: '成交客户',
-          },
+          data: res.map((r: any) => ({
-          toolbox: {
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-            feature: {
+            value: r.dealCount,
-              saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
+          })),
-            },
+        }),
-          },
-          series: [
-            {
-              name: '全部客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-                  value: r.customerCount,
-                };
-              }),
-            },
-          ],
-        },
-        right: {
-          title: {
-            text: '成交客户',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
-            },
-          },
-          series: [
-            {
-              name: '成交客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
-                  value: r.dealCount,
-                };
-              }),
-            },
-          ],
-        },
       };
     }
     case 'source': {
       return {
-        left: {
+        left: getPiePanel({
-          title: {
+          title: '全部客户',
-            text: '全部客户',
+          seriesName: '全部客户',
-            left: 'center',
+          data: res.map((r: any) => ({
-          },
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-          tooltip: {
+            value: r.customerCount,
-            trigger: 'item',
+          })),
-          },
+        }),
-          legend: {
+        right: getPiePanel({
-            orient: 'vertical',
+          title: '成交客户',
-            left: 'left',
+          seriesName: '成交客户',
-          },
+          data: res.map((r: any) => ({
-          toolbox: {
+            name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-            feature: {
+            value: r.dealCount,
-              saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
+          })),
-            },
+        }),
-          },
-          series: [
-            {
-              name: '全部客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-                  value: r.customerCount,
-                };
-              }),
-            },
-          ],
-        },
-        right: {
-          title: {
-            text: '成交客户',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
-            },
-          },
-          series: [
-            {
-              name: '成交客户',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2,
-              },
-              label: {
-                show: false,
-                position: 'center',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 40,
-                  fontWeight: 'bold',
-                },
-              },
-              labelLine: {
-                show: false,
-              },
-              data: res.map((r: any) => {
-                return {
-                  name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
-                  value: r.dealCount,
-                };
-              }),
-            },
-          ],
-        },
       };
     }
     default: {

apps/web-ele/src/views/crm/statistics/rank/chartOptions.ts

@@ -1,5 +1,25 @@
 import { cloneDeep } from '@vben/utils';
 
+const getLegend = (extra: Record<string, any> = {}) => ({
+  top: 10,
+  ...extra,
+});
+
+const getGrid = (extra: Record<string, any> = {}) => ({
+  left: 20,
+  right: 20,
+  bottom: 20,
+  containLabel: true,
+  ...extra,
+});
+
+const getTooltip = () => ({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow',
+  },
+});
+
 export function getChartOptions(activeTabName: any, res: any): any {
   switch (activeTabName) {
     case 'contactCountRank': {
@@ -8,15 +28,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '新增联系人数排行',
@@ -34,12 +47,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '新增联系人数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '新增联系人数（个）',
@@ -56,15 +64,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '签约合同排行',
@@ -82,12 +83,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '签约合同排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '签约合同数（个）',
@@ -104,15 +100,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '合同金额排行',
@@ -130,12 +119,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '合同金额排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '合同金额（元）',
@@ -152,15 +136,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
           dimensions: ['nickname', 'count'],
           source: cloneDeep(res).toReversed(),
         },
-        grid: {
+        grid: getGrid(),
-          left: 20,
+        legend: getLegend(),
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        legend: {
-          top: 50,
-        },
         series: [
           {
             name: '新增客户数排行',
@@ -178,12 +155,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '新增客户数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '新增客户数（个）',
@@ -226,12 +198,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '跟进次数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '跟进次数（次）',
@@ -274,12 +241,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '跟进客户数排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '跟进客户数（个）',
@@ -322,12 +284,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '产品销量排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '产品销量',
@@ -370,12 +327,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
             saveAsImage: { show: true, name: '回款金额排行' }, // 保存为图片
           },
         },
-        tooltip: {
+        tooltip: getTooltip(),
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
         xAxis: {
           type: 'value',
           name: '回款金额（元）',