本年度全国警犬统计 样式

src/views/sjfx/components/allDogCount.vue

+<template>
+  <div
+    class="dogCountClass"
+    v-resize="resizes"
+  >
+    <div class="topTitle topTitleEchart">本年度全国警犬统计</div>
+    <div
+      class="myCharts"
+      id="myEacherForAllDogCount"
+    ></div>
+  </div>
+</template>
+
+<script>
+import resize from "vue-resize-directive";
+
+export default {
+  directives: {
+    resize,
+  },
+  data() {
+    return {
+      myChart: null,
+      legendData: ["工作犬", "种犬", "退役犬"],
+      xAxisData: ["广西", "广东", "北京", "安徽", "湖南", "浙江", "西藏"],
+      offsetZero: ["#3C9FF8", "#2EDCB2", "#FF9D2A"],
+      offsetOne: ["#3C9FF8", "#2EDCB2", "#FF9D2A"],
+    };
+  },
+  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("myEacherForAllDogCount")
+      );
+
+      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],
+          },
+          {
+            name: "种犬",
+            type: "bar",
+            stack: "",
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: 8,
+            barGap: "50%",
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: this.offsetZero[1],
+                },
+                {
+                  offset: 1,
+                  color: this.offsetOne[1],
+                },
+              ]),
+              borderRadius: [4, 4, 0, 0],
+            },
+            data: [54, 12, 18, 213, 325, 3, 54],
+          },
+          {
+            name: "退役犬",
+            type: "bar",
+            stack: "",
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: 8,
+            barGap: "50%",
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: this.offsetZero[2],
+                },
+                {
+                  offset: 1,
+                  color: this.offsetOne[2],
+                },
+              ]),
+              borderRadius: [4, 4, 0, 0],
+            },
+            data: [212, 0, 23, 43, 6, 23, 44],
+          },
+        ],
+      };
+
+      this.myChart.setOption(options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../style/sjfxStyle.scss";
+</style>

src/views/sjfx/components/topContent.vue

@@ -65,7 +65,7 @@
         <p class="top01 ellipsis1">技术人员总数</p>
         <p class="top02 ellipsis1">30000</p>
         <p class="top03 ellipsis1">
-          <span class="span01">240</span>
+          <span class="span01 upColor">240</span>
           <img
             src="../images/up@2x.png"
             class="img01"

src/views/sjfx/sjfx.vue

 <template>
   <div class="sjfxClass">
     <topContent></topContent>
+    <allDogCount></allDogCount>
   </div>
 </template>
 
 <script>
 import topContent from "./components/topContent.vue";
+import allDogCount from "./components/allDogCount.vue";
 
 export default {
   components: {
     topContent,
+    allDogCount,
   },
   data() {
     return {};

src/views/sjfx/style/sjfxStyle.scss

@@ -90,4 +90,41 @@
       }
     }
   }
+
+  .dogCountClass {
+    width: 100%;
+    height: 280px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    margin-top: 20px;
+    position: relative;
+  }
+
+  .topTitle {
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #383838;
+    border-bottom: 1px solid #E5E5E5;
+  }
+
+  .topTitleEchart {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 40px);
+  }
+
+  .myCharts {
+    width: 100%;
+    height: 100%;
+    width: calc(100% - 40px);
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
\ No newline at end of file