产品-薪酬统计报表echarts图标组件封装
This commit is contained in:
parent
cc4cccf111
commit
c8fe01dfda
|
|
@ -0,0 +1,451 @@
|
|||
import { WeaLocaleProvider } from "ecCom";
|
||||
import { format_with_regex } from "../../../util";
|
||||
|
||||
const { getLabel } = WeaLocaleProvider;
|
||||
export const condition = [
|
||||
{
|
||||
items: [
|
||||
{
|
||||
colSpan: 2,
|
||||
checkbox: false,
|
||||
checkboxValue: false,
|
||||
conditionType: "SELECT",
|
||||
domkey: ["taxAgent"],
|
||||
fieldcol: 18,
|
||||
label: getLabel(111, "个税扣缴义务人"),
|
||||
labelcol: 6,
|
||||
options: [],
|
||||
multiple: true,
|
||||
viewAttr: 2
|
||||
},
|
||||
{
|
||||
browserConditionParam: {
|
||||
completeParams: {},
|
||||
conditionDataParams: {},
|
||||
dataParams: {},
|
||||
destDataParams: {},
|
||||
hasAddBtn: false,
|
||||
hasAdvanceSerach: true,
|
||||
idSeparator: ",",
|
||||
isAutoComplete: 1,
|
||||
isDetail: 0,
|
||||
isMultCheckbox: false,
|
||||
isSingle: false,
|
||||
linkUrl: "",
|
||||
pageSize: 10,
|
||||
quickSearchName: "",
|
||||
replaceDatas: [],
|
||||
title: getLabel(111, "分部"),
|
||||
type: "164",
|
||||
viewAttr: 2
|
||||
},
|
||||
colSpan: 2,
|
||||
conditionType: "BROWSER",
|
||||
domkey: ["subCompany"],
|
||||
fieldcol: 18,
|
||||
isQuickSearch: false,
|
||||
label: getLabel(111, "分部"),
|
||||
labelcol: 6,
|
||||
viewAttr: 2
|
||||
},
|
||||
{
|
||||
browserConditionParam: {
|
||||
completeParams: {},
|
||||
conditionDataParams: {},
|
||||
dataParams: {},
|
||||
destDataParams: {},
|
||||
hasAddBtn: false,
|
||||
hasAdvanceSerach: true,
|
||||
idSeparator: ",",
|
||||
isAutoComplete: 1,
|
||||
isDetail: 0,
|
||||
isMultCheckbox: false,
|
||||
isSingle: false,
|
||||
linkUrl: "",
|
||||
pageSize: 10,
|
||||
quickSearchName: "",
|
||||
replaceDatas: [],
|
||||
title: getLabel(111, "部门"),
|
||||
type: "57",
|
||||
viewAttr: 2
|
||||
},
|
||||
colSpan: 2,
|
||||
conditionType: "BROWSER",
|
||||
domkey: ["department"],
|
||||
fieldcol: 18,
|
||||
isQuickSearch: false,
|
||||
label: getLabel(111, "部门"),
|
||||
labelcol: 6,
|
||||
viewAttr: 2
|
||||
},
|
||||
// {
|
||||
// browserConditionParam: {
|
||||
// completeParams: {},
|
||||
// conditionDataParams: {},
|
||||
// dataParams: {},
|
||||
// destDataParams: {},
|
||||
// hasAddBtn: false,
|
||||
// hasAdvanceSerach: true,
|
||||
// idSeparator: ",",
|
||||
// isAutoComplete: 1,
|
||||
// isDetail: 0,
|
||||
// isMultCheckbox: false,
|
||||
// isSingle: false,
|
||||
// linkUrl: "",
|
||||
// pageSize: 10,
|
||||
// quickSearchName: "",
|
||||
// replaceDatas: [],
|
||||
// title: getLabel(111, "岗位"),
|
||||
// type: "278",
|
||||
// viewAttr: 2
|
||||
// },
|
||||
// colSpan: 2,
|
||||
// conditionType: "BROWSER",
|
||||
// domkey: ["position"],
|
||||
// fieldcol: 18,
|
||||
// isQuickSearch: false,
|
||||
// label: getLabel(111, "岗位"),
|
||||
// labelcol: 6,
|
||||
// viewAttr: 2
|
||||
// },
|
||||
{
|
||||
browserConditionParam: {
|
||||
completeParams: {},
|
||||
conditionDataParams: {},
|
||||
dataParams: {},
|
||||
destDataParams: {},
|
||||
hasAddBtn: false,
|
||||
hasAdvanceSerach: true,
|
||||
idSeparator: ",",
|
||||
isAutoComplete: 1,
|
||||
isDetail: 0,
|
||||
isMultCheckbox: false,
|
||||
isSingle: false,
|
||||
linkUrl: "",
|
||||
pageSize: 10,
|
||||
quickSearchName: "",
|
||||
replaceDatas: [],
|
||||
title: getLabel(111, "人员"),
|
||||
type: "17",
|
||||
viewAttr: 2
|
||||
},
|
||||
colSpan: 2,
|
||||
conditionType: "BROWSER",
|
||||
domkey: ["employee"],
|
||||
fieldcol: 18,
|
||||
isQuickSearch: false,
|
||||
label: getLabel(111, "人员"),
|
||||
labelcol: 6,
|
||||
viewAttr: 2
|
||||
},
|
||||
{
|
||||
colSpan: 2,
|
||||
conditionType: "RANGEPICKER",
|
||||
domkey: ["hiredate1", "hiredate2"],
|
||||
fieldcol: 18,
|
||||
label: getLabel(111, "入职日期"),
|
||||
labelcol: 6,
|
||||
viewAttr: 2
|
||||
}
|
||||
],
|
||||
title: "",
|
||||
defaultshow: true
|
||||
}
|
||||
];
|
||||
|
||||
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",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
backgroundColor: "#FFF",
|
||||
borderColor: "#FFF",
|
||||
borderWidth: "1",
|
||||
borderRadius: "5",
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
},
|
||||
formatter: function (params) {
|
||||
let str = params[0].axisValue + "<br>";
|
||||
for (let item of params) {
|
||||
str += `<div>${item.marker}${item.seriesName}<span style='display:inline-block;width: 10px'></span><span style='font-weight: bold'>${format_with_regex(item.value)}</span></div>`;
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
icon: "rect",
|
||||
top: "0%",
|
||||
right: "center",
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#B8B8B8"//字体颜色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "0%",
|
||||
left: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true
|
||||
},
|
||||
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}",
|
||||
color: "#666",
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#787E95",
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "transparent"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 192, 255, 0.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
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: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 默认为直线，可选为：'line' | 'shadow'
|
||||
type: "line"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
icon: "circle",
|
||||
top: "0%",
|
||||
right: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "3%",
|
||||
right: "2%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: params.xAxis,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#B8B8B8",
|
||||
fontSize: 12,
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#787E95",
|
||||
fontSize: 14
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#787E95",
|
||||
fontSize: 16
|
||||
},
|
||||
// 修改坐标轴线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "transparent"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(93,126,158,1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: _.map(params.data, (item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: _.map(item.data, (it) => it.replace(/,/g, "")),
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
|
||||
},
|
||||
lineStyle: {
|
||||
color: colorList[index] || colorList[Math.floor((Math.random() * colorList.length))]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
export const mapPieOptions = (params) => ({
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
let str = params.seriesName + "<br>";
|
||||
str += params.marker + params.name + ":" + format_with_regex(params.value) + "(" + params.percent + "%" + ")" + "<br>";
|
||||
return str;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
icon: "rect",
|
||||
top: "0%",
|
||||
left: "2%",
|
||||
orient: "vertical",
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
series: _.map(params.data, item => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: _.map(item.data, (it) => ({ ...it, value: it.value.replace(/,/g, "") })),
|
||||
type: "pie",
|
||||
radius: "60%",
|
||||
avoidLabelOverlap: true,
|
||||
animation: false,
|
||||
labelLine: {
|
||||
show: true,
|
||||
normal: {
|
||||
length: 5,
|
||||
align: "center"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
return colorList[colors.dataIndex] || colorList[Math.floor((Math.random() * colorList.length))];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
|
||||
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;
|
||||
};
|
||||
|
|
@ -153,11 +153,7 @@ export const condition = [
|
|||
}
|
||||
];
|
||||
|
||||
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"
|
||||
];
|
||||
const colorList = ["#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"];
|
||||
export const mapBarOptions = (params) => ({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -194,20 +190,16 @@ export const mapBarOptions = (params) => ({
|
|||
top: "10%",
|
||||
right: "0%",
|
||||
left: "5%",
|
||||
bottom: "0%",
|
||||
bottom: "10%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: params.xAxis.map((item, index) => {
|
||||
const data = Array(params.xAxis.length).fill("");
|
||||
data[index] = item;
|
||||
return {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
position: "bottom",
|
||||
data: data,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
data: params.xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
margin: 10,
|
||||
|
|
@ -215,8 +207,7 @@ export const mapBarOptions = (params) => ({
|
|||
fontSize: 11
|
||||
}
|
||||
}
|
||||
};
|
||||
}),
|
||||
},
|
||||
yAxis: {
|
||||
name: params.name,
|
||||
type: "value",
|
||||
|
|
@ -248,9 +239,62 @@ export const mapBarOptions = (params) => ({
|
|||
}
|
||||
}
|
||||
},
|
||||
series: params.data.map(item => {
|
||||
return [...dealBar(_.map(item.data, (it) => parseFloat(it.replace(/,/g, ""))), item.name)];
|
||||
}).reduce((acc, cur) => acc.concat(cur), [])
|
||||
series: _.map(params.data, (item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
barWidth: "32",
|
||||
barGap: "0%",
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}),
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside"
|
||||
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
show: true,
|
||||
bottom: 20,
|
||||
}
|
||||
]
|
||||
});
|
||||
export const mapLineOptions = (params) => ({
|
||||
tooltip: {
|
||||
|
|
@ -262,7 +306,6 @@ export const mapLineOptions = (params) => ({
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
icon: "circle",
|
||||
top: "0%",
|
||||
right: "center",
|
||||
|
|
@ -331,7 +374,7 @@ export const mapLineOptions = (params) => ({
|
|||
series: _.map(params.data, (item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: _.map(item.data, (it) => it.replace(/,/g, "")),
|
||||
data: _.map(item.data, (it) => parseFloat(it.replace(/,/g, ""))),
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -392,60 +435,3 @@ 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;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue