diff --git a/apps/web-antd/src/views/crm/statistics/customer/chartOptions.ts b/apps/web-antd/src/views/crm/statistics/customer/chartOptions.ts index deecbd370..1c3781293 100644 --- a/apps/web-antd/src/views/crm/statistics/customer/chartOptions.ts +++ b/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 = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + left: 20, + right: 20, + bottom: 20, + containLabel: true, + ...extra, +}); + +const getTooltip = (extra: Record = {}) => ({ + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + ...extra, +}); + export function getChartOptions(activeTabName: any, res: any): any { switch (activeTabName) { + // 客户转化率分析 case 'conversionStat': { return { - grid: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '客户转化率', @@ -21,9 +38,9 @@ export function getChartOptions(activeTabName: any, res: any): any { name: item.time, value: item.customerCreateCount ? ( - (item.customerDealCount / item.customerCreateCount) * - 100 - ).toFixed(2) + (item.customerDealCount / item.customerCreateCount) * + 100 + ).toFixed(2) : 0, }; }), @@ -40,12 +57,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户转化率分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: { type: 'value', name: '转化率(%)', @@ -59,14 +71,13 @@ export function getChartOptions(activeTabName: any, res: any): any { } case 'customerSummary': { return { - grid: { - bottom: '5%', - containLabel: true, + grid: getGrid({ + bottom: '8%', left: '5%', right: '5%', - top: '5 %', - }, - legend: {}, + top: 80, + }), + legend: getLegend(), series: [ { name: '新增客户数', @@ -92,12 +103,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -134,13 +140,8 @@ export function getChartOptions(activeTabName: any, res: any): any { }; }); return { - grid: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '成交周期(天)', @@ -166,12 +167,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -208,13 +204,8 @@ export function getChartOptions(activeTabName: any, res: any): any { }; }); return { - grid: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '成交周期(天)', @@ -240,12 +231,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), 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: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '成交周期(天)', @@ -309,12 +290,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -342,15 +318,13 @@ export function getChartOptions(activeTabName: any, res: any): any { }, }; } + // 客户跟进次数分析 case 'followUpSummary': { return { - grid: { - left: 20, + grid: getGrid({ right: 30, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + }), + legend: getLegend(), series: [ { name: '跟进客户数', @@ -376,12 +350,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户跟进次数分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -412,20 +381,21 @@ export function getChartOptions(activeTabName: any, res: any): any { }, }; } + // 客户跟进方式分析 case 'followUpType': { return { title: { text: '客户跟进方式分析', left: 'center', }, - legend: { - orient: 'vertical', + legend: getLegend({ 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: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '进入公海客户数', @@ -490,12 +455,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '公海客户分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', diff --git a/apps/web-antd/src/views/crm/statistics/funnel/chartOptions.ts b/apps/web-antd/src/views/crm/statistics/funnel/chartOptions.ts index e86953f4c..e7ce47511 100644 --- a/apps/web-antd/src/views/crm/statistics/funnel/chartOptions.ts +++ b/apps/web-antd/src/views/crm/statistics/funnel/chartOptions.ts @@ -1,5 +1,26 @@ import { erpCalculatePercentage } from '@vben/utils'; +const getLegend = (extra: Record = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + left: 20, + right: 20, + bottom: 20, + containLabel: true, + ...extra, +}); + +const getTooltip = (extra: Record = {}) => ({ + 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: { - trigger: 'axis', - axisPointer: { - // 坐标轴指示器,坐标轴触发有效 - type: 'shadow', // 默认为直线,可选为:'line' | 'shadow' - }, - }, - legend: { + tooltip: getTooltip(), + legend: getLegend({ 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: {}, + }), + legend: getLegend(), series: [ { name: '新增商机数量', @@ -149,12 +161,7 @@ export function getChartOptions( saveAsImage: { show: true, name: '新增商机分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -211,10 +218,11 @@ export function getChartOptions( title: { text: '销售漏斗', }, - tooltip: { + tooltip: getTooltip({ trigger: 'item', + axisPointer: undefined, formatter: '{a}
{b}', - }, + }), toolbox: { feature: { dataView: { readOnly: false }, @@ -222,9 +230,9 @@ export function getChartOptions( saveAsImage: {}, }, }, - legend: { + legend: getLegend({ data: ['客户', '商机', '赢单'], - }, + }), series: [ { name: '销售漏斗', diff --git a/apps/web-antd/src/views/crm/statistics/performance/chartOptions.ts b/apps/web-antd/src/views/crm/statistics/performance/chartOptions.ts index 329b4d7ff..073c625e4 100644 --- a/apps/web-antd/src/views/crm/statistics/performance/chartOptions.ts +++ b/apps/web-antd/src/views/crm/statistics/performance/chartOptions.ts @@ -1,14 +1,30 @@ +const getLegend = (extra: Record = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + left: 20, + right: 20, + bottom: 20, + containLabel: true, + ...extra, +}); + +const getTooltip = (extra: Record = {}) => ({ + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + ...extra, +}); + export function getChartOptions(activeTabName: any, res: any): any { switch (activeTabName) { case 'ContractCountPerformance': { return { - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '当月合同数量(个)', @@ -65,12 +81,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -131,13 +142,8 @@ export function getChartOptions(activeTabName: any, res: any): any { } case 'ContractPricePerformance': { return { - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '当月合同金额(元)', @@ -260,13 +266,8 @@ export function getChartOptions(activeTabName: any, res: any): any { } case 'ReceivablePricePerformance': { return { - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '当月回款金额(元)', diff --git a/apps/web-antd/src/views/crm/statistics/portrait/chartOptions.ts b/apps/web-antd/src/views/crm/statistics/portrait/chartOptions.ts index b63ea2513..7088c22c4 100644 --- a/apps/web-antd/src/views/crm/statistics/portrait/chartOptions.ts +++ b/apps/web-antd/src/views/crm/statistics/portrait/chartOptions.ts @@ -13,6 +13,71 @@ function areaReplace(areaName: string) { .replace('省', ''); } +const getPieTooltip = (extra: Record = {}) => ({ + trigger: 'item', + ...extra, +}); + +const getPieLegend = (extra: Record = {}) => ({ + 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; + seriesName: string; + title: string; + tooltipExtra?: Record; +}) => ({ + 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: { - 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.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, - }; - }), - }, - ], - }, + left: getPiePanel({ + title: '全部客户', + seriesName: '全部客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId), + value: r.customerCount, + })), + }), + right: getPiePanel({ + title: '成交客户', + seriesName: '成交客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId), + value: r.dealCount, + })), + }), }; } case 'level': { return { - left: { - 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.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, - }; - }), - }, - ], - }, + left: getPiePanel({ + title: '全部客户', + seriesName: '全部客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level), + value: r.customerCount, + })), + }), + right: getPiePanel({ + title: '成交客户', + seriesName: '成交客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level), + value: r.dealCount, + })), + }), }; } case 'source': { return { - left: { - 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.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, - }; - }), - }, - ], - }, + left: getPiePanel({ + title: '全部客户', + seriesName: '全部客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source), + value: r.customerCount, + })), + }), + right: getPiePanel({ + title: '成交客户', + seriesName: '成交客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source), + value: r.dealCount, + })), + }), }; } default: { diff --git a/apps/web-antd/src/views/crm/statistics/rank/chartOptions.ts b/apps/web-antd/src/views/crm/statistics/rank/chartOptions.ts index a6c36e958..aceffbc65 100644 --- a/apps/web-antd/src/views/crm/statistics/rank/chartOptions.ts +++ b/apps/web-antd/src/views/crm/statistics/rank/chartOptions.ts @@ -1,5 +1,25 @@ import { cloneDeep } from '@vben/utils'; +const getLegend = (extra: Record = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + 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: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '新增联系人数排行', @@ -34,12 +47,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '新增联系人数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '新增联系人数(个)', @@ -56,15 +64,8 @@ export function getChartOptions(activeTabName: any, res: any): any { dimensions: ['nickname', 'count'], source: cloneDeep(res).toReversed(), }, - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '签约合同排行', @@ -82,12 +83,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '签约合同排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '签约合同数(个)', @@ -104,15 +100,8 @@ export function getChartOptions(activeTabName: any, res: any): any { dimensions: ['nickname', 'count'], source: cloneDeep(res).toReversed(), }, - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '合同金额排行', @@ -130,12 +119,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '合同金额排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '合同金额(元)', @@ -152,15 +136,8 @@ export function getChartOptions(activeTabName: any, res: any): any { dimensions: ['nickname', 'count'], source: cloneDeep(res).toReversed(), }, - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '新增客户数排行', @@ -178,12 +155,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '新增客户数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '新增客户数(个)', @@ -226,12 +198,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '跟进次数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '跟进次数(次)', @@ -274,12 +241,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '跟进客户数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '跟进客户数(个)', @@ -322,12 +284,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '产品销量排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '产品销量', @@ -370,12 +327,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '回款金额排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '回款金额(元)', diff --git a/apps/web-ele/src/views/crm/statistics/customer/chartOptions.ts b/apps/web-ele/src/views/crm/statistics/customer/chartOptions.ts index deecbd370..383833832 100644 --- a/apps/web-ele/src/views/crm/statistics/customer/chartOptions.ts +++ b/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 = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + left: 20, + right: 20, + bottom: 20, + containLabel: true, + ...extra, +}); + +const getTooltip = (extra: Record = {}) => ({ + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + ...extra, +}); + export function getChartOptions(activeTabName: any, res: any): any { switch (activeTabName) { + // 客户转化率分析 case 'conversionStat': { return { - grid: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '客户转化率', @@ -40,12 +57,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户转化率分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: { type: 'value', name: '转化率(%)', @@ -59,14 +71,13 @@ export function getChartOptions(activeTabName: any, res: any): any { } case 'customerSummary': { return { - grid: { - bottom: '5%', - containLabel: true, + grid: getGrid({ + bottom: '8%', left: '5%', right: '5%', - top: '5 %', - }, - legend: {}, + top: 80, + }), + legend: getLegend(), series: [ { name: '新增客户数', @@ -92,12 +103,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -134,13 +140,8 @@ export function getChartOptions(activeTabName: any, res: any): any { }; }); return { - grid: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '成交周期(天)', @@ -166,12 +167,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -208,13 +204,8 @@ export function getChartOptions(activeTabName: any, res: any): any { }; }); return { - grid: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '成交周期(天)', @@ -240,12 +231,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), 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: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '成交周期(天)', @@ -309,12 +290,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -342,15 +318,13 @@ export function getChartOptions(activeTabName: any, res: any): any { }, }; } + // 客户跟进次数分析 case 'followUpSummary': { return { - grid: { - left: 20, + grid: getGrid({ right: 30, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + }), + legend: getLegend(), series: [ { name: '跟进客户数', @@ -376,12 +350,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户跟进次数分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -412,20 +381,21 @@ export function getChartOptions(activeTabName: any, res: any): any { }, }; } + // 客户跟进方式分析 case 'followUpType': { return { title: { text: '客户跟进方式分析', left: 'center', }, - legend: { - orient: 'vertical', + legend: getLegend({ 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: { - left: 20, - right: 40, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '进入公海客户数', @@ -490,12 +455,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '公海客户分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', diff --git a/apps/web-ele/src/views/crm/statistics/funnel/chartOptions.ts b/apps/web-ele/src/views/crm/statistics/funnel/chartOptions.ts index e86953f4c..e7ce47511 100644 --- a/apps/web-ele/src/views/crm/statistics/funnel/chartOptions.ts +++ b/apps/web-ele/src/views/crm/statistics/funnel/chartOptions.ts @@ -1,5 +1,26 @@ import { erpCalculatePercentage } from '@vben/utils'; +const getLegend = (extra: Record = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + left: 20, + right: 20, + bottom: 20, + containLabel: true, + ...extra, +}); + +const getTooltip = (extra: Record = {}) => ({ + 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: { - trigger: 'axis', - axisPointer: { - // 坐标轴指示器,坐标轴触发有效 - type: 'shadow', // 默认为直线,可选为:'line' | 'shadow' - }, - }, - legend: { + tooltip: getTooltip(), + legend: getLegend({ 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: {}, + }), + legend: getLegend(), series: [ { name: '新增商机数量', @@ -149,12 +161,7 @@ export function getChartOptions( saveAsImage: { show: true, name: '新增商机分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -211,10 +218,11 @@ export function getChartOptions( title: { text: '销售漏斗', }, - tooltip: { + tooltip: getTooltip({ trigger: 'item', + axisPointer: undefined, formatter: '{a}
{b}', - }, + }), toolbox: { feature: { dataView: { readOnly: false }, @@ -222,9 +230,9 @@ export function getChartOptions( saveAsImage: {}, }, }, - legend: { + legend: getLegend({ data: ['客户', '商机', '赢单'], - }, + }), series: [ { name: '销售漏斗', diff --git a/apps/web-ele/src/views/crm/statistics/performance/chartOptions.ts b/apps/web-ele/src/views/crm/statistics/performance/chartOptions.ts index 329b4d7ff..073c625e4 100644 --- a/apps/web-ele/src/views/crm/statistics/performance/chartOptions.ts +++ b/apps/web-ele/src/views/crm/statistics/performance/chartOptions.ts @@ -1,14 +1,30 @@ +const getLegend = (extra: Record = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + left: 20, + right: 20, + bottom: 20, + containLabel: true, + ...extra, +}); + +const getTooltip = (extra: Record = {}) => ({ + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + ...extra, +}); + export function getChartOptions(activeTabName: any, res: any): any { switch (activeTabName) { case 'ContractCountPerformance': { return { - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '当月合同数量(个)', @@ -65,12 +81,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), yAxis: [ { type: 'value', @@ -131,13 +142,8 @@ export function getChartOptions(activeTabName: any, res: any): any { } case 'ContractPricePerformance': { return { - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '当月合同金额(元)', @@ -260,13 +266,8 @@ export function getChartOptions(activeTabName: any, res: any): any { } case 'ReceivablePricePerformance': { return { - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: {}, + grid: getGrid(), + legend: getLegend(), series: [ { name: '当月回款金额(元)', diff --git a/apps/web-ele/src/views/crm/statistics/portrait/chartOptions.ts b/apps/web-ele/src/views/crm/statistics/portrait/chartOptions.ts index b63ea2513..7088c22c4 100644 --- a/apps/web-ele/src/views/crm/statistics/portrait/chartOptions.ts +++ b/apps/web-ele/src/views/crm/statistics/portrait/chartOptions.ts @@ -13,6 +13,71 @@ function areaReplace(areaName: string) { .replace('省', ''); } +const getPieTooltip = (extra: Record = {}) => ({ + trigger: 'item', + ...extra, +}); + +const getPieLegend = (extra: Record = {}) => ({ + 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; + seriesName: string; + title: string; + tooltipExtra?: Record; +}) => ({ + 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: { - 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.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, - }; - }), - }, - ], - }, + left: getPiePanel({ + title: '全部客户', + seriesName: '全部客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId), + value: r.customerCount, + })), + }), + right: getPiePanel({ + title: '成交客户', + seriesName: '成交客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId), + value: r.dealCount, + })), + }), }; } case 'level': { return { - left: { - 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.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, - }; - }), - }, - ], - }, + left: getPiePanel({ + title: '全部客户', + seriesName: '全部客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level), + value: r.customerCount, + })), + }), + right: getPiePanel({ + title: '成交客户', + seriesName: '成交客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level), + value: r.dealCount, + })), + }), }; } case 'source': { return { - left: { - 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.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, - }; - }), - }, - ], - }, + left: getPiePanel({ + title: '全部客户', + seriesName: '全部客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source), + value: r.customerCount, + })), + }), + right: getPiePanel({ + title: '成交客户', + seriesName: '成交客户', + data: res.map((r: any) => ({ + name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source), + value: r.dealCount, + })), + }), }; } default: { diff --git a/apps/web-ele/src/views/crm/statistics/rank/chartOptions.ts b/apps/web-ele/src/views/crm/statistics/rank/chartOptions.ts index a6c36e958..aceffbc65 100644 --- a/apps/web-ele/src/views/crm/statistics/rank/chartOptions.ts +++ b/apps/web-ele/src/views/crm/statistics/rank/chartOptions.ts @@ -1,5 +1,25 @@ import { cloneDeep } from '@vben/utils'; +const getLegend = (extra: Record = {}) => ({ + top: 10, + ...extra, +}); + +const getGrid = (extra: Record = {}) => ({ + 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: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '新增联系人数排行', @@ -34,12 +47,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '新增联系人数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '新增联系人数(个)', @@ -56,15 +64,8 @@ export function getChartOptions(activeTabName: any, res: any): any { dimensions: ['nickname', 'count'], source: cloneDeep(res).toReversed(), }, - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '签约合同排行', @@ -82,12 +83,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '签约合同排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '签约合同数(个)', @@ -104,15 +100,8 @@ export function getChartOptions(activeTabName: any, res: any): any { dimensions: ['nickname', 'count'], source: cloneDeep(res).toReversed(), }, - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '合同金额排行', @@ -130,12 +119,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '合同金额排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '合同金额(元)', @@ -152,15 +136,8 @@ export function getChartOptions(activeTabName: any, res: any): any { dimensions: ['nickname', 'count'], source: cloneDeep(res).toReversed(), }, - grid: { - left: 20, - right: 20, - bottom: 20, - containLabel: true, - }, - legend: { - top: 50, - }, + grid: getGrid(), + legend: getLegend(), series: [ { name: '新增客户数排行', @@ -178,12 +155,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '新增客户数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '新增客户数(个)', @@ -226,12 +198,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '跟进次数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '跟进次数(次)', @@ -274,12 +241,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '跟进客户数排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '跟进客户数(个)', @@ -322,12 +284,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '产品销量排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '产品销量', @@ -370,12 +327,7 @@ export function getChartOptions(activeTabName: any, res: any): any { saveAsImage: { show: true, name: '回款金额排行' }, // 保存为图片 }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, + tooltip: getTooltip(), xAxis: { type: 'value', name: '回款金额(元)',