|
|
@@ -61,7 +61,7 @@ export default { |
|
|
|
left: "3%", |
|
|
|
right: "4%", |
|
|
|
bottom: "0", |
|
|
|
top: "15%", |
|
|
|
top: "18%", |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
tooltip: {}, |
|
|
@@ -106,6 +106,41 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "2024年目标值", |
|
|
|
type: "line", |
|
|
|
lineStyle: { |
|
|
|
color: "#f3c000", |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
color: "#f3c000", |
|
|
|
}, |
|
|
|
areaStyle: { |
|
|
|
color: { |
|
|
|
type: "linear", |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: "#f3c000", // 0% 处的颜色 |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 0.55, |
|
|
|
color: "#f3c00033", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "transparent", // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: this.series[0].data, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "2023年", |
|
|
|
type: "bar", |
|
|
@@ -139,7 +174,7 @@ export default { |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: this.series[0].data, |
|
|
|
data: this.series[1].data, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "2024年", |
|
|
@@ -171,16 +206,17 @@ export default { |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: this.series[1].data, |
|
|
|
data: this.series[2].data, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ |
|
|
|
isFullscreen(val) { |
|
|
|
this.options.series.map((item) => { |
|
|
|
item.barWidth = val ? 24 : 12; |
|
|
|
item.barWidth = val ? 18 : 12; |
|
|
|
}); |
|
|
|
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; |
|
|
|
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; |
|
|
@@ -201,7 +237,7 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.left-chart-base { |
|
|
|
.right-chart-base { |
|
|
|
// position: relative; |
|
|
|
|
|
|
|
.legend { |
|
|
@@ -218,8 +254,10 @@ export default { |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
display: inline-block; |
|
|
|
width: 10px; |
|
|
|
height: 10px; |
|
|
|
// width: 10px; |
|
|
|
// height: 10px; |
|
|
|
width: 0.531vw; |
|
|
|
height: 0.531vw; |
|
|
|
background-color: #ccc; |
|
|
|
border-radius: 2px; |
|
|
|
margin-right: 0.22vw; |
|
|
@@ -227,10 +265,38 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.legend-item:nth-child(1):before { |
|
|
|
background-color: #12f7f1; |
|
|
|
// width: 12px; |
|
|
|
// height: 2px; |
|
|
|
width: 0.638vw; |
|
|
|
height: 0.1064vw; |
|
|
|
background-color: #f3c000; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
// left: -16px; |
|
|
|
left: -0.851vw; |
|
|
|
transform: translateY(-50%); |
|
|
|
} |
|
|
|
.legend-item:nth-child(1):after { |
|
|
|
background-color: #f3c000; |
|
|
|
content: ""; |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
// width: 6px; |
|
|
|
// height: 6px; |
|
|
|
width: 0.3191vw; |
|
|
|
height: 0.3191vw; |
|
|
|
border-radius: 100%; |
|
|
|
top: 50%; |
|
|
|
left: -0.851vw; |
|
|
|
// left: -16px; |
|
|
|
transform: translateY(-50%) translateX(50%); |
|
|
|
} |
|
|
|
|
|
|
|
.legend-item:nth-child(2):before { |
|
|
|
background-color: #12f7f1; |
|
|
|
} |
|
|
|
|
|
|
|
.legend-item:nth-child(3):before { |
|
|
|
background-color: #58adfa; |
|
|
|
} |
|
|
|
|
|
|
|