This commit is contained in:
duanxiaohai 2024-06-17 17:04:26 +08:00
parent 1853dc9e12
commit 5bf970faf6
4 changed files with 45 additions and 20 deletions

View File

@ -60,7 +60,7 @@
<div class="minTopNum"> <div class="minTopNum">
<div <div
class="numItem" class="numItem"
v-for="(item, inex) in minData.minTop" v-for="(item, index) in minData.minTop"
:key="index" :key="index"
> >
{{ item }} {{ item }}
@ -573,8 +573,10 @@ onBeforeUnmount(() => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
color: #ffffff; color: #ffffff;
margin-top: 14px;
.ViewDataTop { .ViewDataTop {
width: 114px; width: 114px;
height: 132px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -585,9 +587,10 @@ onBeforeUnmount(() => {
background-size: 100% 100%; background-size: 100% 100%;
width: 80px; width: 80px;
height: 80px; height: 80px;
margin-bottom: -24px; margin-bottom: -28px;
text-align: center; text-align: center;
line-height: 100px; line-height: 100px;
animation: moveUpDown 2s infinite;
} }
.ViewDataTopimg_1 { .ViewDataTopimg_1 {
background-image: url(@/assets/images/sjfx/sjfx1.png); background-image: url(@/assets/images/sjfx/sjfx1.png);
@ -598,18 +601,31 @@ onBeforeUnmount(() => {
} }
.ViewDataBottomimg { .ViewDataBottomimg {
background-image: url(@/assets/images/sjfx/sjfx2.png); background-image: url(@/assets/images/sjfx/sjfx2.png);
background-repeat: no-repeat; animation: scaleUpDown 2s infinite;
background-size: 100% 100%; // transform: scale(1.3);
width: 80px;
height: 80px;
margin-bottom: -24px;
} }
.ViewDataBottomimg_1 { .ViewDataBottomimg_1 {
background-image: url(@/assets/images/sjfx/sjfx3.png); background-image: url(@/assets/images/sjfx/sjfx3.png);
background-repeat: no-repeat; margin-top: 4px;
background-size: 100% 100%; }
width: 105px;
height: 57px; @keyframes moveUpDown {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes scaleUpDown {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
} }
} }
} }

View File

@ -39,7 +39,18 @@ const data = reactive({
color: "#ffffff", color: "#ffffff",
}, },
}, },
bgColor: ["#2468FF", "#E8FF00", "#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#57FF33", "#33FFA1", "#A133FF", "#FF5733"], bgColor: [
"#2468FF",
"#E8FF00",
"#FF5733",
"#33FF57",
"#3357FF",
"#FF33A1",
"#57FF33",
"#33FFA1",
"#A133FF",
"#FF5733",
],
}); });
const updateSeries = () => { const updateSeries = () => {
@ -106,12 +117,10 @@ const getOption = () => {
type: "category", type: "category",
data: data.year, data: data.year,
axisLabel: { axisLabel: {
textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 16, fontSize: 16,
}, },
}, },
},
yAxis: [ yAxis: [
{ {
type: "value", type: "value",

View File

@ -115,7 +115,7 @@ let option = {
// formatter: '{c}%' // // formatter: '{c}%' //
}, // }, //
itemStyle: { itemStyle: {
normal: { // normal: {
borderWidth: 1, borderWidth: 1,
// borderColor: "rgba(0, 183, 255, 1)", // borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [0, 0, 50, 0], // borderRadius: [0, 0, 50, 0], //
@ -123,7 +123,7 @@ let option = {
{ offset: 0, color: "rgba(0, 183, 255, 0)" }, { offset: 0, color: "rgba(0, 183, 255, 0)" },
{ offset: 1, color: "rgba(0, 183, 255, 1)" }, { offset: 1, color: "rgba(0, 183, 255, 1)" },
]), ]),
}, // },
}, },
barWidth: 10, barWidth: 10,
data: data2, data: data2,

View File

@ -179,7 +179,7 @@ const getOption = () => {
barMaxWidth: 20, // barMaxWidth: 20, //
barMinWidth: 5, // barMinWidth: 5, //
itemStyle: { itemStyle: {
normal: { // normal: {
borderWidth: 1, borderWidth: 1,
borderColor: "rgba(0, 183, 255, 1)", borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [0, 0, 50, 0], // borderRadius: [0, 0, 50, 0], //
@ -187,7 +187,7 @@ const getOption = () => {
{ offset: 0, color: "rgba(26, 255, 217, 0)" }, { offset: 0, color: "rgba(26, 255, 217, 0)" },
{ offset: 1, color: "rgba(0, 183, 255, 1)" }, { offset: 1, color: "rgba(0, 183, 255, 1)" },
]), ]),
}, // },
}, },
label: { label: {
show: true, show: true,