gx

src/view/echarts_education/edCSR.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%;height: calc(100% - 70px);min-height: 205px"></div>
+  <div ref="chart" style="width: 100%;height: 250px"></div>
 </template>
 
 <script setup>

src/view/echarts_education/edXX.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div ref="chart" style="width: 100%; height: 250px"></div>
-    ref="chart"
-    style="width: 100%; height: calc(100% - 126px); min-height: 205px"
-  ></div>
 </template>
 
 <script setup>
@@ -38,7 +35,7 @@ const data = reactive({
   list: [],
   option: {},
   value: 18,
-  namea:'',
+  namea: "",
 });
 
 // const datas = {
@@ -48,29 +45,6 @@ var colors = ["#4EC2FF", "#FF805C", "#12F7D5", "#268FFF", "#FFE986"];
 const getOption = () => {
   data.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.list.length; i < l; i++) {
-    // //       if (data.list[i].name == name) {
-    // //         target = data.list[i].value;
-    // //       }
-    // //     }
-    // //     return `   ${name}        ${target} `;
-    // //   },
-    // },
-    
     tooltip: {
       trigger: "item",
       //   formatter: "{a} <br/>{b} : {c} ({d}%)",
@@ -78,22 +52,62 @@ const getOption = () => {
     series: [
       /*内心原型图，展示整体数据概览*/
       {
-        name: "测评分析",
+        name: data.namea,
         type: "pie",
-        radius: ["20%", "70%"],
+        radius: ["30%", "60%"],
-        center: ["30%", "50%"],
+        center: ["50%", "50%"],
-        roseType: "radius",
+        roundCap: true,
+        clockWise: true,
+        startAngle: 180,
         minShowLabelAngle: 30,
+        // hoverAnimation: false,
         label: {
-          show: false,
+          //文字部分 显示内容为{b}：{c}可以换自己像显示的
+          //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
+          //{hr|}为圆点显示内容
+          formatter: "{hr|} {a|{b} {c}}\n\n",
+          color: "#fffdef", //折线图文字颜色
+          borderWidth: 10,
+          borderRadius: 4,
+          padding: [90, -60],
+          rich: {
+            //圆点位置大小配置
+            hr: {
+              //auto自定义
+              backgroundColor: "auto",
+              borderRadius: 3,
+              width: 3,
+              height: 3,
+              padding: [3, 3, 0, -12],
+            },
+            a: {
+              padding: [-12, 10, -20, 15],
+            },
+          },
+
+          textStyle: {
+            color: "white", // 改变标示文字的颜色
+            fontSize: 13, //文字大小
+          },
+         
+        },
+        labelLine: {
+          show: true, //数据标签引导线
+          normal: {
+            length: 20, // 改变标示线的长度
+            length2: 40,
+            lineStyle: {
+              color: "white", // 改变标示线的颜色
+            },
+          },
         },
         data: data.list,
       },
-      // 内圈背景
+      // 外圈
       {
         type: "pie",
-        center: ["30%", "50%"],
+        center: ["50%", "50%"],
-        radius: ["20%", "26%"],
+        radius: ["50%", "82%"],
         hoverAnimation: false,
         clockWise: false,
         itemStyle: {
@@ -114,126 +128,126 @@ const getOption = () => {
     ],
   };
 };
-let option = {
+// let option = {
-  legend: {
+//   legend: {
-    bottom: 10,
+//     bottom: 10,
-    left: "center",
+//     left: "center",
-    data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
+//     data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
-  },
+//   },
-  tooltip: {
+//   tooltip: {
-    trigger: "item",
+//     trigger: "item",
-  },
+//   },
-  series: [
+//   series: [
-    // 外圈背景
+//     // 外圈背景
-    {
-      type: "pie",
-      center: ["50%", "50%"],
-      radius: ["50%", "82%"],
-      hoverAnimation: false,
-      clockWise: false,
-      itemStyle: {
-        normal: {
-          borderWidth: 1,
-          borderColor: "rgba(193, 229, 255, .1)",
-          color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
-            {
-              offset: 1,
-              color: "rgba(127, 242, 255, .2)",
-            },
-            {
-              offset: 0,
-              color: "rgba(109, 195, 255, 0)",
-            },
-          ]),
-        },
-      },
-      tooltip: {
-        show: false,
-      },
-      label: {
-        show: false,
-      },
-      data: [100],
-    },
-    /*内心原型图，展示整体数据概览*/
-    {
-      name: "城镇",
-      type: "pie",
-      roundCap: true,
-      clockWise: true,
-      startAngle: 180,
-      labelLine: {
-        show: true, //数据标签引导线
-        // length: 30,
-        lineStyle: {
-          width: 1,
-          type: "solid",
-          color: "#fffdef",
-        },
-      },
-      label: {
-        //文字部分 显示内容为{b}：{c}可以换自己像显示的
-        //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
-        //{hr|}为圆点显示内容
-        formatter: "{a|{b}：{c}}\n{hr|}",
-        //折线图文字颜色
-        color: "#fffdef",
-        rich: {
-          //圆点位置大小配置
-          hr: {
-            //auto自定义
-            backgroundColor: "auto",
-            borderRadius: 3,
-            width: 3,
-            height: 3,
-            padding: [3, 3, 0, -12],
-          },
-          a: {
-            padding: [-12, 10, -20, 15],
-          },
-        },
-      },
-      radius: ["30%", "60%"],
-      hoverAnimation: false,
-      center: ["50%", "50%"],
-      data: [
-        { value: 44, name: "副高级" },
-        { value: 44, name: "正高级" },
-        { value: 44, name: "未定级" },
-        { value: 44, name: "员级" },
-        { value: 41, name: "中级" },
-        { value: 30, name: "助理级" },
-      ],
-    },
-
 //     {
-    //   name: "外边框",
 //       type: "pie",
-    //   clockWise: false, //顺时加载
-    //   hoverAnimation: false, //鼠标移入变大
 //       center: ["50%", "50%"],
-    //   radius: ["75%", "75%"],
+//       radius: ["50%", "82%"],
-    //   label: {
+//       hoverAnimation: false,
-    //     normal: {
+//       clockWise: false,
-    //       show: false,
-    //     },
-    //   },
-    //   data: [
-    //     {
-    //       value: 9,
-    //       name: "",
 //       itemStyle: {
 //         normal: {
-
+//           borderWidth: 1,
-    //           borderWidth: 2,
+//           borderColor: "rgba(193, 229, 255, .1)",
-    //           borderColor: "#61bad3",
+//           color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+//             {
+//               offset: 1,
+//               color: "rgba(127, 242, 255, .2)",
+//             },
+//             {
+//               offset: 0,
+//               color: "rgba(109, 195, 255, 0)",
+//             },
+//           ]),
+//         },
+//       },
+//       tooltip: {
+//         show: false,
+//       },
+//       label: {
+//         show: false,
+//       },
+//       data: [100],
+//     },
+//     /*内心原型图，展示整体数据概览*/
+//     {
+//       name: "城镇",
+//       type: "pie",
+//       roundCap: true,
+//       clockWise: true,
+//       startAngle: 180,
+//       labelLine: {
+//         show: true, //数据标签引导线
+//         // length: 30,
+//         lineStyle: {
+//           width: 1,
+//           type: "solid",
+//           color: "#fffdef",
+//         },
+//       },
+//       label: {
+//         //文字部分 显示内容为{b}：{c}可以换自己像显示的
+//         //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
+//         //{hr|}为圆点显示内容
+//         formatter: "{a|{b}：{c}}\n{hr|}",
+//         //折线图文字颜色
+//         color: "#fffdef",
+//         rich: {
+//           //圆点位置大小配置
+//           hr: {
+//             //auto自定义
+//             backgroundColor: "auto",
+//             borderRadius: 3,
+//             width: 3,
+//             height: 3,
+//             padding: [3, 3, 0, -12],
+//           },
+//           a: {
+//             padding: [-12, 10, -20, 15],
 //           },
 //         },
 //       },
+//       radius: ["30%", "60%"],
+//       center: ["50%", "50%"],
+//       hoverAnimation: false,
+//       data: [
+//         { value: 44, name: "副高级" },
+//         { value: 44, name: "正高级" },
+//         { value: 44, name: "未定级" },
+//         { value: 44, name: "员级" },
+//         { value: 41, name: "中级" },
+//         { value: 30, name: "助理级" },
 //       ],
 //     },
-  ],
+
-};
+//     // {
+//     //   name: "外边框",
+//     //   type: "pie",
+//     //   clockWise: false, //顺时加载
+//     //   hoverAnimation: false, //鼠标移入变大
+//     //   center: ["50%", "50%"],
+//     //   radius: ["75%", "75%"],
+//     //   label: {
+//     //     normal: {
+//     //       show: false,
+//     //     },
+//     //   },
+//     //   data: [
+//     //     {
+//     //       value: 9,
+//     //       name: "",
+//     //       itemStyle: {
+//     //         normal: {
+
+//     //           borderWidth: 2,
+//     //           borderColor: "#61bad3",
+//     //         },
+//     //       },
+//     //     },
+//     //   ],
+//     // },
+//   ],
+// };
 
 const setChart = () => {
   // Vue3中： 需要引入
@@ -248,13 +262,20 @@ watch(
     data.list = newVal;
     getOption();
     setChart();
-    console.log("学校", newVal, oldVal);
+    // console.log("学校", newVal, oldVal);
+  }
+);
+watch(
+  () => props.active,
+  (newVal, oldVal) => {
+    data.namea = newVal;
+    getOption();
+    setChart();
   }
 );
 
 // 使用生命钩子
 onMounted(() => {
-    console.log("学校11", props.list,props.active);
   data.list = props.list;
   data.namea = props.active;
 

src/view/echarts_education/pie.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="chart"
-    style="width: 50%; height: calc(100% - 46px); min-height: 205px"
+    style="width: 50%;height: 280px"
   ></div>
 </template>
 

src/view/echarts_education/pie1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
+    <div ref="chart" style="width: 50%;height: 220px;"></div>
 </template>
 
 <script setup>

src/view/echarts_education/pie2.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
+    <div ref="chart" style="width: 50%;height: 220px;"></div>
 </template>
 
 <script setup>

src/view/echarts_education/pie3.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
+    <div ref="chart" style="width: 50%; height: 220px;"></div>
 </template>
 
 <script setup>

src/view/echarts_education/pie4.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
+    <div ref="chart" style="width: 50%;height: 220px;"></div>
 </template>
 
 <script setup>

src/view/echarts_education/pieRose.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width: 100%; height:calc(100% - 126px);min-height:205px;"></div>
+    <div ref="chart" style="width: 100%; height:370px;"></div>
 </template>
 
 <script setup>

src/view/echarts_yl/eP2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:205px;"></div>
+  <div ref="chart" style="width: 100%; height:250px;"></div>
 </template>
 
 <script setup >

src/view/echarts_yl/eP3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:205px;"></div>
+  <div ref="chart" style="width: 100%; height:300px;"></div>
 </template>
 
 <script setup >

src/view/echarts_yl/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:205px;"></div>
+  <div ref="chart" style="width: 100%; height:250px;"></div>
 </template>
 
 <script setup >

src/view/education.vue

@@ -105,7 +105,6 @@
         <div
           style="
             width: 100%;
-            height: calc(100% - 46px);
             display: flex;
             flex-wrap: wrap;
           "
@@ -883,7 +882,8 @@ onBeforeMount(() => {
 
 .czr-bj {
   width: 529px;
-  height: calc(100% - 26px);
+  // height: calc(100% - 26px);
+  // height: 200px;
   background: rgba(0, 103, 165, 0.18);
   box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
   border-radius: 2px;
@@ -891,7 +891,7 @@ onBeforeMount(() => {
   // box-sizing: border-box;
 
   .czrBox {
-    height: 7vh;
+    height: 104px;
     .column {
       height: calc(100% - 26px);
       overflow-y: auto;
@@ -1065,7 +1065,7 @@ onBeforeMount(() => {
   }
   .rolling {
     width: 100%;
-    height: 14vh;
+    height: 200px;
     // height: calc(100% - 26px);
     overflow-y: auto;
     display: flex;