This commit is contained in:
parent
1853dc9e12
commit
5bf970faf6
|
@ -60,7 +60,7 @@
|
|||
<div class="minTopNum">
|
||||
<div
|
||||
class="numItem"
|
||||
v-for="(item, inex) in minData.minTop"
|
||||
v-for="(item, index) in minData.minTop"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
|
@ -573,8 +573,10 @@ onBeforeUnmount(() => {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: #ffffff;
|
||||
margin-top: 14px;
|
||||
.ViewDataTop {
|
||||
width: 114px;
|
||||
height: 132px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
@ -585,9 +587,10 @@ onBeforeUnmount(() => {
|
|||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: -24px;
|
||||
margin-bottom: -28px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
animation: moveUpDown 2s infinite;
|
||||
}
|
||||
.ViewDataTopimg_1 {
|
||||
background-image: url(@/assets/images/sjfx/sjfx1.png);
|
||||
|
@ -598,18 +601,31 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
.ViewDataBottomimg {
|
||||
background-image: url(@/assets/images/sjfx/sjfx2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: -24px;
|
||||
animation: scaleUpDown 2s infinite;
|
||||
// transform: scale(1.3);
|
||||
}
|
||||
.ViewDataBottomimg_1 {
|
||||
background-image: url(@/assets/images/sjfx/sjfx3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 105px;
|
||||
height: 57px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@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",
|
||||
},
|
||||
},
|
||||
bgColor: ["#2468FF", "#E8FF00", "#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#57FF33", "#33FFA1", "#A133FF", "#FF5733"],
|
||||
bgColor: [
|
||||
"#2468FF",
|
||||
"#E8FF00",
|
||||
"#FF5733",
|
||||
"#33FF57",
|
||||
"#3357FF",
|
||||
"#FF33A1",
|
||||
"#57FF33",
|
||||
"#33FFA1",
|
||||
"#A133FF",
|
||||
"#FF5733",
|
||||
],
|
||||
});
|
||||
|
||||
const updateSeries = () => {
|
||||
|
@ -106,12 +117,10 @@ const getOption = () => {
|
|||
type: "category",
|
||||
data: data.year,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
|
|
|
@ -115,7 +115,7 @@ let option = {
|
|||
// formatter: '{c}%' // 这里是数据展示的时候显示的数据
|
||||
}, // 柱子上方的数值
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
|
@ -123,7 +123,7 @@ let option = {
|
|||
{ offset: 0, color: "rgba(0, 183, 255, 0)" },
|
||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
]),
|
||||
},
|
||||
// },
|
||||
},
|
||||
barWidth: 10,
|
||||
data: data2,
|
||||
|
|
|
@ -179,7 +179,7 @@ const getOption = () => {
|
|||
barMaxWidth: 20, // 每一个都要设置
|
||||
barMinWidth: 5, // 每一个都要设置
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
|
@ -187,7 +187,7 @@ const getOption = () => {
|
|||
{ offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
]),
|
||||
},
|
||||
// },
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
|
|
Loading…
Reference in New Issue