修改三级菜单样式和大屏饼图效果

projects/src/main/webapp/vmodules/leftMenu.jsp

@@ -3,6 +3,49 @@
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+<style>
+    .layui-layout-admin.frame
+        .layui-side .layui-nav .layui-nav-item.layui-nav-itemed
+        .layui-nav-child dd > a {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+    .layui-layout-admin.frame
+        .layui-side .layui-nav .layui-nav-item.layui-nav-itemed
+        .layui-nav-child dd > a .layui-icon {
+        text-indent: 0;
+    }
+    .layui-layout-admin.frame
+        .layui-side .layui-nav .layui-nav-item.layui-nav-itemed
+        dd.layui-nav-itemed > a {
+        background: linear-gradient(85deg, #0073E9 0%, #4CA5FF 100%);
+    }
+    .layui-layout-admin.frame
+        .layui-side .layui-nav .layui-nav-item.layui-nav-itemed
+        dd.layui-nav-itemed > a:hover {
+        color: #fff !important;
+    }
+    .layui-layout-admin.frame
+        .layui-side .layui-nav .layui-nav-child > dd {
+        padding: 1px 0 0 10px;
+    }
+    .layui-layout-admin.frame
+        .layui-side .layui-nav
+        .layui-nav-item.layui-nav-itemed
+        .layui-nav-child > dd
+        .layui-icon {
+        transform: rotate(0deg)
+    }
+    .layui-layout-admin.frame
+        .layui-side .layui-nav
+        .layui-nav-item.layui-nav-itemed
+        .layui-nav-child > dd.layui-nav-itemed
+        .layui-icon {
+        color: #fff;
+        transform: rotate(-180deg);
+    }
+</style>
 <!-- 左侧导航区域 -->
 <div id="leftMenu" class="layui-side left_menu" :class="{close: collapse}">
     <!-- <div class="top_menu" @click="changeSide" v-if="collapse"></div> -->
@@ -33,7 +76,10 @@
                     >
                         <a :title="it.txt" href="javascript:;"
                            @click="onSelectItem(index,ind)"
-                        >{{it.txt}}</a>
+                        >
+                            {{it.txt}}
+                            <i class="layui-icon layui-icon-down" v-if="it.child != null"></i>
+                        </a>
 
                         <!-- 三级菜单 -->
                         <dl class="layui-nav-child" v-if="it.child != null">

projects/src/main/webapp/vmodules/statics/analysisScreen_four.jsp

@@ -722,9 +722,10 @@
         }, function(res) {
             // 绑定数据到页面
             if (res.success) {
+                console.log('res.data: ', res.data)
                 hyData = res.data.map(item => ({
                     value: item.zb, // 使用 amt 作为 value
-                    name: item.title, // 使用 title 作为 name
+                    name: item.title + (item.id ? '_' + item.id : ''), // 使用 title 作为 name
                 }));
 
                 initHy();
@@ -892,21 +893,20 @@
                 trigger: 'item',
                 formatter: '{b}: {c} ({d}%)'
             },
+            color: ['#1b9b06', '#dc1718', '#9908d7', '#faca1e',
+                '#FEE23D', '#249766', '#FF2123', '#C13DFF',],
             series: [
                 {
-                    name: '饼图示例',
+                    name: '饼图',
                     type: 'pie',
-                    radius: ['50%', '80%'],
-                    avoidLabelOverlap: false,
+                    radius: ['50%', '78%'],
+                    center: ['50%', '50%'],
                     labelLine: {
-                        length: 5,
-                        length2: 30,
+                        length2: 80,
                         // maxSurfaceAngle: 80
                     },
-                    color: ['#FEE23D', '#249766', '#FF2123', '#C13DFF',],
-
                     label: {
-                        // alignTo: 'edge',
+                        alignTo: 'edge',
                         position: 'outside',
                         // margin: 2,
                         formatter: '{data|{c}}{unit| %}\n{name|{b}}',
@@ -928,43 +928,148 @@
                             }
                         }
                     },
-
+                    labelLayout: {
+                      moveOverlap: 'shiftY',
+                      height: 36,
+                    },
                     itemStyle: {
-                        // borderWidth: 5,
-                        // borderColor: '#2971e0',
+                        borderWidth: 1,
+                        borderColor: '#7e7e7e',
                     },
-                    data: hyData,
-                    emphasis: {
-                        itemStyle: {
-                            shadowBlur: 200,
-                            shadowOffsetX: 0,
-                            shadowOffsetY: 0,
-                            shadowColor: '#296edf'
+                    data: hyData.map((item, index) => (
+                        {
+                            ...item,
+                            itemStyle: {
+                                color: [
+                                    {
+                                        type: 'radial',
+                                        x: 0.5,
+                                        y: 0.5,
+                                        r: 0.5,
+                                        colorStops: [
+                                            {offset: 0, color: '#1bb705'},
+                                            {offset: 1, color: '#157c09'}
+                                        ]
+                                    },
+                                    {
+                                        type: 'radial',
+                                        x: 0.5,
+                                        y: 0.5,
+                                        r: 0.5,
+                                        colorStops: [
+                                            {offset: 0, color: '#f72122'},
+                                            {offset: 1, color: '#a00104'}
+                                        ]
+                                    },
+                                    {
+                                        type: 'radial',
+                                        x: 0.5,
+                                        y: 0.5,
+                                        r: 0.5,
+                                        colorStops: [
+                                            {offset: 0, color: '#55109f'},
+                                            {offset: 1, color: '#540b94'}
+                                        ]
+                                    },
+                                    {
+                                        type: 'radial',
+                                        x: 0.5,
+                                        y: 0.5,
+                                        r: 0.5,
+                                        colorStops: [
+                                            {offset: 0, color: '#fcd62c'},
+                                            {offset: 1, color: '#f4b70c'}
+                                        ]
+                                    },
+                                ][index]
+                            }
                         }
+                    )),
+                    emphasis: {
+                        // itemStyle: {
+                        //     shadowBlur: 200,
+                        //     shadowOffsetX: 0,
+                        //     shadowOffsetY: 0,
+                        //     shadowColor: '#296edf'
+                        // }
                     },
-
                 }
                 , {
-                    name: '外边框',
+                    name: '内圈',
                     type: 'pie',
-                    clockWise: false,
-                    radius: ['83%', '83%'],//边框大小
-                    center: ['50%', '50%'],//边框位置
-                    // radius: ['80%', '85%'],
-                    data: [{
-                        value: 10,
-                        itemStyle: {
-                            normal: {
-                                borderWidth: 4,//设置边框粗细
-                                borderColor: '#2971e0'//边框颜色
+                    radius: ['30%', '50%'],//边框大小
+                    center: ['50%', '50%'],
+                    label: {
+                        show: false
+                    },
+                    itemStyle: {
+                        shadowBlur: 5,
+                        shadowColor: '#142213'
+                    },
+                    data: hyData.map((item, index) => (
+                        {
+                            ...item,
+                            itemStyle: {
+                                color: [
+                                    {
+                                        type: 'linear',
+                                        x: 0,
+                                        y: 0,
+                                        x2: 1,
+                                        y2: -1,
+                                        colorStops: [
+                                            { offset: 0, color: '#0d5e2a' },
+                                            { offset: 1, color: '#0c4e22' }
+                                        ]
+                                    },
+                                    {
+                                        type: 'linear',
+                                        x: 0,
+                                        y: 0,
+                                        x2: 1,
+                                        y2: -1,
+                                        colorStops: [
+                                            { offset: 0, color: '#80152d' },
+                                            { offset: 1, color: '#720a23' }
+                                        ]
+                                    },
+                                    {
+                                        type: 'linear',
+                                        x: 0,
+                                        y: 0,
+                                        x2: 1,
+                                        y2: -1,
+                                        colorStops: [
+                                            { offset: 0, color: '#55109f' },
+                                            { offset: 1, color: '#540b94' }
+                                        ]
+                                    },
+                                    {
+                                        type: 'linear',
+                                        x: 0,
+                                        y: 0,
+                                        x2: 1,
+                                        y2: -1,
+                                        colorStops: [
+                                            { offset: 0, color: '#a27f25' },
+                                            { offset: 1, color: '#ae821d' }
+                                        ]
+                                    },
+                                ][index]
                             }
                         }
-                    }]
+                    )),
+                    emphasis: {
+                        disabled: true,
+                        scale: false,
+                        label: {
+                            show: false
+                        }
+                    },
                 },
             ],
-
         };
-
+        console.log('option: ', option);
         myChart5.setOption(option);
         // 监听窗口大小变化，动态调整图表大小
         window.addEventListener('resize', function() {