qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

产品-薪酬统计报表图表组件优化

This commit is contained in:
黎永顺 2023-07-04 15:42:39 +08:00
parent a623679975
commit 61ebfdf9f1
1 changed files with 89 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
pc4mobx/hrmSalary/pages/reportView/components/condition.js
View File

@ -153,7 +153,11 @@ export const condition = [
}
];
const colorList = ["#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"];
const colorList = [
"#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81",
"#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81",
"#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"
];
export const mapBarOptions = (params) => ({
tooltip: {
trigger: "axis",
@ -176,6 +180,7 @@ export const mapBarOptions = (params) => ({
}
},
legend: {
type: "scroll",
icon: "rect",
top: "0%",
right: "center",
@ -188,27 +193,33 @@ export const mapBarOptions = (params) => ({
grid: {
top: "10%",
right: "0%",
left: "2%",
left: "5%",
bottom: "0%",
containLabel: true
},
xAxis: {
type: "category",
axisTick: {
alignWithLabel: true,
show: false
},
data: params.xAxis,
axisLabel: {
interval: 0,
margin: 10,
textStyle: {
fontSize: 11
xAxis: params.xAxis.map((item, index) => {
const data = Array(params.xAxis.length).fill("");
data[index] = item;
return {
type: "category",
position: "bottom",
data: data,
axisTick: {
alignWithLabel: true,
show: false
},
axisLabel: {
interval: 0,
margin: 10,
textStyle: {
fontSize: 11
}
}
}
},
};
}),
yAxis: {
name: params.name,
type: "value",
axisLabel: {
padding: [3, 0, 0, 0],
formatter: "{value}",
@ -237,50 +248,9 @@ export const mapBarOptions = (params) => ({
}
}
},
series: _.map(params.data, (item, index) => {
return {
name: item.name,
barWidth: "32",
data: _.map(item.data, (it) => it.replace(/,/g, "")),
type: "bar",
itemStyle: {
normal: {
color: function (params) {
return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
}
}
},
label: {
show: true,
position: "insideBottom",
distance: 15,
align: "left",
verticalAlign: "middle",
rotate: "90",
formatter: function (params) {
if (parseInt(params.value) === 0) {
return ``;
} else {
return [
`{a|${format_with_regex(params.value)}} {b|${params.seriesName}}`
];
}
},
rich: {
a: {
fontWeight: "bold",
fontSize: 14,
color: "#333",
marginRight: 10
},
b: {
fontSize: 12,
color: "#333"
}
}
}
};
})
series: params.data.map(item => {
return [...dealBar(_.map(item.data, (it) => parseFloat(it.replace(/,/g, ""))), item.name)];
}).reduce((acc, cur) => acc.concat(cur), [])
});
export const mapLineOptions = (params) => ({
tooltip: {
@ -292,6 +262,7 @@ export const mapLineOptions = (params) => ({
}
},
legend: {
type: "scroll",
icon: "circle",
top: "0%",
right: "center",
@ -385,6 +356,7 @@ export const mapPieOptions = (params) => ({
}
},
legend: {
type: "scroll",
icon: "rect",
top: "0%",
left: "2%",
@ -420,3 +392,60 @@ export const mapPieOptions = (params) => ({
};
})
});
const dealBar = (arr, name) => {
const bar = [];
arr.forEach((item, index) => {
const data = [];
for (let i = 0; i < index; i++) {
data.push("");
}
if (item) {
data.push(item);
bar.push({
name,
type: "bar",
xAxisIndex: index,
barWidth: 32,
data,
itemStyle: {
normal: {
color: function (params) {
return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
}
}
},
label: {
show: true,
position: "insideBottom",
distance: 15,
align: "left",
verticalAlign: "middle",
rotate: "90",
formatter: function (params) {
if (parseInt(params.value) === 0) {
return ``;
} else {
return [
`{a|${format_with_regex(params.value)}} {b|${params.seriesName}}`
];
}
},
rich: {
a: {
fontWeight: "bold",
fontSize: 14,
color: "#333",
marginRight: 10
},
b: {
fontSize: 12,
color: "#333"
}
}
}
});
}
});
return bar;
};