no message

app/src/main.js

@@ -1,7 +1,6 @@
 import Vue from "vue";
 import { createPinia, PiniaVuePlugin } from "pinia";
 import DataVComponent from "@zhgkpt/components";
-import VScaleScreen from 'v-scale-screen'
 import App from "./App.vue";
 import router from "./router";
 
@@ -9,7 +8,6 @@ import "./assets/main.css";
 
 Vue.use(PiniaVuePlugin);
 Vue.use(DataVComponent);
-Vue.component("v-scale-screen", VScaleScreen);
 
 new Vue({
   router,

app/src/views/HomeView.vue

@@ -15,7 +15,7 @@
             style="margin-bottom: 6px"
             title="基础信息"
           >
-            1111
+          <FirstHight/>
           </border-panel>
           <border-panel
             height="346px"

app/src/views/components/FirstHight.vue

@@ -1,226 +1,386 @@
 <template>
     <div>
 <div>
-    <div ref="chart" class="item" style="width: 187px; height: 219px" />
+    <div ref="chart" class="item" style="width: 240px; height: 209px" />
 </div>
     </div>
 </template>
 
 <script >
+import * as echarts from 'echarts'
 export default {
     data() {
     return {
       chart: null,
     };
-  },
-    watch: {
-    caseList: {
-      handler(val) {
-        if (val.length > 0) {
-          this.$nextTick(() => {
-            // 获取dom容器
-            const chartDom = this.$refs.chart;
-            // 初始化图表实例
-            this.chart = echarts.init(chartDom);
-            this.initChart(val);
-          });
-        }
-      },
-      immediate: true,
-      deep: true,
-    },
   },
   mounted(){
     const chartDom = this.$refs.chart;
   //   // 初始化图表实例
     this.chart = echarts.init(chartDom);
     this.initChart();
-    console.log(22222, this.CaseList);
   },
 methods:{
     initChart(data){
-     const option={
-        backgroundColor: "#031845",
-     color: [
-    "#2edfa3",
-    "#bce672",
-    "#ff4777",
-    "#70f3ff",
-    "#4b5cc4",
-    "#f47983",
-    "#8d4bbb",
-    "#6635EF",
-    "#FFAFDA",
-  ],
-  tooltip: {
-    trigger: "item",
-    formatter: "{a} <br/>{b}: {c} ({d}%)",
-  },
+    let angle = 0; //角度，用来做简单的动画效果的
+    let value = 80;
+    var timerId;
+    var outerRidus1 = 0.8
+    var outerRidus2 = 0.85
+ const  option = {
+//   backgroundColor: '#090d1a',
   legend: {
-    orient: "horizontal",
-    icon: "circle",
-    bottom: 20,
-    x: "center",
-    textStyle: {
-      color: "#fff",
+    // orient: 'vertical',
+        right: '0',
+        bottom:'-10px',
+        itemWidth: 14,
+        itemGap: 12,
+        textStyle: {
+        color: '#FFFFFF',
+        fontSize: 12,
+        lineHeight: 20,
     },
-    data: [
-      "独居",
-      "与配偶同住",
-      "	与子女同住",
-      "仅与重度残疾子女共同居住",
-      "与配偶及子女同住",
-      "与其他亲属同住",
-      "与父母同住",
-      "与其他人同住",
-    ],
+  },
+  tooltip: {
+    show: true,
   },
   series: [
+    // 最外层圆
     {
-      name: "访问来源",
-      type: "pie",
-      selectedMode: "single",
-      radius: [0, "38%"],
-
-      label: {
-        normal: {
-          show: false,
-          position: "inner",
-          formatter: "{d}%",
-          textStyle: {
-            color: "#fff",
-            fontWeight: "normal",
-            fontSize: 20,
-          },
-        },
-      },
-      labelLine: {
-        normal: {
-          show: false,
-        },
-      },
+      type: 'pie',
+      radius: ['75%', '55%'],
+      center: ['50%', '50%'],
+      hoverAnimation: false,
       data: [
         {
-          value: 100,
-          name: "独居",
-        },
-        {
-          value: 100,
-          name: "与配偶同住",
-        },
-        {
-          value: 100,
-          name: "与子女同住",
-        },
-        {
-          value: 100,
-          name: "仅与重度残疾子女共同居住",
-        },
-        {
-          value: 100,
-          name: "与配偶及子女同住",
-        },
-        {
-          value: 100,
-          name: "与其他亲属同住",
+          value: 30,
+        //   name: '运行中',
+          itemStyle: {
+            normal: {
+              color: {
+                // 完成的圆环的颜色
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0060FF', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#00EFFE', // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+          },
         },
         {
-          value: 100,
-          name: "与父母同住",
+          value: 30,
+        //   name: '已停止',
+          itemStyle: {
+            normal: {
+              color: {
+                // 完成的圆环的颜色
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#44D7B6', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#6DD400', // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+          },
         },
         {
-          value: 100,
-          name: "与其他人同住",
-        },
-      ],
-    },
-    {
-      name: "访问来源",
-      type: "pie",
-      radius: ["40%", "42%"],
-      label: {
-        normal: {
-          formatter: "{b|{b}}\n{hr|}\n{d|{d}%}",
-          rich: {
-            b: {
-              fontSize: 20,
-              color: "#fff",
-              align: "left",
-              padding: 4,
-            },
-            hr: {
-              borderColor: "#12EABE",
-              width: "100%",
-              borderWidth: 2,
-              height: 0,
-            },
-            d: {
-              fontSize: 20,
-              color: "#fff",
-              align: "left",
-              padding: 4,
-            },
-            c: {
-              fontSize: 20,
-              color: "#fff",
-              align: "center",
-              padding: 4,
+          value: 40,
+        //   name: '未上线',
+          itemStyle: {
+            normal: {
+              color: {
+                // 完成的圆环的颜色
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#FFA600', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#FEDB65', // 100% 处的颜色
+                  },
+                ],
+              },
             },
           },
         },
+      ],
+      label: {
+        show: true,
+        position: 'outside',
+        formatter: '{d}%',
+        color: '#FFFFFF',
       },
       labelLine: {
         normal: {
-          show: true,
-          length: 20,
-          length2: 20,
+          length: 10,
           lineStyle: {
-            type: "dashed",
-            width: 2,
+            width: 1,
           },
         },
       },
+    },
+    // 内圆 + 中间文字
+    {
+      type: 'pie',
+      radius: ['60%', '40%'],
+      center: ['50%', '50%'],
+      hoverAnimation: false,
+      z: 10,
+    //   label: {
+    //     position: 'center',
+    //     formatter: () => {
+    //       return '佣金总额\r\n{total|100} 个';
+    //     },
+    //     rich: {
+    //       total: {
+    //         fontSize: 24,
+    //         color: '#FFFFFF',
+    //       },
+    //     },
+    //     color: '#FFFFFF',
+    //     fontSize: 16,
+    //     lineHeight: 30,
+    //   },
       data: [
         {
-          value: 100,
-          name: "独居",
-        },
-        {
-          value: 100,
-          name: "与配偶同住",
-        },
-        {
-          value: 100,
-          name: "与子女同住",
-        },
-        {
-          value: 100,
-          name: "仅与重度残疾子女共同居住",
-        },
-        {
-          value: 100,
-          name: "与配偶及子女同住",
-        },
-        {
-          value: 100,
-          name: "与其他亲属同住",
+          value: 30,
+          name: '公共建筑',
+          itemStyle: {
+            normal: {
+              color: {
+                // 完成的圆环的颜色
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0060FF', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#00EFFE', // 100% 处的颜色
+                  },
+                ],
+              },
+              opacity: 0.5,
+            },
+          },
         },
         {
-          value: 100,
-          name: "与父母同住",
+          value: 30,
+          name: '居民建筑',
+          itemStyle: {
+            normal: {
+              color: {
+                // 完成的圆环的颜色
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#44D7B6', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#6DD400', // 100% 处的颜色
+                  },
+                ],
+              },
+              opacity: 0.5,
+            },
+          },
         },
         {
-          value: 100,
-          name: "与其他人同住",
+          value: 40,
+          name: '工业建筑',
+          itemStyle: {
+            normal: {
+              color: {
+                // 完成的圆环的颜色
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#FFA600', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#FEDB65', // 100% 处的颜色
+                  },
+                ],
+              },
+              opacity: 0.5,
+            },
+          },
         },
       ],
+      labelLine: {
+        show: false,
+      },
+    },
+
+    // 紫色线1 + 点
+    {
+    //   name: 'ring5',
+      type: 'custom',
+      coordinateSystem: 'none',
+      renderItem: function (params, api) {
+        return {
+          type: 'arc',
+          shape: {
+            cx: api.getWidth() / 2,
+            cy: api.getHeight() / 2,
+            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1 ,// 180,
+            startAngle: ((0 + angle) * Math.PI) / 180,
+            endAngle: ((90 + angle) * Math.PI) / 180,
+          },
+          style: {
+            stroke: '#8383FA',
+            fill: 'transparent',
+            lineWidth: 1.5,
+          },
+          silent: true,
+        };
+      },
+      data: [0],
+    },
+    // 紫色线1点
+    {
+    //   name: 'ring5', //紫点
+      type: 'custom',
+      coordinateSystem: 'none',
+      renderItem: function (params, api) {
+        let x0 = api.getWidth() / 2;
+        let y0 = api.getHeight() / 2;
+        let r =  Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
+        let point = getCirlPoint(x0, y0, r, 0 + angle);
+        return {
+          type: 'circle',
+          shape: {
+            cx: point.x,
+            cy: point.y,
+            r: 4,
+          },
+          style: {
+            stroke: '#8450F9', //绿
+            fill: '#8450F9',
+          },
+          silent: true,
+        };
+      },
+      data: [0],
+    },
+    // 蓝色
+    {
+    //   name: 'ring5',
+      type: 'custom',
+      coordinateSystem: 'none',
+      renderItem: function (params, api) {
+        return {
+          type: 'arc',
+          shape: {
+            cx: api.getWidth() / 2,
+            cy: api.getHeight() / 2,
+              r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1 ,// 180,
+            startAngle: ((180 + angle) * Math.PI) / 180,
+            endAngle: ((270 + angle) * Math.PI) / 180,
+          },
+          style: {
+            stroke: '#4386FA',
+            fill: 'transparent',
+            lineWidth: 1.5,
+          },
+          silent: true,
+        };
+      },
+      data: [0],
+    },
+    {
+    //   name: 'ring5', // 蓝色
+      type: 'custom',
+      coordinateSystem: 'none',
+      renderItem: function (params, api) {
+        let x0 = api.getWidth() / 2;
+        let y0 = api.getHeight() / 2;
+        let  r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1// 180
+        let point = getCirlPoint(x0, y0, r, 180 + angle);
+        return {
+          type: 'circle',
+          shape: {
+            cx: point.x,
+            cy: point.y,
+            r: 4,
+          },
+          style: {
+            stroke: '#4386FA', //绿
+            fill: '#4386FA',
+          },
+          silent: true,
+        };
+      },
+      data: [0],
+    },
+    // 橘色
+    {
+    //   name: 'ring5',
+      type: 'custom',
+      coordinateSystem: 'none',
+      renderItem: function (params, api) {
+        return {
+          type: 'arc',
+          shape: {
+            cx: api.getWidth() / 2,
+            cy: api.getHeight() / 2,
+             r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2 ,// 200,
+            startAngle: ((250 + -angle) * Math.PI) / 180,
+            endAngle: ((10 + -angle) * Math.PI) / 180,
+          },
+          style: {
+            stroke: '#0CD3DB',
+            fill: 'transparent',
+            lineWidth: 1.5,
+          },
+          silent: true,
+        };
+      },
+      data: [0],
     },
   ],
-     }
-     this.chart.setOption(option);
+};
+
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+function draw() {
+  angle = angle + 3;
+  _chart.setOption(option, true);
+  //window.requestAnimationFrame(draw);
+}
+if (timerId) {
+  clearInterval(timerId);
+}
+timerId = setInterval(function () {
+  //用setInterval做动画感觉有问题
+  draw();
+}, 100);
+    this.chart.setOption(option);
       //自适应图表
       window.onresize = this.chart.resize;
-    }
+    }  
 }
     
 }