合并静态首页代码至master #1

Merged
zwq merged 16 commits from home-add-map into master 2024-04-11 16:43:00 +08:00
3 changed files with 88 additions and 12 deletions
Showing only changes of commit d94b5fa9c3 - Show all commits

View File

@ -10,7 +10,7 @@
:legend="legend"
:series="series"
:xAxis="xAxis"
:vHeight="20"
:vHeight="20.5"
class="bipv-chart"
/>
</template>
@ -25,6 +25,7 @@ export default {
legend: {
type: Array,
default: () => [
{ label: "2024年目标值", color: "#f3c000" },
{ label: "2023年", color: "#12f7f1" },
{ label: "2024年", color: "#58adfa" },
],
@ -36,6 +37,12 @@ export default {
series: {
type: Array,
default: () => [
{
name: "2024年目标值",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "2023年",
data: Array.from({ length: 7 }, () =>

View File

@ -178,9 +178,10 @@ export default {
};
},
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;
@ -218,8 +219,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;

View File

@ -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;
}