no message

app/src/components/Headers.vue

@@ -111,6 +111,7 @@ font-size: 20px;
 img{
   width: 16px;
   height: 15px;
+  margin-right: 8px;
 }
 .tab-list{
     width: 100%;
@@ -118,7 +119,7 @@ img{
     justify-content: space-between;
 }
 .bg-img{
-    width: 138px;
+    width: 118px;
     height: 48px;
     font-size: 18px;
     background: url('../assets/btn.png')  no-repeat;

app/src/views/HomeView.vue

@@ -9,6 +9,9 @@
         <div>
         <border-panel height="302px" style="margin-bottom: 6px;" title="基础信息">
           1111
+          <div class="firsts">
+            <FirstHight/>
+          </div>
         </border-panel>
         <border-panel height="346px" style="margin-bottom: 6px;"  title="隐患排查（一楼一策）">
           2222
@@ -42,8 +45,9 @@
 </template>
 <script >
 import Headers from "@/components/Headers.vue";
+import FirstHight from "./components/FirstHight.vue";
 export default{
-components:{Headers}
+components:{Headers,FirstHight}
 }
 </script>
 <style scoped>
@@ -55,4 +59,5 @@ components:{Headers}
   overflow-x: hidden;
   overflow-y: scroll;
 }
+
 </style>

app/src/views/components/FirstHight.vue

@@ -0,0 +1,231 @@
+<template>
+    <div>
+<div>
+    <div ref="chart" class="item" style="width: 187px; height: 219px" />
+</div>
+    </div>
+</template>
+
+<script >
+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}%)",
+  },
+  legend: {
+    orient: "horizontal",
+    icon: "circle",
+    bottom: 20,
+    x: "center",
+    textStyle: {
+      color: "#fff",
+    },
+    data: [
+      "独居",
+      "与配偶同住",
+      "	与子女同住",
+      "仅与重度残疾子女共同居住",
+      "与配偶及子女同住",
+      "与其他亲属同住",
+      "与父母同住",
+      "与其他人同住",
+    ],
+  },
+  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,
+        },
+      },
+      data: [
+        {
+          value: 100,
+          name: "独居",
+        },
+        {
+          value: 100,
+          name: "与配偶同住",
+        },
+        {
+          value: 100,
+          name: "与子女同住",
+        },
+        {
+          value: 100,
+          name: "仅与重度残疾子女共同居住",
+        },
+        {
+          value: 100,
+          name: "与配偶及子女同住",
+        },
+        {
+          value: 100,
+          name: "与其他亲属同住",
+        },
+        {
+          value: 100,
+          name: "与父母同住",
+        },
+        {
+          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,
+            },
+          },
+        },
+      },
+      labelLine: {
+        normal: {
+          show: true,
+          length: 20,
+          length2: 20,
+          lineStyle: {
+            type: "dashed",
+            width: 2,
+          },
+        },
+      },
+      data: [
+        {
+          value: 100,
+          name: "独居",
+        },
+        {
+          value: 100,
+          name: "与配偶同住",
+        },
+        {
+          value: 100,
+          name: "与子女同住",
+        },
+        {
+          value: 100,
+          name: "仅与重度残疾子女共同居住",
+        },
+        {
+          value: 100,
+          name: "与配偶及子女同住",
+        },
+        {
+          value: 100,
+          name: "与其他亲属同住",
+        },
+        {
+          value: 100,
+          name: "与父母同住",
+        },
+        {
+          value: 100,
+          name: "与其他人同住",
+        },
+      ],
+    },
+  ],
+     }
+     this.chart.setOption(option);
+      //自适应图表
+      window.onresize = this.chart.resize;
+    }
+}
+    
+}
+</script>
+
+<style scoped>
+
+</style>