工作犬归口警种统计 样式

src/views/sjfx/components/policeDogCount.vue

+<template>
+  <div
+    class="policeDogClass"
+    v-resize="resizes"
+  >
+    <div class="topTitle topTitleEchart">警用犬种统计</div>
+    <div
+      class="myCharts"
+      id="myEacherForPoliceDogCount"
+    ></div>
+  </div>
+</template>
+
+<script>
+import resize from "vue-resize-directive";
+
+export default {
+  directives: {
+    resize,
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  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("myEacherForPoliceDogCount")
+      );
+
+      let options = {};
+
+      this.myChart.setOption(options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../style/sjfxStyle.scss";
+</style>

src/views/sjfx/components/workDogCount.vue

+<template>
+  <div
+    class="workDogClass"
+    v-resize="resizes"
+  >
+    <div class="topTitle topTitleEchart">工作犬归口警种统计</div>
+    <div
+      class="myCharts"
+      id="myEacherForWorkDogCount"
+    ></div>
+  </div>
+</template>
+
+<script>
+import resize from "vue-resize-directive";
+
+export default {
+  directives: {
+    resize,
+  },
+  data() {
+    return {
+      myChart: null,
+      legendData: ["工作犬数"],
+      xAxisData: ["刑侦", "巡警", "经侦", "禁毒", "国保", "反恐", "移管局"],
+      offsetZero: ["#74D4FF"],
+      offsetOne: ["#74D4FF"],
+    };
+  },
+  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("myEacherForWorkDogCount")
+      );
+
+      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: "bar",
+            stack: "pc",
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: 8,
+            barGap: "50%",
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: this.offsetZero[0],
+                },
+                {
+                  offset: 1,
+                  color: this.offsetOne[0],
+                },
+              ]),
+              borderRadius: [4, 4, 0, 0],
+            },
+            data: [12, 43, 121, 0, 4, 99, 1],
+          },
+        ],
+      };
+
+      this.myChart.setOption(options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../style/sjfxStyle.scss";
+</style>

src/views/sjfx/sjfx.vue

@@ -9,6 +9,13 @@
       <retrainingCount></retrainingCount>
       <messageRemind></messageRemind>
     </div>
+    <div
+      class="spaceBetween"
+      style="margin-top: 20px;width: 100%;height: 280px;"
+    >
+      <workDogCount></workDogCount>
+      <policeDogCount></policeDogCount>
+    </div>
   </div>
 </template>
 
@@ -17,6 +24,8 @@ import topContent from "./components/topContent.vue";
 import allDogCount from "./components/allDogCount.vue";
 import retrainingCount from "./components/retrainingCount.vue";
 import messageRemind from "./components/messageRemind.vue";
+import workDogCount from "./components/workDogCount.vue";
+import policeDogCount from "./components/policeDogCount.vue";
 
 export default {
   components: {
@@ -24,6 +33,8 @@ export default {
     allDogCount,
     retrainingCount,
     messageRemind,
+    workDogCount,
+    policeDogCount,
   },
   data() {
     return {};

src/views/sjfx/style/sjfxStyle.scss

@@ -166,6 +166,22 @@
     }
   }
 
+  .workDogClass {
+    width: 49.3%;
+    height: 280px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    position: relative;
+  }
+
+  .policeDogClass {
+    width: 49.3%;
+    height: 280px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    position: relative;
+  }
+
   .topTitle {
     width: 100%;
     height: 48px;