ZF/yudao-ui-admin-vben
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git synced 2025-12-30 02:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-12-27 17:02:11 +08:00
parent 5a5d2f17da
commit 9ef218f930
10 changed files with 535 additions and 1091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,34 @@
import { DICT_TYPE } from '@vben/constants';
import { getDictLabel } from '@vben/hooks';
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'conversionStat': {
return {
grid: {
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 40, // 让 X 轴右侧显示完整
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
legend: {},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
// 客户转化率分析
case 'conversionStat': {
return {
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',

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

@@ -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: {
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} <br/>{b}',
},
}),
toolbox: {
feature: {
dataView: { readOnly: false },
@@ -222,9 +230,9 @@ export function getChartOptions(
saveAsImage: {},
},
},
legend: {
legend: getLegend({
data: ['客户', '商机', '赢单'],
},
}),
series: [
{
name: '销售漏斗',

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

@@ -1,14 +1,30 @@
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'ContractCountPerformance': {
return {
grid: {
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',
},
legend: {},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'ContractCountPerformance': {
return {
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: '当月回款金额（元）',

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

@@ -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: {
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,
),
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
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,
),
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 {
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
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 {
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 {
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
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 {
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.dealCount,
};
})),
}),
},
],
},
};
}
default: {

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

@@ -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: {
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: '回款金额（元）',

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

@@ -1,17 +1,34 @@
import { DICT_TYPE } from '@vben/constants';
import { getDictLabel } from '@vben/hooks';
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'conversionStat': {
return {
grid: {
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 40, // 让 X 轴右侧显示完整
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
legend: {},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
// 客户转化率分析
case 'conversionStat': {
return {
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',

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

@@ -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: {
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} <br/>{b}',
},
}),
toolbox: {
feature: {
dataView: { readOnly: false },
@@ -222,9 +230,9 @@ export function getChartOptions(
saveAsImage: {},
},
},
legend: {
legend: getLegend({
data: ['客户', '商机', '赢单'],
},
}),
series: [
{
name: '销售漏斗',

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

@@ -1,14 +1,30 @@
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'ContractCountPerformance': {
return {
grid: {
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',
},
legend: {},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'ContractCountPerformance': {
return {
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: '当月回款金额（元）',

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

@@ -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: {
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,
),
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
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,
),
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 {
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
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 {
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 {
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
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 {
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.dealCount,
};
})),
}),
},
],
},
};
}
default: {

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

@@ -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: {
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: '回款金额（元）',