This commit is contained in:
parent
6c4e907587
commit
e4bc22bfbd
|
@ -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%;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue