feat: 配置项目的热修改

2024-03-31 06:22:53 +08:00
parent c8851bd696
commit f9e61fd184
22 changed files with 86394 additions and 138 deletions
--- a/liteyuki/resources/templates/test.html
+++ b/liteyuki/resources/templates/test.html
@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body {
+            background-color: #fff; // 设置背景色为灰色
+            background-repeat: no-repeat; // 设置背景图片不重复
+            background-size: 100% auto;
+        }
+        #pieHuan {
+            width: 400px;
+            height: 400px;
+            margin-top: 50px;
+            // 圆角矩形，使背景高斯模糊
+            background-color: rgba(255, 255, 255, 0.5);
+            border-radius: 10px;
+            padding: 10px;
+        }
+
+    </style>
+    <script type="text/javascript" src="js/echarts.js"></script>
+</head>
+
+<body>
+<div id="pieHuan"></div>
+<script>{
+    // 设置背景图为img/bg1.jpg
+    let bgs = ["bg1.jpg"]
+    // 随机选择背景图片
+    document.body.style.backgroundImage = `url(./img/${bgs[Math.floor(Math.random() * bgs.length)]})`;
+    // 环形图
+    let pieHuan = echarts.init(document.getElementById('pieHuan'));
+    pieHuanOption = {
+        // 标题
+        title: {
+            text: 'echarts实现环形图'
+        },
+        // 图例
+        tooltip: {
+            show: true,
+            trigger: "item",
+            backgroundColor: "#1677FF",
+            // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+            formatter: "{a}：{b}<br/>{c}条({d}%)"
+        },
+        // 不同区域的颜色
+        color: ['#65a5ff', '#dcebff'],
+        series: [
+            {
+                name: '访问来源',
+                type: 'pie',
+                // 数组的第一项是内半径，第二项是外半径；可以设置不同的内外半径显示成圆环图
+                radius: ['30%', '50%'],
+                // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标；设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
+                center: ['50%', '50%'],
+                itemStyle: {
+                    // 显示图例
+                    normal: {
+                        label: {
+                            show: true
+                        },
+                        labelLine: {
+                            show: true
+                        }
+                    },
+                    emphasis: {
+                        label: {
+                            // 标签内容是否高亮
+                            show: true,
+                            textStyle: {
+                                fontSize: '30',
+                                fontWeight: 'bold'
+                            }
+                        }
+                    }
+                },
+                data: [
+                    {value: 335, name: '百度'},
+                    {value: 335, name: '搜狐'}
+                ]
+            }
+        ]
+    };
+    pieHuan.setOption(pieHuanOption);
+}
+</script>
+</body>
+
+</html>