From 36661e800f387ff555899b17ff3085e024649cbd Mon Sep 17 00:00:00 2001
From: duxp <dxp18195149767@163.com>
Date: Mon, 4 Mar 2024 14:49:20 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=A4=A7=E5=B1=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/resources/static/css/main_center.css |   4 +-
 .../src/main/resources/templates/main.html    | 208 +++++++++++++-----
 2 files changed, 151 insertions(+), 61 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 6cfa67d..a8cbb4c 100644
--- a/cyx-admin/src/main/resources/static/css/main_center.css
+++ b/cyx-admin/src/main/resources/static/css/main_center.css
@@ -338,9 +338,7 @@
 }
 .center_footer_content{
     width: 100%;
-    height: 24vh;
-    overflow: hidden;
-    position: relative;
+    height: 25vh;
 }
 .item_inline{
     margin: 0;
diff --git a/cyx-admin/src/main/resources/templates/main.html b/cyx-admin/src/main/resources/templates/main.html
index 835d8bc..cb80bb2 100644
--- a/cyx-admin/src/main/resources/templates/main.html
+++ b/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,65 +740,154 @@
                         data: item.array
                     })
                 })
-                let chart = echarts.init(document.getElementById('center_footer_two'));
-                let option = {
-                    tooltip: {
-                        trigger: 'item',
-                        formatter:function(params){
-                            let _retTips = params.marker+' '+params.seriesName+'<br/>交易额：'+params.value.toFixed(4)+'万元<br/>';
-                            _allNumData.forEach(item => {
-                                if(item.name === params.seriesName){
-                                    Object.keys(item.obj1).forEach(key => {
-                                        if(params.name === String(key)){
-                                            _retTips+='交易数：'+item.obj1[key]
-                                        }
-                                    })
-                                }
-                            })
-                            return _retTips;
-                        }
-                    },
-                    legend: {
-                        type:'scroll',
-                        bottom:'bottom',
-                        textStyle: {
-                            color: "#ffffff"
-                        },
-                        pageIconColor:'#fff',
-                        pageIconInactiveColor:'#fff',
-                        pageTextStyle:{
-                            color: "#ffffff"
-                        }
-                    },
-                    grid: {
-                        top: "5%",
-                        left: '5%',
-                        right: '5%',
-                        bottom: '15%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'value',
-                        boundaryGap: [0, 0.01],
-                        axisLabel:{
-                            color:'#fff'
-                        }
-                    },
-                    yAxis: {
-                        type: 'category',
-                        data: _yData,
-                        axisLabel:{
-                            color:'#fff'
-                        }
-                    },
-                    series: _sData
-                };
-                // 使用刚指定的配置项和数据显示图表。
-                chart.setOption(option);
+                //加载饼状图
+                loadCirCleData('center_footer_chart')
             }
         })
     }
 
+    //加载饼状图
+    function loadCirCleData(dom){
+        let chart = echarts.init(document.getElementById(dom));
+        let option = {
+            title:[
+                {
+                    subtext: '当月累计交易',
+                    left: '24.5%',
+                    top: '75%',
+                    textAlign: 'center',
+                    subtextStyle:{
+                        color:'#fff'
+                    }
+                },
+                {
+                    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: {
+                top: '5%',
+                left: 'center',
+                textStyle: {
+                    color: "#ffffff"
+                },
+            },
+            dataset: [
+                {
+                    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 }
+                    }
+                },
+                {
+                    transform: {
+                        type: 'filter',
+                        config: { dimension: 'Year', value: 2012 }
+                    }
+                },
+                {
+                    transform: {
+                        type: 'filter',
+                        config: { dimension: 'Year', value: 2013 }
+                    }
+                }
+            ],
+            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%'] }
+                        ]
+                    }
+                },
+                {
+                    option: {
+                        series: [
+                            { center: ['50%', '25%'] },
+                            { center: ['50%', '50%'] },
+                            { center: ['50%', '75%'] }
+                        ]
+                    }
+                }
+            ]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        chart.setOption(option);
+    }
+
     //文字上下滚动
     function autoScroll(obj){
         $(obj).find(".item_inline:first").animate({