右侧大屏

This commit is contained in:
2024-01-04 18:58:04 +08:00
parent bcddde74b1
commit 8aa0765437
19 changed files with 1197 additions and 74 deletions

View File

@@ -106,6 +106,7 @@
<script>
import { homepageDataLeft } from '@js/mork2.js'
// import { homepageDataLeft } from '@js/getData2.js'
import symbol1 from '@img/symbol_1.png'
import symbol2 from '@img/symbol_2.png'
import symbol3 from '@img/symbol_3.png'
@@ -665,7 +666,7 @@ export default {
})
})
let option = {
color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252'],
color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
grid: {
top: 0,
left: 0,
@@ -737,17 +738,19 @@ export default {
imgSrc2: symbol4,
imgSrc3: lineSelected
}
let total = 0
this.history.map(el => {
total = Math.max(total, Number(el.press), Number(el.sort))
})
let barName = []
let barData1 = []
let barData2 = []
let totalDate = []
this.history.map(el => {
barName.push(el.date)
barData1.push(el.press)
barData2.push(el.sort)
})
let total = 0
this.history.map(el => {
total = Math.max(total, Number(el.press), Number(el.sort))
totalDate.push(total)
})
let option = {
grid: {
@@ -773,10 +776,10 @@ export default {
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(254,254,254,0)'
color: 'rgba(254,254,254,0.1)'
}, {
offset: 1,
color: 'rgba(254,254,254,0)'
color: 'rgba(254,254,254,0.8)'
}],
global: false
}
@@ -926,38 +929,41 @@ export default {
data: barData2
},
{
// name: '阴影',
// type: 'bar',
// barWidth: '38px',
// itemStyle: {
// normal: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0.1,
// color: 'rgba(254,254,254,0.1)'
// },
// {
// offset: 1,
// color: 'rgba(254,254,254,0.1)'
// }
// ]
// }
// }
// },
// data: [total],
// z: -1
name: '阴影',
type: 'pictorialBar',
type: 'bar',
barWidth: '38px',
symbol: 'image://' + img.imgSrc3,
data: [total],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.1,
color: 'rgba(254,254,254,0.1)'
},
{
offset: 1,
color: 'rgba(254,254,254,0.1)'
}
]
}
}
},
data: totalDate,
z: -1
// name: '阴影',
// type: 'pictorialBar',
// barWidth: '38px',
// symbol: 'image://' + img.imgSrc3,
// data: totalDate,
// itemStyle: {
// opacity: itemOpacity
// },
// z: -1
}
]
}
@@ -988,8 +994,8 @@ export default {
.left_wraper
_wh(100%, 100%)
.item_wraper
_wh(100%, calc((100% - 50px) / 3))
margin-bottom 25px
_wh(100%, calc((100% - 40px) / 3))
margin-bottom 20px
&:last-child
margin-bottom 0
.title_wraper
@@ -1049,11 +1055,10 @@ export default {
.pie_legend
_wh(calc(100% - 195px), 100%)
margin-left 195px
// _fj(row, flex-start)
// flex-wrap: wrap
_fj(, center)
.pie_legend_item
width 100%
padding 0 0px 5px 20px
padding 0 0px 2px 20px
.pie_legend_item_bg_1
background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
.pie_legend_item_bg_2
@@ -1064,18 +1069,22 @@ export default {
background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
.pie_legend_item_bg_5
background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
.pie_legend_item_bg_6
background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
.pie_legend_item_bg_7
background top left / 18px auto url('../../../../images/fk_7.png') no-repeat
.pie_legend_txt_1
font-size: 12px;
line-height: 18px
line-height: 14px
font-family: 'SourceHanSansCN-Regular';
color: #9BB9DD;
word-wrap: break-word;
.pie_legend_txt_wraper
_wh(100%, 20px)
_wh(100%, 18px)
_fj(row)
.pie_legend_txt_2
font-size 20px
line-height: 20px
font-size 18px
line-height: 18px
font-family: 'YouSheBiaoTiHei'
color: transparent;
background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
@@ -1083,8 +1092,8 @@ export default {
-webkit-background-clip: text;
background-clip: text;
.pie_legend_txt_3
font-size: 16px;
line-height: 20px
font-size: 14px;
line-height: 18px
font-family: 'SourceHanSansCN-Regular';
color: #9BB9DD;
opacity: 0.5;