本年度全国警犬复训统计 样式

src/views/sjfx/components/messageRemind.vue

+<template>
+  <div class="messageClass">123</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../style/sjfxStyle.scss";
+</style>

src/views/sjfx/components/retrainingCount.vue

+<template>
+  <div
+    class="retrainingClass"
+    v-resize="resizes"
+  >
+    <div class="topTitle topTitleEchart">本年度全国警犬复训统计</div>
+    <div
+      class="myCharts"
+      id="myEacherForRetrainingCount"
+    ></div>
+  </div>
+</template>
+
+<script>
+import resize from "vue-resize-directive";
+
+export default {
+  directives: {
+    resize,
+  },
+  data() {
+    return {
+      myChart: null,
+      legendData: ["复训数"],
+      xAxisData: [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+    };
+  },
+  mounted() {
+    this.drawEcharts();
+  },
+  methods: {
+    resizes() {
+      if (this.myChart && typeof this.myChart === "object")
+        this.myChart.resize();
+    },
+    drawEcharts() {
+      if (this.myChart) this.myChart.dispose();
+
+      this.myChart = this.$echarts.init(
+        document.getElementById("myEacherForRetrainingCount")
+      );
+
+      let options = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "none", // shadow
+            shadowStyle: {
+              color: "rgba(28, 143, 250, 0.1)",
+            },
+          },
+          backgroundColor: "#FFFFFF",
+          padding: [12, 8],
+          extraCssText:
+            "box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
+          textStyle: {
+            color: "#242424",
+            fontSize: 12,
+          },
+        },
+        legend: {
+          top: 20,
+          right: 0,
+          padding: [0, 0, 24, 0],
+          itemGap: 20,
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: "#5E5E5E",
+            fontSize: 12,
+          },
+          data: this.legendData,
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 35,
+          top: "25%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            offset: 10,
+            axisLabel: {
+              show: true,
+              fontSize: 12,
+              color: "#5E5E5E",
+              fontFamily: "Microsoft YaHei",
+              // interval: 0,
+              // rotate: 30,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#E5E5E5",
+              },
+            },
+            data: this.xAxisData,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              show: true,
+              fontSize: 12,
+              color: "#9AA1A9",
+              fontFamily: "Microsoft YaHei",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#E5E5E5",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "复训数",
+            type: "line",
+            smooth: true,
+            // emphasis: {
+            //   itemStyle: {
+            //     borderColor: "#3C9FF8",
+            //   },
+            // },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(60, 159, 248, 0.5)",
+                },
+                {
+                  offset: 0.5,
+                  color: "rgba(60, 159, 248, 0.3)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(60, 159, 248, 0.1)",
+                },
+              ]),
+            },
+            itemStyle: {
+              color: "#3C9FF8",
+            },
+            data: [12, 43, 121, 0, 4, 99, 1, 23, 212, 43, 5, 311],
+          },
+        ],
+      };
+
+      this.myChart.setOption(options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../style/sjfxStyle.scss";
+</style>

src/views/sjfx/sjfx.vue

@@ -2,17 +2,28 @@
   <div class="sjfxClass">
     <topContent></topContent>
     <allDogCount></allDogCount>
+    <div
+      class="spaceBetween"
+      style="margin-top: 20px;width: 100%;height: 280px;"
+    >
+      <retrainingCount></retrainingCount>
+      <messageRemind></messageRemind>
+    </div>
   </div>
 </template>
 
 <script>
 import topContent from "./components/topContent.vue";
 import allDogCount from "./components/allDogCount.vue";
+import retrainingCount from "./components/retrainingCount.vue";
+import messageRemind from "./components/messageRemind.vue";
 
 export default {
   components: {
     topContent,
     allDogCount,
+    retrainingCount,
+    messageRemind,
   },
   data() {
     return {};

src/views/sjfx/style/sjfxStyle.scss

@@ -100,6 +100,20 @@
     position: relative;
   }
 
+  .retrainingClass {
+    width: calc(100% - 450px);
+    height: 280px;
+    background: #FFFFFF;
+    border-radius: 8px;
+  }
+
+  .messageClass {
+    width: 435px;
+    height: 280px;
+    background: #FFFFFF;
+    border-radius: 8px;
+  }
+
   .topTitle {
     width: 100%;
     height: 48px;