mt-fe-group/yudao-init
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update right chart

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-04-11 09:32:35 +08:00
parent 28ec95ba81
commit d94b5fa9c3
3 changed files with 88 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/dashboard/charts/Bipv.vue
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 }, () =>

9
src/views/dashboard/charts/LeftChartBase.vue
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;

82
src/views/dashboard/charts/RightChartBase.vue
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;
}