This commit is contained in:
parent
1853dc9e12
commit
5bf970faf6
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,10 +117,8 @@ 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: [
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue