gx

src/view/echarts_education/pieRose.vue

@@ -3,11 +3,24 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+    list: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+});
+
 const chart = ref(); // 创建DOM引用
+const data = reactive({
+    list: [],
+    option: {}
+})
 
 var colors = [
     '#4EC2FF',
@@ -16,114 +29,93 @@ var colors = [
     '#268FFF',
     '#FFE986'
 ]
-
+const getOption = () => {
-var data = [
+    data.option = {
-    {
+        color: colors,
-        name: '正常',
+        legend: {
-        value: 17
+            orient: 'vertical',
-    },
+            top: 'center',
-    {
+            right: '6%',
-        name: '关注',
+            icon: "circle",
-        value: 16
+            itemGap: 20,
-    },
+            itemWidth: 10,
-    {
+            itemHeight: 10,
-        name: '追踪',
+            textStyle: {
-        value: 14
+                color: '#fff',
-    },
+                fontSize: 18
-    {
+            },
-        name: '异常',
+            formatter: function (name) {
-        value: 8
+                var target;
-    },
+                for (var i = 0, l = data.list.length; i < l; i++) {
-    {
+                    if (data.list[i].name == name) {
-        name: '警戒',
+                        target = data.list[i].value;
-        value: 8
+                    }
-    }
-];
-
-let option = {
-    color: colors,
-    legend: {
-        orient: 'vertical',
-        top: 'center',
-        right: '6%',
-        icon: "circle",
-        itemGap: 20,
-        itemWidth: 10,
-        itemHeight: 10,
-        textStyle: {
-            color: '#fff',
-            fontSize: 18
-        },
-        formatter: function (name) {
-            var target;
-            for (var i = 0, l = data.length; i < l; i++) {
-                if (data[i].name == name) {
-                    target = data[i].value;
                 }
-            }
+                return `   ${name}        ${target} `;
-
-            return `   ${name}        ${target} `;
-        },
-    },
-    tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)'
-    },
-    series: [
-        
-        /*内心原型图，展示整体数据概览*/
-        {
-            name: '测评分析',
-            type: 'pie',
-            radius: ['20%', '70%'],
-            center: ['30%', '50%'],
-            roseType: 'radius',
-            minShowLabelAngle: 30,
-            label: {
-                show: false,
             },
-            data: data
         },
-        // 内圈背景
+        tooltip: {
-        {
+            trigger: 'item',
-            type: "pie",
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
-            center: ["30%", "50%"],
+        },
-            radius: ["20%", "26%"],
+        series: [
-            hoverAnimation: false,
+            /*内心原型图，展示整体数据概览*/
-            clockWise: false,
+            {
-            itemStyle: {
+                name: '测评分析',
-                normal: {
+                type: 'pie',
-                    borderWidth: 1,
+                radius: ['20%', '70%'],
-                    borderColor: "rgba(193, 229, 255, .1)",
+                center: ['30%', '50%'],
-                    color: 'rgba(14, 59, 123, 0.60)'
+                roseType: 'radius',
+                minShowLabelAngle: 30,
+                label: {
+                    show: false,
                 },
+                data: data.list
             },
-            tooltip: {
+            // 内圈背景
-                show: false,
+            {
+                type: "pie",
+                center: ["30%", "50%"],
+                radius: ["20%", "26%"],
+                hoverAnimation: false,
+                clockWise: false,
+                itemStyle: {
+                    normal: {
+                        borderWidth: 1,
+                        borderColor: "rgba(193, 229, 255, .1)",
+                        color: 'rgba(14, 59, 123, 0.60)'
+                    },
+                },
+                tooltip: {
+                    show: false,
+                },
+                label: {
+                    show: false,
+                },
+                data: [100],
             },
-            label: {
+        ]
-                show: false,
+    };
-            },
+}
-            data: [100],
+const setChart = () => {
-        },
-    ]
-};
-
-// 使用生命钩子
-onMounted(() => {
-    // 基于准备好的dom，初始化echarts实例
-    // var myChart = echarts.init(document.getElementById('main'));
     // Vue3中： 需要引入
     var myChart = echarts.init(chart.value);
 
-    // init(); // vue3.2没有this
     // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
+    myChart.setOption(data.option);
+}
+watch(() => props.list, (newVal, oldVal) => {
+    data.list = newVal
+    getOption()
+    setChart()
+    console.log('333', newVal, oldVal)
+})
+// 使用生命钩子
+onMounted(() => {
+    data.list = props.list
+    getOption()
+    setChart()
 
-    // 单图表响应式: 跟随浏览器大小改变
-    //   window.addEventListener("resize", () => {
-    //     myChart.resize();
-    //   });
 });
 </script>
 

src/view/education.vue

@@ -14,17 +14,19 @@
         <div class="yd_title left_2"></div>
         <div class="selectLint">
           <div class="selectBox">
-            <el-select v-model="value" placeholder="Select" size="large" class="selClass">
+            <el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option v-for="item in selectData.options1" :key="item.value" :label="item.label"
+                :value="item.value" />
             </el-select>
           </div>
           <div class="selectBox">
-            <el-select v-model="value" placeholder="Select" size="large">
+            <el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option v-for="item in selectData.options2" :key="item.value" :label="item.label"
+                :value="item.value" />
             </el-select>
           </div>
         </div>
-        <ePieRose></ePieRose>
+        <ePieRose :list="selectData.list"></ePieRose>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -102,37 +104,119 @@
 </template>
 
 <script setup>
+import { ref, reactive, onMounted, onBeforeMount } from 'vue'
 import edCSR from "./echarts_education/edCSR.vue";
 import ePie1 from "./echarts_education/pie1.vue";
 import ePie2 from "./echarts_education/pie2.vue";
 import ePie3 from "./echarts_education/pie3.vue";
 import ePie4 from "./echarts_education/pie4.vue";
 import ePieRose from "./echarts_education/pieRose.vue";
-import { ref } from 'vue'
 
-const value = ref('')
+const selectData = reactive({
-const options = [
+  value1: '111',
-  {
+  value2: 'tes1',
-    value: 'Option1',
+  options1: [{
-    label: 'Option1',
+    value: '111',
+    label: '2023秋季检查',
   },
   {
-    value: 'Option2',
+    value: '222',
-    label: 'Option2',
+    label: '2024春季检查',
+  },],
+  options2: [{
+    value: 'tes1',
+    label: '中小学心理健康诊断测验(MHT）',
   },
   {
-    value: 'Option3',
+    value: 'tes2',
-    label: 'Option3',
+    label: '小学心理健康诊断测验',
   },
   {
-    value: 'Option4',
+    value: 'tes3',
-    label: 'Option4',
+    label: '中学心理健康诊断',
+  },],
+  list: [],
+})
+var roseData1 = ref([
+  {
+    name: '正常',
+    value: 17
   },
   {
-    value: 'Option5',
+    name: '关注',
-    label: 'Option5',
+    value: 16
   },
-]
+  {
+    name: '追踪',
+    value: 14
+  },
+  {
+    name: '异常',
+    value: 8
+  },
+  {
+    name: '警戒',
+    value: 8
+  }
+]);
+var roseData2 = ref([
+  {
+    name: '正常',
+    value: 37
+  },
+  {
+    name: '关注',
+    value: 26
+  },
+  {
+    name: '追踪',
+    value: 24
+  },
+  {
+    name: '异常',
+    value: 18
+  },
+  {
+    name: '警戒',
+    value: 18
+  }
+]);
+var roseData3 = ref([
+  {
+    name: '正常',
+    value: 227
+  },
+  {
+    name: '关注',
+    value: 169
+  },
+  {
+    name: '追踪',
+    value: 114
+  },
+  {
+    name: '异常',
+    value: 98
+  },
+  {
+    name: '警戒',
+    value: 78
+  }
+]);
+const selectChange1 = () => {
+  if(selectData.value1 == '111'){
+    selectData.list = roseData1.value
+  }else if(selectData.value2 == 'tes1'){
+    selectData.list = roseData2.value
+  }else if(selectData.value2 == 'tes2'){
+    selectData.list = roseData3.value
+  }else{
+    selectData.list = roseData1.value
+  }
+}
+onBeforeMount(() => {
+  selectData.list = roseData1.value
+});
 </script>
 
 <style lang="scss" scoped>
@@ -168,6 +252,7 @@ const options = [
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .center_bg {
   width: 582px;
   box-sizing: border-box;
@@ -177,6 +262,7 @@ const options = [
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .right_bg {
   width: 642px;
   box-sizing: border-box;
@@ -484,6 +570,7 @@ const options = [
 
 .czr-sl {
   display: flex;
+
   .historyimg {
     width: 255px;
     height: 56px;
@@ -495,6 +582,7 @@ const options = [
     justify-content: space-between;
 
     padding-left: 70px;
+
     span {
       font-weight: 400;
       font-size: 16px;
@@ -507,23 +595,28 @@ const options = [
       padding-right: 10px;
     }
   }
+
   .historyimg1 {
     background-image: url(@/assets/eduImg/jyImg14.png);
     margin-right: 10px;
   }
+
   .historyimg2 {
     background-image: url(@/assets/eduImg/jyImg15.png);
   }
 }
+
 .flex11 {
   padding: 12px 0;
 }
+
 .earlyWarning {
   height: calc(100% - 10px);
 
   display: flex;
   align-items: center;
   justify-content: space-around;
+
   .earlyWarning1 {
     font-size: 26px;
     color: #ffffff;
@@ -535,10 +628,12 @@ const options = [
     display: flex;
     flex-direction: column;
     align-items: center;
+
     img {
       width: 136px;
       height: 100px;
     }
+
     .green {
       font-size: 26px;
       font-weight: bold;
@@ -551,6 +646,7 @@ const options = [
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
+
     .yellow {
       font-size: 26px;
       font-weight: bold;
@@ -563,6 +659,7 @@ const options = [
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
+
     .red {
       font-size: 26px;
       font-weight: bold;
@@ -585,6 +682,7 @@ const options = [
       display: flex;
       align-items: center;
       justify-content: center;
+
       span {
         font-weight: 500;
         font-size: 14px;
@@ -594,17 +692,21 @@ const options = [
         font-family: PingFangSC, PingFang SC;
       }
     }
+
     .historyimg1 {
       background-image: url(@/assets/eduImg/jyImg4.png);
     }
+
     .historyimg2 {
       background-image: url(@/assets/eduImg/jyImg6.png);
     }
+
     .historyimg3 {
       background-image: url(@/assets/eduImg/jyImg5.png);
     }
   }
 }
+
 .czr-bj {
   width: 529px;
   height: calc(100% - 26px);
@@ -617,22 +719,29 @@ const options = [
   .czrBox {
     height: 8vh;
   }
+
   .situation {
     width: 495px;
     height: 26px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+
   .situation1 {
     background-image: url(@/assets/eduImg/jyImg11.png);
   }
+
   .situation2 {
     background-image: url(@/assets/eduImg/jyImg12.png);
   }
+
   .situation3 {
     background-image: url(@/assets/eduImg/jyImg13.png);
   }
-};
+}
+
+;
+
 .selectLint {
   width: 94%;
   display: flex;