gx

src/view/echarts_education/pieRose.vue

@@ -9,48 +9,94 @@ import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
+var colors = [
+    '#0278e6',
+    '#34d160',
+    '#fcdf39',
+    '#f19611',
+    '#00c6ff',
+    '#f76363'
+]
+
 var data = [
     {
-        name: '农业专业合作社',
-        value: 7
+        name: '正常',
+        value: 17
     },
     {
-        name: '农业企业',
-        value: 6
+        name: '关注',
+        value: 16
     },
     {
-        name: '农业冷藏冷库',
+        name: '追踪',
         value: 14
     },
     {
-        name: '农业园区',
-        value: 4
+        name: '异常',
+        value: 8
+    },
+    {
+        name: '警戒',
+        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} `;
+        },
+    },
+    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
+        },
         // 内圈背景
         {
             type: "pie",
-            center: ["50%", "50%"],
-            radius: ["20%", "32%"],
+            center: ["30%", "50%"],
+            radius: ["20%", "26%"],
             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)",
-                        },
-                    ]),
+                    color: 'rgba(14, 59, 123, 0.60)'
                 },
             },
             tooltip: {
@@ -61,39 +107,6 @@ let option = {
             },
             data: [100],
         },
-        /*内心原型图，展示整体数据概览*/
-        {
-            name: '半径模式',
-            type: 'pie',
-            radius: ['20%', '50%'],
-            center: ['35%', '50%'],
-            roseType: 'radius',
-            minShowLabelAngle: 60,
-            label: {
-                show: true,
-                normal: {
-                    position: 'outside',
-                    fontSize: 16,
-                    formatter: (params) => {
-                        return (
-                            params.name +
-                            //   '(' +
-                            //   ((params.value / total) * 100).toFixed(2) +
-                            //   '%)' +
-                            //   '\n' +
-                            params.value +
-                            '个'
-                        );
-                    }
-                }
-            },
-            labelLine: {
-                length: 1,
-                length2: 10,
-                smooth: true
-            },
-            data: data
-        }
     ]
 };
 

src/view/education.vue

@@ -14,7 +14,7 @@
         <div class="yd_title left_2"></div>
         <div class="selectLint">
           <div class="selectBox">
-            <el-select v-model="value" placeholder="Select" size="large">
+            <el-select v-model="value" placeholder="Select" size="large" class="selClass">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </div>
@@ -410,9 +410,9 @@ const options = [
 
   .selectBox {
     width: 48%;
-    background-image: url(@/assets/eduImg/title3.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+    background-image: url(@/assets/eduImg/jyImg7.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
 }
 </style>
@@ -421,22 +421,20 @@ const options = [
   .el-select--large .el-select__wrapper {
     font-size: 18px !important;
   }
+
   .el-select__wrapper {
-    background-color: rgba(255,255,255,0) !important;
-    
+    background-color: rgba(255, 255, 255, 0) !important;
+
   }
-  .el-select__placeholder{
+
+  .el-select__placeholder {
     color: #fff !important;
   }
-  .el-select__caret{
+
+  .el-select__caret {
     color: #fff !important;
     font-size: 18px !important;
   }
-  .el-select-dropdown__item{
-    color: #fff !important;
-  }
-  .el-select-dropdown__wrap{
 
-  }
 }
 </style>