首页大屏修改

cyx-admin/src/main/resources/static/css/main_center.css

@@ -338,9 +338,7 @@
 }
 .center_footer_content{
     width: 100%;
-    height: 24vh;
+    height: 25vh;
-    overflow: hidden;
-    position: relative;
 }
 .item_inline{
     margin: 0;

cyx-admin/src/main/resources/templates/main.html

@@ -93,14 +93,14 @@
         </div>
         <div class="main_footer">
             <div class="main_footer_center">
-                <div class="center_footer_item">
+                <div class="center_footer_item" style="width: 35%">
                     <div class="echarts_title">
                         <span></span>
                         <span>部门完成情况</span>
                     </div>
                     <div class="echarts_footer_wrap" id="bottom_left_echarts"></div>
                 </div>
-                <div class="center_footer_item">
+                <div class="center_footer_item" style="width: 65%">
                     <div class="echarts_title">
                         <span></span>
                         <span>资源交易数据统计</span>
@@ -113,8 +113,11 @@
                         <span class="trade_all_num">全年累计交易数：0</span>
                         <span class="trade_all_money" style="margin-left: 20px">全年累计交易额：0万元</span>
                     </div>
-                    <div class="center_footer_content" style="height: 30vh" id="center_footer_two">
+                    <div style="margin: 1% 0;color: #fff;font-size: 12px;width: 100%;text-align: center">
+                        <span class="trade_all_num">历年累计交易数：0</span>
+                        <span class="trade_all_money" style="margin-left: 20px">历年累计交易额：0万元</span>
                     </div>
+                    <div class="center_footer_content" id="center_footer_chart"></div>
                 </div>
             </div>
         </div>
@@ -737,64 +740,153 @@
                         data: item.array
                     })
                 })
-                let chart = echarts.init(document.getElementById('center_footer_two'));
+                //加载饼状图
+                loadCirCleData('center_footer_chart')
+            }
+        })
+    }
+
+    //加载饼状图
+    function loadCirCleData(dom){
+        let chart = echarts.init(document.getElementById(dom));
         let option = {
-                    tooltip: {
+            title:[
-                        trigger: 'item',
+                {
-                        formatter:function(params){
+                    subtext: '当月累计交易',
-                            let _retTips = params.marker+' '+params.seriesName+'<br/>交易额：'+params.value.toFixed(4)+'万元<br/>';
+                    left: '24.5%',
-                            _allNumData.forEach(item => {
+                    top: '75%',
-                                if(item.name === params.seriesName){
+                    textAlign: 'center',
-                                    Object.keys(item.obj1).forEach(key => {
+                    subtextStyle:{
-                                        if(params.name === String(key)){
+                        color:'#fff'
-                                            _retTips+='交易数：'+item.obj1[key]
-                                        }
-                                    })
-                                }
-                            })
-                            return _retTips;
                     }
                 },
+                {
+                    subtext: '当年累计交易',
+                    left: '49.5%',
+                    top: '75%',
+                    textAlign: 'center',
+                    subtextStyle:{
+                        color:'#fff'
+                    }
+                },
+                {
+                    subtext: '历年累计交易',
+                    left: '74.5%',
+                    top: '75%',
+                    textAlign: 'center',
+                    subtextStyle:{
+                        color:'#fff'
+                    }
+                },
+            ],
+            tooltip: {
+                trigger: 'item'
+            },
             legend: {
-                        type:'scroll',
+                top: '5%',
-                        bottom:'bottom',
+                left: 'center',
                 textStyle: {
                     color: "#ffffff"
                 },
-                        pageIconColor:'#fff',
+            },
-                        pageIconInactiveColor:'#fff',
+            dataset: [
-                        pageTextStyle:{
+                {
-                            color: "#ffffff"
+                    source: [
+                        ['', 'Sales', 'Price', 'Year'],
+                        ['工程招投标', 235, 5, 2011],
+                        ['政府采购', 341, 25, 2011],
+                        ['产权交易', 122, 29, 2011],
+                        ['工程招投标', 255, 7, 2012],
+                        ['政府采购', 241, 27, 2012],
+                        ['产权交易', 102, 34, 2012],
+                        ['工程招投标', 395, 4, 2013],
+                        ['政府采购', 281, 31, 2013],
+                        ['产权交易', 92, 39, 2013],
+                    ]
+                },
+                {
+                    transform: {
+                        type: 'filter',
+                        config: { dimension: 'Year', value: 2011 }
                     }
                 },
-                    grid: {
+                {
-                        top: "5%",
+                    transform: {
-                        left: '5%',
+                        type: 'filter',
-                        right: '5%',
+                        config: { dimension: 'Year', value: 2012 }
-                        bottom: '15%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'value',
-                        boundaryGap: [0, 0.01],
-                        axisLabel:{
-                            color:'#fff'
                     }
                 },
-                    yAxis: {
+                {
-                        type: 'category',
+                    transform: {
-                        data: _yData,
+                        type: 'filter',
-                        axisLabel:{
+                        config: { dimension: 'Year', value: 2013 }
-                            color:'#fff'
+                    }
+                }
+            ],
+            series: [
+                {
+                    type: 'pie',
+                    name:'2022',
+                    radius: 50,
+                    center: ['50%', '25%'],
+                    datasetIndex: 1,
+                    labelLine: {
+                        show: false
+                    },
+                    label: {
+                        show: false,
+                    },
+                },
+                {
+                    type: 'pie',
+                    radius: 50,
+                    center: ['50%', '50%'],
+                    datasetIndex: 2,
+                    labelLine: {
+                        show: false
+                    },
+                    label: {
+                        show: false,
+                    },
+                },
+                {
+                    type: 'pie',
+                    radius: 50,
+                    center: ['50%', '75%'],
+                    datasetIndex: 3,
+                    labelLine: {
+                        show: false
+                    },
+                    label: {
+                        show: false,
+                    },
+                }
+            ],
+            // Optional. Only for responsive layout:
+            media: [
+                {
+                    option: {
+                        series: [
+                            { center: ['25%', '50%'] },
+                            { center: ['50%', '50%'] },
+                            { center: ['75%', '50%'] }
+                        ]
                     }
                 },
-                    series: _sData
+                {
+                    option: {
+                        series: [
+                            { center: ['50%', '25%'] },
+                            { center: ['50%', '50%'] },
+                            { center: ['50%', '75%'] }
+                        ]
+                    }
+                }
+            ]
         };
         // 使用刚指定的配置项和数据显示图表。
         chart.setOption(option);
     }
-        })
-    }
 
     //文字上下滚动
     function autoScroll(obj){