可视化职业数据分布图表修改

src/views/index/kshData.vue

@@ -313,9 +313,9 @@ export default {
           codeTree: "CODE_AJLB",
         },
         {
-          name: "小案类别",
+          name: "小类案别",
           id: "gabAjxzlb",
-          placeholder: "小案类别",
+          placeholder: "小类案别",
           type: "codeTreeDialog",
           props: [], //字典弹框需要的字段
           value: "",
@@ -324,9 +324,9 @@ export default {
           codeTree: "CODE_GABAJZLB",
         },
         {
-          name: "细案类别",
+          name: "细类案别",
           id: "gabAjxalb",
-          placeholder: "细案类别",
+          placeholder: "细类案别",
           type: "codeTreeDialog",
           props: [], //字典弹框需要的字段
           value: "",
@@ -1451,39 +1451,34 @@ export default {
             hoverOffset: 15,
             itemStyle: {
               color: (params) => {
-                return colorList.slice(2)[params.dataIndex];
+                return colorList[params.dataIndex];
               },
             },
             label: {
               show: true,
               position: "outer",
-              width: 0,
+              // alignTo: "labelLine",
+              // ·圆点
+              backgroundColor: "auto", //圆点颜色，auto：映射的系列色
               height: 0,
+              width: 0,
               lineHeight: 0,
-              backgroundColor: "auto",
-              padding: [2, -2, 2, -2],
-              borderRadius: 2,
-              distanceToLabelLine: 0,
-              formatter: "{top|{b}}\n{bottom|{d}%}",
-              align: "center",
+              // height,width.lineHeight必须为0
+              distanceToLabelLine: 0, //圆点到labelline距离
+              borderRadius: 2.5,
+              padding: [2.5, -2.5, 2.5, -2.5],
+              /*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几
+  如：圆点半径为1
+            borderRadius: 1,
+            padding: [1, -1, 1, -1]
+*/
+              formatter: "{a|{b}：}{b|{d}%}",
               rich: {
-                top: {
-                  verticalAlign: "bottom",
-                  // bottom：文字在上圆点在下
-                  // top: 文字在下圆点在上
-                  padding: [10, 10, 0, 10],
-                  // padding：[上， 右， 下，左]，
-                  // 上：圆点到上文字间距, 文字上移距离
-                  // 右：文字与右侧圆点间距, 文字左移距离
-                  // 下：圆点到下文字间距, 文字下移距离
-                  // 左：文字与左侧圆点间距, 文字右移距离
-                  align: "center",
-                  // center:文字圆点居中，right文字在圆点左侧，left文字在圆点右侧
-                },
-                bottom: {
-                  padding: [0, 10, 10, 10],
-                  verticalAlign: "top",
-                  align: "center",
+                a: {
+                  padding: [0, 0, 0, 10],
+                },
+                b: {
+                  padding: [0, 10, 0, 0],
                 },
               },
             },
@@ -1531,6 +1526,8 @@ export default {
         "#FDB36A",
         "#FD866A",
         "#9E87FF",
+        "#F22F22",
+        "#F22CCC",
       ];
       // 基于准备好的dom，初始化echarts实例
       // let myChart = this.$echarts.init(this.$refs.pieDiagram);
@@ -2507,12 +2504,12 @@ export default {
         } else {
           this.xzqh =
             this.provinceCodes[this.formData.asjfsddXzqhdm.slice(0, 2)];
-          this.Loading = this.$loading({
-            lock: true,
-            text: "正在查询...",
-            spinner: "el-icon-loading",
-            background: "rgba(255, 255, 255, 0.7)",
-          });
+          // this.Loading = this.$loading({
+          //   lock: true,
+          //   text: "正在查询...",
+          //   spinner: "el-icon-loading",
+          //   background: "rgba(255, 255, 255, 0.7)",
+          // });
           this.getEsLatsfxFpaQuery();
           // this.setMap(this.xzqh, this.points);
           this.getEslaTopTenQuery();