合并静态首页代码至master #1
@ -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 }, () =>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user