From e4bc22bfbdd3b6e750c0ee0c4b62e5b6c5a83247 Mon Sep 17 00:00:00 2001 From: duxp Date: Tue, 19 Sep 2023 10:58:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/resources/static/css/main_center.css | 57 ++++++++++----- .../src/main/resources/templates/main.html | 71 ++++++++++--------- 2 files changed, 75 insertions(+), 53 deletions(-) diff --git a/cyx-admin/src/main/resources/static/css/main_center.css b/cyx-admin/src/main/resources/static/css/main_center.css index cb0b561..6cfa67d 100644 --- a/cyx-admin/src/main/resources/static/css/main_center.css +++ b/cyx-admin/src/main/resources/static/css/main_center.css @@ -21,19 +21,48 @@ .main_wrap .main_left .main_left_item { width: 100%; - height: 35vh; + height: 30vh; padding: 10px; box-sizing: border-box; /*background-color: rgba(11, 40, 49, 0.2);*/ } - -.main_wrap .main_center .main_center_item, .main_wrap .main_right .main_right_item { +.main_wrap .main_right .main_right_item{ width: 100%; - height: 70vh; + height: 60vh; box-sizing: border-box; padding: 10px; 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 { position: absolute; @@ -252,9 +281,9 @@ /*background-color: rgba(11, 40, 49, 0.2);*/ } -.main_wrap .main_footer { +.main_wrap .main_center .main_footer { width: 100%; - height: 30vh; + height: 40vh; box-sizing: border-box; padding: 10px; /*background-color: rgba(11, 40, 49, 0.2);*/ @@ -287,24 +316,14 @@ margin-right: 5px; } -.main_wrap .btn_echarts_wrap { +.main_wrap .main_center .main_footer .echarts_footer_wrap { width: 100%; - height: 25vh; -} - -.main_wrap .echarts_wrap { - width: 100%; - height: 28vh; -} - -.main_wrap .echarts_footer_wrap { - width: 100%; - height: 24vh; + height: 34vh; } .main_wrap .echarts_right_top_wrap{ width: 100%; - height: 60vh; + height: 52vh; } .main_footer_center{ width: 100%; diff --git a/cyx-admin/src/main/resources/templates/main.html b/cyx-admin/src/main/resources/templates/main.html index 686ef2b..4c544ca 100644 --- a/cyx-admin/src/main/resources/templates/main.html +++ b/cyx-admin/src/main/resources/templates/main.html @@ -34,12 +34,12 @@
-
+
重点工作进度
-
+
@@ -113,7 +113,7 @@ 全年累计交易数：0 全年累计交易额：0万元
-
+
@@ -132,12 +132,12 @@
-
+
季度考核指标
- +
@@ -711,35 +711,49 @@ dataType:'json', success(res){ 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_money').text('全年累计交易额：'+_data.yearMoney.toFixed(2)+'万元'); - _data.list.forEach(item => { - _yData.push(item.month); - _sData1.push(item.count); - _sData2.push(item.trade.toFixed(2)) + _data.data.forEach(item => { + _sData.push({ + name: item.name, + 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 option = { - color:['#02abe0','#05f3b4'], tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - }, + trigger: 'item', formatter:function(params){ - let _data = params[0].name+'
'; - params.forEach((item,index) => { - if(index === 0){ - _data+=item.marker+' '+item.seriesName+'：'+item.data+'
'; - }else{ - _data+=item.marker+' '+item.seriesName+'：'+item.data+'万元'; + let _retTips = params.marker+' '+params.seriesName+'
交易额：'+params.value.toFixed(2)+'万元
'; + _allNumData.forEach(item => { + if(item.name === params.seriesName){ + Object.keys(item.obj1).forEach(key => { + if(params.name === String(key)){ + _retTips+='交易数：'+item.obj1[key] + } + }) } }) - return _data; + return _retTips; } }, legend: { + type:'scroll', bottom:'bottom', textStyle: { color: "#ffffff" @@ -766,18 +780,7 @@ color:'#fff' } }, - series: [ - { - name: '交易数', - type: 'bar', - data: _sData1 - }, - { - name: '交易额', - type: 'bar', - data: _sData2 - } - ] + series: _sData }; // 使用刚指定的配置项和数据显示图表。 chart.setOption(option);