|
|
@@ -421,12 +421,15 @@ export default {
|
|
|
backgroundColor: "rgba(4, 18, 36, .94)",
|
|
|
borderColor: "rgba(0, 210, 255, .35)",
|
|
|
borderWidth: 1,
|
|
|
- padding: [10, 12],
|
|
|
- textStyle: { color: "#e8f7ff", fontSize: 12, lineHeight: 20 },
|
|
|
+ padding: [10, 14],
|
|
|
+ textStyle: { color: "#e8f7ff", fontSize: 13, lineHeight: 22 },
|
|
|
extraCssText:
|
|
|
"box-shadow: 0 0 18px rgba(0,180,255,.18); border-radius: 4px;",
|
|
|
};
|
|
|
},
|
|
|
+ axisLabel(extra = {}) {
|
|
|
+ return { color: TEXT, fontSize: 12, ...extra };
|
|
|
+ },
|
|
|
renderTrendChart() {
|
|
|
const chart = this.charts.trend;
|
|
|
if (!chart) return;
|
|
|
@@ -446,26 +449,30 @@ export default {
|
|
|
items[0].value
|
|
|
}${isEfficiency ? "%" : " 人"}</b>`,
|
|
|
},
|
|
|
- grid: { left: 44, right: 18, top: 30, bottom: 38 },
|
|
|
+ grid: {
|
|
|
+ left: 12,
|
|
|
+ right: 16,
|
|
|
+ top: 28,
|
|
|
+ bottom: 8,
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
data: this.dashboard.trend.months,
|
|
|
axisLine: { lineStyle: { color: AXIS } },
|
|
|
axisTick: { show: false },
|
|
|
- axisLabel: {
|
|
|
- color: TEXT,
|
|
|
- fontSize: 10,
|
|
|
- rotate: 25,
|
|
|
+ axisLabel: this.axisLabel({
|
|
|
margin: 12,
|
|
|
- },
|
|
|
+ formatter: (value) => String(value).slice(2).replace("-", "/"),
|
|
|
+ }),
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
min: isEfficiency ? 70 : null,
|
|
|
axisLine: { show: false },
|
|
|
axisTick: { show: false },
|
|
|
- axisLabel: { color: TEXT, fontSize: 10 },
|
|
|
+ axisLabel: this.axisLabel(),
|
|
|
splitLine: { lineStyle: { color: GRID, type: "dashed" } },
|
|
|
},
|
|
|
series: [
|
|
|
@@ -518,23 +525,27 @@ export default {
|
|
|
},
|
|
|
legend: {
|
|
|
orient: "vertical",
|
|
|
- right: 4,
|
|
|
- top: "center",
|
|
|
+ right: 8,
|
|
|
+ top: "middle",
|
|
|
icon: "circle",
|
|
|
- itemWidth: 8,
|
|
|
- itemHeight: 8,
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 10,
|
|
|
itemGap: 14,
|
|
|
- textStyle: { color: TEXT, fontSize: 11 },
|
|
|
+ textStyle: { color: TEXT, fontSize: 13, lineHeight: 20 },
|
|
|
+ formatter: (name) => {
|
|
|
+ const hit = data.find((item) => item.name === name);
|
|
|
+ return hit ? `${name} ${hit.value}人` : name;
|
|
|
+ },
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: "pie",
|
|
|
- radius: ["50%", "69%"],
|
|
|
- center: ["39%", "54%"],
|
|
|
+ radius: ["42%", "66%"],
|
|
|
+ center: ["34%", "52%"],
|
|
|
avoidLabelOverlap: true,
|
|
|
- minAngle: 5,
|
|
|
- label: { color: LABEL, fontSize: 10, formatter: "{b}\n{c}" },
|
|
|
- labelLine: { length: 8, length2: 5, lineStyle: { color: "rgba(0,200,255,.35)" } },
|
|
|
+ minAngle: 8,
|
|
|
+ label: { show: false },
|
|
|
+ labelLine: { show: false },
|
|
|
itemStyle: {
|
|
|
borderColor: "#041222",
|
|
|
borderWidth: 3,
|
|
|
@@ -572,38 +583,47 @@ export default {
|
|
|
formatter: (items) =>
|
|
|
`${items[0].axisValue}<br/>实际人数：<b>${items[0].value} 人</b>`,
|
|
|
},
|
|
|
- grid: { left: 43, right: 14, top: 18, bottom: 62 },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data: this.dashboard.departments.map((item) => item.name),
|
|
|
- axisTick: { show: false },
|
|
|
- axisLine: { lineStyle: { color: AXIS } },
|
|
|
- axisLabel: {
|
|
|
- color: TEXT,
|
|
|
- fontSize: 9,
|
|
|
- interval: 0,
|
|
|
- rotate: 30,
|
|
|
- },
|
|
|
+ grid: {
|
|
|
+ left: 8,
|
|
|
+ right: 40,
|
|
|
+ top: 8,
|
|
|
+ bottom: 8,
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- yAxis: {
|
|
|
+ xAxis: {
|
|
|
type: "value",
|
|
|
axisLine: { show: false },
|
|
|
axisTick: { show: false },
|
|
|
- axisLabel: { color: TEXT, fontSize: 10 },
|
|
|
+ axisLabel: this.axisLabel(),
|
|
|
splitLine: { lineStyle: { color: GRID } },
|
|
|
},
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ data: this.dashboard.departments.map((item) => item.name),
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { lineStyle: { color: AXIS } },
|
|
|
+ axisLabel: this.axisLabel({ interval: 0, margin: 10 }),
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
type: "bar",
|
|
|
data,
|
|
|
- barMaxWidth: 24,
|
|
|
+ barMaxWidth: 16,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "right",
|
|
|
+ color: LABEL,
|
|
|
+ fontSize: 12,
|
|
|
+ distance: 6,
|
|
|
+ },
|
|
|
itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: "#7af6ff" },
|
|
|
- { offset: 0.45, color: "#1ec8ff" },
|
|
|
- { offset: 1, color: "#0a5f9e" },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ { offset: 0, color: "#0a5f9e" },
|
|
|
+ { offset: 0.55, color: "#1ec8ff" },
|
|
|
+ { offset: 1, color: "#7af6ff" },
|
|
|
]),
|
|
|
- borderRadius: [3, 3, 0, 0],
|
|
|
+ borderRadius: [0, 3, 3, 0],
|
|
|
shadowBlur: 12,
|
|
|
shadowColor: "rgba(30,200,255,.4)",
|
|
|
},
|
|
|
@@ -649,19 +669,25 @@ export default {
|
|
|
formatter: (items) =>
|
|
|
`${items[0].axisValue}<br/>人数：<b>${items[0].value} 人</b>`,
|
|
|
},
|
|
|
- grid: { left: 42, right: 80, top: 18, bottom: 42 },
|
|
|
+ grid: {
|
|
|
+ left: 8,
|
|
|
+ right: 12,
|
|
|
+ top: 36,
|
|
|
+ bottom: 8,
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: this.dashboard.talent.map((item) => item.name),
|
|
|
axisTick: { show: false },
|
|
|
axisLine: { lineStyle: { color: AXIS } },
|
|
|
- axisLabel: { color: TEXT, fontSize: 10 },
|
|
|
+ axisLabel: this.axisLabel(),
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
axisLine: { show: false },
|
|
|
axisTick: { show: false },
|
|
|
- axisLabel: { color: TEXT, fontSize: 10 },
|
|
|
+ axisLabel: this.axisLabel(),
|
|
|
splitLine: { lineStyle: { color: GRID } },
|
|
|
},
|
|
|
series: [
|
|
|
@@ -674,7 +700,8 @@ export default {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
color: LABEL,
|
|
|
- fontSize: 10,
|
|
|
+ fontSize: 12,
|
|
|
+ distance: 6,
|
|
|
textShadowColor: "rgba(0,180,255,.7)",
|
|
|
textShadowBlur: 6,
|
|
|
},
|
|
|
@@ -708,24 +735,28 @@ export default {
|
|
|
},
|
|
|
legend: {
|
|
|
orient: "vertical",
|
|
|
- right: 2,
|
|
|
- top: "center",
|
|
|
+ right: 8,
|
|
|
+ top: "middle",
|
|
|
icon: "circle",
|
|
|
- itemWidth: 8,
|
|
|
- itemHeight: 8,
|
|
|
- itemGap: 10,
|
|
|
- textStyle: { color: TEXT, fontSize: 10 },
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 10,
|
|
|
+ itemGap: 12,
|
|
|
+ textStyle: { color: TEXT, fontSize: 13, lineHeight: 20 },
|
|
|
+ formatter: (name) => {
|
|
|
+ const hit = data.find((item) => item.name === name);
|
|
|
+ return hit ? `${name} ${hit.value}人` : name;
|
|
|
+ },
|
|
|
},
|
|
|
graphic: [
|
|
|
{
|
|
|
type: "text",
|
|
|
- left: "36%",
|
|
|
+ left: "34%",
|
|
|
top: "48%",
|
|
|
style: {
|
|
|
text: `${data.reduce((sum, item) => sum + item.value, 0)} 人`,
|
|
|
textAlign: "center",
|
|
|
fill: "#b7e9ff",
|
|
|
- font: "600 15px sans-serif",
|
|
|
+ font: "600 16px sans-serif",
|
|
|
textShadowColor: "rgba(0,200,255,.6)",
|
|
|
textShadowBlur: 8,
|
|
|
},
|
|
|
@@ -734,9 +765,12 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
type: "pie",
|
|
|
- radius: ["53%", "70%"],
|
|
|
- center: ["39%", "55%"],
|
|
|
- minAngle: 4,
|
|
|
+ radius: ["42%", "66%"],
|
|
|
+ center: ["34%", "50%"],
|
|
|
+ minAngle: 8,
|
|
|
+ avoidLabelOverlap: true,
|
|
|
+ label: { show: false },
|
|
|
+ labelLine: { show: false },
|
|
|
itemStyle: {
|
|
|
borderColor: "#041222",
|
|
|
borderWidth: 3,
|
|
|
@@ -750,8 +784,6 @@ export default {
|
|
|
shadowColor: "rgba(0,220,255,.45)",
|
|
|
},
|
|
|
},
|
|
|
- label: { color: LABEL, fontSize: 10, formatter: "{b}\n{c}" },
|
|
|
- labelLine: { length: 8, length2: 5, lineStyle: { color: "rgba(0,200,255,.35)" } },
|
|
|
data,
|
|
|
},
|
|
|
],
|
ZGC4846