Bladeren bron

修改样式---以及雷达图

plg 6 maanden geleden
bovenliggende
commit
73f0afe414
3 gewijzigde bestanden met toevoegingen van 47 en 40 verwijderingen
  1. 3 2
      src/views/HomeView.vue
  2. 5 5
      src/views/PopularizationScience.vue
  3. 39 33
      src/views/Report.vue

+ 3 - 2
src/views/HomeView.vue

@@ -275,7 +275,7 @@ const planNumGet = async () => {
 
 
 .home_header_out {
-  // position: relative;
+  position: relative;
   width: 100%;
   min-width: 1200px;
   // background-color: rgb(151, 163, 202);
@@ -295,6 +295,7 @@ const planNumGet = async () => {
     padding: 10px 5px 20px 10px;
     position: absolute;
     right: 0;
+    // bottom: 26px;
     bottom: 0;
     width: 600px;
     background-color: #ffffff;
@@ -429,7 +430,7 @@ const planNumGet = async () => {
       .student3 {
         cursor: pointer;
         position: absolute;
-        bottom: 5%;
+        bottom: 6%;
         left: 62%; // w
         height: 40%;
       }

+ 5 - 5
src/views/PopularizationScience.vue

@@ -58,12 +58,12 @@ onUnmounted(() => {
                         </div>
                     </div>
                     <div class="kply_inner_duan1">
-                        对于患有抑郁症的人群并不在少数,每一个人或多或少都会有纠结的时候,
+                        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数,每一个人或多或少都会有纠结的时候,
                         所以为了预防和及时了解自己的情况,医学界给出来很多测量方式,
                         像最常见的自我测量答题表,专业的他测量表,以及日常行为的观察,就变得极其普遍和有效。(示例)
                     </div>
                     <div class="kply_inner_duan1">
-                        睡眠监测适用于各种睡眠障碍相关性疾病的诊断,比如失眠症、发作性睡病、
+                        &nbsp; &nbsp; &nbsp;睡眠监测适用于各种睡眠障碍相关性疾病的诊断,比如失眠症、发作性睡病、
                         阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
                         眼动图仪、肌电图仪等,需要进行睡眠检测的患者可以在医生的帮助下,将检查仪器穿戴完毕,然后入睡。
                     </div>
@@ -71,12 +71,12 @@ onUnmounted(() => {
                     <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />
 
                     <div class="kply_inner_duan1">
-                        对于患有抑郁症的人群并不在少数,每一个人或多或少都会有纠结的时候,
+                        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数,每一个人或多或少都会有纠结的时候,
                         所以为了预防和及时了解自己的情况,医学界给出来很多测量方式,
                         像最常见的自我测量答题表,专业的他测量表,以及日常行为的观察,就变得极其普遍和有效。(示例)
                     </div>
                     <div class="kply_inner_duan1">
-                        睡眠监测适用于各种睡眠障碍相关性疾病的诊断,比如失眠症、发作性睡病、
+                        &nbsp; &nbsp; &nbsp; 睡眠监测适用于各种睡眠障碍相关性疾病的诊断,比如失眠症、发作性睡病、
                         阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
                         眼动图仪、肌电图仪等,需要进行睡眠检测的患者可以在医生的帮助下,将检查仪器穿戴完毕,然后入睡。
                     </div>
@@ -159,7 +159,7 @@ onUnmounted(() => {
                 margin-top: 0px;
                 font-family: Alibaba PuHuiTi 2.0;
                 font-weight: normal;
-                font-size: 20px;
+                font-size: 18px;
                 color: #333333;
                 line-height: 30px;
                 letter-spacing: 4px;

+ 39 - 33
src/views/Report.vue

@@ -28,12 +28,12 @@ const reportData = ref<any>([])
 const echarts_des_list = ref<string[]>(['', '', '', '', '', ''])
 const echarts_data_list = ref<number[]>([10, 20, 30, 40, 0, 0])
 const echarts_name_list = ref<any>([
-    { name: '阳光指数', max: 100 },
-    { name: '情绪稳定指数', max: 100 },
-    { name: '社交能力', max: 100 },
-    { name: '自律能力', max: 100 },
-    { name: '爱情观', max: 100 },
-    { name: '人生观', max: 100 }
+    { name: '阳光指数', max: 100, color: '#000000' },
+    { name: '情绪稳定指数', max: 100, color: '#000000' },
+    { name: '社交能力', max: 100, color: '#000000' },
+    { name: '自律能力', max: 100, color: '#000000' },
+    { name: '爱情观', max: 100, color: '#000000' },
+    { name: '人生观', max: 100, color: '#000000' }
 ])
 
 const option = reactive({
@@ -54,11 +54,11 @@ const option = reactive({
             }
         },
         // 设置雷达图中间射线的颜色
-        axisLine: {
-            lineStyle: {
-                color: '#FFBA92',
-            },
-        },
+        // axisLine: {
+        //     lineStyle: {
+        //         color: '#FFBA92',
+        //     },
+        // },
         // splitArea: {  //设置图表颜色,show的值为true
         //     show: true,
         //     areaStyle: {
@@ -72,34 +72,40 @@ const option = reactive({
         //         ], false)
         //     }
         // },
-        splitArea: {
-            areaStyle: {
-                color: {
-                    type: 'radial', // linear 线性渐变  radial径向渐变
-                    x: 0.4,                  // 0.5为正中心,如果小于渐变中心靠左
-                    y: 0.5,                  // 0.5为正中心,如果小于渐变中心靠上
-                    r: 1,
-                    colorStops: [{
-                        offset: 0, color: '#f16e6e' // 0% 处的颜色rgba(247, 215, 211, 1)
-                    }, {
-                        offset: 1, color: 'rgba(247, 225, 222, 1)' // 100% 处的颜色rgba(247, 225, 222, 1)
-                    }],
-                }
-            }
-        },
+        // splitArea: {
+        //     areaStyle: {
+        //         color: {
+        //             type: 'radial', // linear 线性渐变  radial径向渐变
+        //             x: 0.4,                  // 0.5为正中心,如果小于渐变中心靠左
+        //             y: 0.5,                  // 0.5为正中心,如果小于渐变中心靠上
+        //             r: 1,
+        //             colorStops: [{
+        //                 offset: 0, color: '#f16e6e' // 0% 处的颜色rgba(247, 215, 211, 1)
+        //             }, {
+        //                 offset: 1, color: 'rgba(247, 225, 222, 1)' // 100% 处的颜色rgba(247, 225, 222, 1)
+        //             }],
+        //         }
+        //     }
+        // },
 
 
 
         //网格颜色设置
-        splitLine: {
-            show: true,
-            lineStyle: {
-                width: 1,
-                color: '#FFBA92',
-            },
-        },
+        // splitLine: {
+        //     show: true,
+        //     lineStyle: {
+        //         width: 1,
+        //         color: '#FFBA92',
+        //     },
+        // },
 
     },
+    // name: {
+    //     //修改indicator文字的颜色
+    //     textStyle: {
+    //         color: "#000000",
+    //     },
+    // },
     series: [
         {
             name: 'Budget vs spending',