工作犬专业方向统计 改为饼图

src/views/dataJq/dataV.vue

@@ -36,7 +36,10 @@
           </div>
           <!-- 工作犬专业方向统计 -->
           <div style="margin-top: 20px">
-            <dogMajor :qzCount="qzCount"></dogMajor>
+            <dogMajor
+              :qzCount="qzCount"
+              v-if="qzCount.major"
+            ></dogMajor>
           </div>
         </div>
       </div>

src/views/dataJq/dogMajor.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script>
-import * as echarts from "echarts";
 export default {
   props: {
     qzCount: {
@@ -23,119 +22,106 @@ export default {
   },
   data() {
     return {
-      offsetZero: [
-        "rgba(78, 187, 255, 1)",
-        "rgba(241, 166, 54, 1)",
-        "rgba(255, 102, 78, 1)",
-        "rgba(46, 223, 209, 1)",
-        "rgba(255, 172, 39, 1)",
-      ],
-      offsetOne: [
-        "rgba(134, 223, 255, 0.05)",
-        "rgba(241, 166, 54, 0.05)",
-        "rgba(255, 102, 78, 0.05)",
-        "rgba(46, 223, 209, 0.05)",
-        "rgba(255, 172, 39, 0.05)",
+      myChart: null,
+
+      colorDatas: [
+        "#5DECE8",
+        "#F57B92",
+        "#F58B4E",
+        "#FBDD62",
+        "#A29BF0",
+        "#FFEC97",
+        "#398DDB",
+        "#3EBEC2",
+        "#5D52D6",
+        "#1D51D8",
+        "#B52AB5",
+        "#6EF9AA",
+        "#3BC568",
+        "#F25555",
+        "#B4FB62",
+        "#FFBB01",
       ],
+      seriesDatas: [],
     };
   },
+  mounted() {
+    this.getData();
+  },
   methods: {
-    xyrzyRender(_name, _value) {
-      // console.log("_name, _value", _name, _value);
-      //案件性质发案分析
-      // debugger;
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = this.$echarts.init(document.getElementById("dogMajors"));
-      // 绘制图表
-      myChart.setOption({
-        // color: ["#4db7f8", "#fa654f", "#ffc64e"],
-        xAxis: {
-          type: "category",
-          data: _name,
-          axisLabel: {
-            color: "#B8BDC6",
-            fontSize: "12px",
-            show: true,
-            interval: 0,
-            // rotate: '-60px',
-            margin: 6,
-          },
-          axisLine: {
-            lineStyle: {
-              color: "#2C4E86",
-            },
+    getData() {
+      for (let key in this.qzCount.major) {
+        this.seriesDatas.push({
+          name: key,
+          value: this.qzCount.major[key],
+        });
+      }
+      setTimeout(() => {
+        this.drawEcharts();
+      }, 1);
+    },
+    drawEcharts() {
+      if (this.myChart) this.myChart.dispose();
+      this.myChart = this.$echarts.init(document.getElementById("dogMajors"));
+
+      let options = {
+        color: this.colorDatas,
+        tooltip: {
+          trigger: "item",
+          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,
           },
         },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: "dashed",
-              color: "#2C4E86",
-            },
-          },
-          axisLine: {
-            show: false,
+        legend: {
+          type: "scroll",
+          orient: "horizontal",
+          left: "center",
+          align: "left",
+          bottom: 30,
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#fff",
+            fontFamily: "Microsoft YaHei",
           },
-          axisLabel: {
-            color: "#d7e7ff00",
+          width: 250,
+          pageIconColor: "#fff",
+          pageIconInactiveColor: "#fff",
+          pageTextStyle: {
+            color: "#fff",
           },
         },
         series: [
           {
-            barWidth: 24,
-            data: _value,
-            type: "bar",
-            itemStyle: {},
+            name: "工作犬专业方向统计",
+            type: "pie",
+            radius: "60%",
+            center: ["50%", "42%"],
             label: {
-              formatter: "{c}",
-              show: true,
-              position: "top",
-              fontWeight: "bolder",
-              fontSize: "12",
-              color: "#fff",
+              show: false,
+            },
+            emphasis: {
+              scale: false,
             },
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            data: this.seriesDatas,
           },
         ],
-      });
+      };
 
-      myChart.resize({
-        width: $("#dogMajors").width(),
-        height: $("#dogMajors").height(),
-      });
-      myChart.off("click");
-      myChart.on("click", function (params) {});
+      this.myChart.setOption(options);
     },
   },
-  mounted() {
-    setTimeout(() => {
-      let _name = [],
-        _value = [];
-      let index = 0;
-      for (let item in this.qzCount.major) {
-        _name.push(item);
-        _value.push({
-          name: item,
-          value: this.qzCount.major[item],
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: this.offsetZero[index],
-              },
-              {
-                offset: 1,
-                color: this.offsetOne[index],
-              },
-            ]),
-          },
-        });
-        index++;
-      }
-      this.xyrzyRender(_name, _value);
-    }, 1000);
-  },
 };
 </script>
 

src/views/sjfx/components/workDogCount.vue

@@ -109,8 +109,8 @@ export default {
               fontSize: 12,
               color: "#5E5E5E",
               fontFamily: "Microsoft YaHei",
-              // interval: 0,
-              // rotate: 30,
+              interval: 0,
+              rotate: 30,
             },
             axisTick: {
               show: false,