This commit is contained in:
duxp 2023-09-19 10:58:36 +08:00
parent 6c4e907587
commit e4bc22bfbd
2 changed files with 75 additions and 53 deletions

View File

@ -21,19 +21,48 @@
.main_wrap .main_left .main_left_item { .main_wrap .main_left .main_left_item {
width: 100%; width: 100%;
height: 35vh; height: 30vh;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
/*background-color: rgba(11, 40, 49, 0.2);*/ /*background-color: rgba(11, 40, 49, 0.2);*/
} }
.main_wrap .main_right .main_right_item{
.main_wrap .main_center .main_center_item, .main_wrap .main_right .main_right_item {
width: 100%; width: 100%;
height: 70vh; height: 60vh;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
position: relative; position: relative;
} }
.main_wrap .main_right .main_right_item_two{
width: 100%;
height: 40vh;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.main_wrap .main_right .main_right_item_two .main_right_item_two_div{
width: 100%;
height: 35vh;
}
.main_wrap .main_center .main_center_item{
width: 100%;
height: 60vh;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.main_wrap .main_left .main_left_item:nth-child(2) {
margin: 3vh 0;
}
.main_wrap .main_left .main_left_item .btn_echarts_wrap {
width: 100%;
height: 25vh;
}
.main_wrap .main_left .main_left_item .echarts_wrap {
width: 100%;
height: 28vh;
}
.main_wrap .main_center .main_center_item .rain { .main_wrap .main_center .main_center_item .rain {
position: absolute; position: absolute;
@ -252,9 +281,9 @@
/*background-color: rgba(11, 40, 49, 0.2);*/ /*background-color: rgba(11, 40, 49, 0.2);*/
} }
.main_wrap .main_footer { .main_wrap .main_center .main_footer {
width: 100%; width: 100%;
height: 30vh; height: 40vh;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
/*background-color: rgba(11, 40, 49, 0.2);*/ /*background-color: rgba(11, 40, 49, 0.2);*/
@ -287,24 +316,14 @@
margin-right: 5px; margin-right: 5px;
} }
.main_wrap .btn_echarts_wrap { .main_wrap .main_center .main_footer .echarts_footer_wrap {
width: 100%; width: 100%;
height: 25vh; height: 34vh;
}
.main_wrap .echarts_wrap {
width: 100%;
height: 28vh;
}
.main_wrap .echarts_footer_wrap {
width: 100%;
height: 24vh;
} }
.main_wrap .echarts_right_top_wrap{ .main_wrap .echarts_right_top_wrap{
width: 100%; width: 100%;
height: 60vh; height: 52vh;
} }
.main_footer_center{ .main_footer_center{
width: 100%; width: 100%;

View File

@ -34,12 +34,12 @@
</div> </div>
<div class="echarts_wrap" id="center_left_echarts"></div> <div class="echarts_wrap" id="center_left_echarts"></div>
</div> </div>
<div class="main_footer"> <div class="main_left_item">
<div class="echarts_title"> <div class="echarts_title">
<span></span> <span></span>
<span>重点工作进度</span> <span>重点工作进度</span>
</div> </div>
<div class="center_footer_content" id="center_footer_one"></div> <div class="echarts_wrap" id="center_footer_one"></div>
</div> </div>
</div> </div>
<div class="main_center"> <div class="main_center">
@ -113,7 +113,7 @@
<span class="trade_all_num">全年累计交易数0</span> <span class="trade_all_num">全年累计交易数0</span>
<span class="trade_all_money" style="margin-left: 20px">全年累计交易额0万元</span> <span class="trade_all_money" style="margin-left: 20px">全年累计交易额0万元</span>
</div> </div>
<div class="center_footer_content" style="height: 20vh" id="center_footer_two"> <div class="center_footer_content" style="height: 30vh" id="center_footer_two">
</div> </div>
</div> </div>
</div> </div>
@ -132,12 +132,12 @@
</div> </div>
<div class="echarts_right_top_wrap" id="top_right_echarts"></div> <div class="echarts_right_top_wrap" id="top_right_echarts"></div>
</div> </div>
<div class="main_footer"> <div class="main_right_item_two">
<div class="echarts_title"> <div class="echarts_title">
<span></span> <span></span>
<span onclick="openTab(4)">季度考核指标</span> <span onclick="openTab(4)">季度考核指标</span>
</div> </div>
<div class="echarts_footer_wrap" id="bottom_right_echarts"></div> <div class="main_right_item_two_div" id="bottom_right_echarts"></div>
</div> </div>
</div> </div>
</div> </div>
@ -711,35 +711,49 @@
dataType:'json', dataType:'json',
success(res){ success(res){
let _data = res.data; let _data = res.data;
let _yData = [],_sData1 = [],_sData2 = []; let _yData = _data.type,_sData = [];
let _allNumData = _data.data;
$('.trade_month_num').text('当月累计交易数:'+_data.monthCount);
$('.trade_month_money').text('当月累计交易额:'+_data.monthMoney.toFixed(2)+'万元');
$('.trade_all_num').text('全年累计交易数:'+_data.yearCount); $('.trade_all_num').text('全年累计交易数:'+_data.yearCount);
$('.trade_all_money').text('全年累计交易额:'+_data.yearMoney.toFixed(2)+'万元'); $('.trade_all_money').text('全年累计交易额:'+_data.yearMoney.toFixed(2)+'万元');
_data.list.forEach(item => { _data.data.forEach(item => {
_yData.push(item.month); _sData.push({
_sData1.push(item.count); name: item.name,
_sData2.push(item.trade.toFixed(2)) type: 'bar',
stack: 'total',
// label: {
// show: true,
// formatter:function(params){
// return params.value.toFixed(2)+'万元';
// }
// },
emphasis: {
focus: 'series'
},
data: item.array
})
}) })
let chart = echarts.init(document.getElementById('center_footer_two')); let chart = echarts.init(document.getElementById('center_footer_two'));
let option = { let option = {
color:['#02abe0','#05f3b4'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'item',
axisPointer: {
type: 'shadow'
},
formatter:function(params){ formatter:function(params){
let _data = params[0].name+'<br/>'; let _retTips = params.marker+' '+params.seriesName+'<br/>交易额:'+params.value.toFixed(2)+'万元<br/>';
params.forEach((item,index) => { _allNumData.forEach(item => {
if(index === 0){ if(item.name === params.seriesName){
_data+=item.marker+' '+item.seriesName+''+item.data+'<br/>'; Object.keys(item.obj1).forEach(key => {
}else{ if(params.name === String(key)){
_data+=item.marker+' '+item.seriesName+''+item.data+'万元'; _retTips+='交易数:'+item.obj1[key]
}
})
} }
}) })
return _data; return _retTips;
} }
}, },
legend: { legend: {
type:'scroll',
bottom:'bottom', bottom:'bottom',
textStyle: { textStyle: {
color: "#ffffff" color: "#ffffff"
@ -766,18 +780,7 @@
color:'#fff' color:'#fff'
} }
}, },
series: [ series: _sData
{
name: '交易数',
type: 'bar',
data: _sData1
},
{
name: '交易额',
type: 'bar',
data: _sData2
}
]
}; };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
chart.setOption(option); chart.setOption(option);