样式修改

src/components/echartsTemplate/pieNew.vue

@@ -0,0 +1,259 @@
+<template>
+  <div id="pie_echart" ref="echart"></div>
+</template>
+
+<script>
+// let colors = [
+//   ["#FC8053", "#F2CAA4"],
+//   ["#5583e7", "#36dddb"],
+//   ["#f888b1", "#fbe6ee"],
+// ];
+let colors = [
+  "#62ADED",
+  "#DFE15A",
+  "#6EDC8D",
+  "#00A42E",
+  "#F9B447",
+  "#7F4FE5",
+  "#FF6969",
+  "#27CED9",
+  "#DF56F5",
+  "#DCFFAF",
+];
+let option = {
+  backgroundColor: "rgba(0,0,0,0)",
+  label: {
+    //图例文字的样式
+    color: "#fff",
+    fontSize: 16,
+  },
+  title: {
+    show: false,
+    text: "暂无数据",
+    x: "39%",
+    y: "28%",
+    textStyle: {
+      //  rich: {
+      fontSize: 14,
+      color: "#fff",
+      fontWeight: "bold",
+    },
+  },
+  legend: {
+    // type: "scroll",
+    orient: "vertical",
+    right: "2%",
+    top: "center",
+    data: [],
+    icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
+    itemWidth: 12, // 设置宽度
+    itemHeight: 12, // 设置高度
+
+    itemGap: 10, // 设置间距
+    textStyle: {
+      //图例文字的样式
+      color: "#fff",
+      fontSize: 14,
+    },
+    textStyle: {
+      rich: {
+        name: {
+          color: "#fff", //#BCD3E5
+          fontSize: 14,
+          width: 60,
+        },
+        value: {
+          color: "#64DAFF",
+          fontSize: 14,
+          padding: [5, 4],
+          align: "center",
+          width: 100,
+        },
+        unit: {
+          color: "#fff", //#BCD3E5
+          fontSize: 14,
+          width: 5,
+        },
+      },
+    },
+  },
+  graphic: [
+    {
+      type: "group",
+      top: "middle",
+      left: "center",
+      id: "data",
+      children: [
+        // {
+        //   type: "text",
+        //   id: "current",
+        //   top: 40,
+        //   style: {
+        //     text: dataAll,
+        //     font: 'bolder 36px "Microsoft YaHei", sans-serif',
+        //     fill: "#fff",
+        //     textAlign: "center"
+        //   }
+        // },
+        // {
+        //   type: "text",
+        //   id: "all",
+        //   top: 80,
+        //   left:'10%',
+        //   style: {
+        //     text: "报建数量",
+        //     font: 'bolder 14px "Microsoft YaHei", sans-serif',
+        //     fill: "#fff",
+        //     // textAlign: "center"
+        //   }
+        // }
+      ],
+    },
+  ],
+  series: [
+    {
+      name: "轮次",
+      type: "pie",
+      radius: ["45%", "80%"],
+      center: ["20%", "50%"],
+      avoidLabelOverlap: false,
+      label: {
+        normal: {
+          show: false,
+          position: "inner", // 数值显示在内部
+          formatter: (params) => {
+            return `${params.name} : ${params.value} "km²`;
+          },
+        },
+        textStyle: {
+          //图例文字的样式
+          color: "#fff",
+          fontSize: 16,
+        },
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: "16",
+          fontWeight: "bold",
+        },
+      },
+      labelLine: {
+        show: false,
+        length: 48,
+      },
+      data: [],
+    },
+  ],
+  grid: {
+    left: "0%",
+    // right: "40%",
+    // bottom: "10%",
+    top: "16%",
+    containLabel: true,
+  },
+};
+export default {
+  name: "pie_echart",
+  props: {
+    unit: {
+      type: String,
+      default: "km²", //"平方千米",
+    },
+  },
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    setOptions(cartData) {
+      let _this = this;
+      if (!this.myChart) {
+        // var dom = document.getElementById("pie_echart");
+        this.myChart = echarts.init(this.$refs.echart);
+      }
+
+      cartData.data.forEach((item, index) => {
+        option.legend.data.push(item.name);
+        item.itemStyle = {
+          color: colors[index % colors.length],
+          // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //   {
+          //     offset: 0,
+          //     color: colors[index % colors.length],
+          //   },
+          //   {
+          //     offset: 1,
+          //     color: colors[index % colors.length],
+          //   },
+          // ]),
+        };
+        // dataAll += item.value;
+      });
+      if (cartData.type == "vertical") {
+        option.series[0].radius = ["27%", "42%"];
+        option.series[0].center = ["50%", "30%"];
+        option.legend.height = "40%";
+        option.legend.top = "60%";
+        option.legend.orient = "horizontal";
+      } else {
+        option.series[0].radius = ["45%", "70%"];
+        option.series[0].center = ["25%", "50%"];
+        option.legend.height = "100%";
+        option.legend.top = "center";
+        option.legend.orient = "vertical";
+      }
+      option.legend.right = cartData.legend_right || "2%";
+      let max = cartData.max || 4;
+      option.legend.textStyle.rich.name.width = max * 15;
+      option.legend.formatter = function (name) {
+        const sItem = cartData.data.find((item) =>
+          `${item.name}`.includes(`${name}`)
+        );
+        if (sItem) {
+          let aname = name.length > max ? name.substr(0, max) + "..." : name;
+          return `{name|${aname}}  {value|${sItem.value}}  {unit|${_this.$props.unit}} `;
+          // return name + 'sItem.value';
+        } else {
+          return name;
+        }
+      };
+
+      option.series[0].data = cartData.data;
+      option.series[0].label.normal.formatter = function (params) {
+        return `${params.name} : ${params.value} ${_this.$props.unit}`;
+      };
+
+      if (cartData.data.length <= 0) {
+        option.title.show = true;
+      } else {
+        option.title.show = false;
+
+      }
+      this.myChart.resize();
+      this.myChart.setOption(option);
+      // if (cartData.isclick) {
+      //  legendselectchanged
+      this.myChart.on("legendselectchanged", function (params) {
+        let iseyes = params.selected[params.name];
+        _this.$emit("echartClick", params.name, { iseyes });
+      });
+      this.myChart.on("click", function (params) {
+        _this.$emit("echartClick", params.name, { color: params.color });
+      });
+      // }
+    },
+  },
+  mounted() {
+    // this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.pie_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/siteselection/components/dkDetailsNew.vue

@@ -43,7 +43,7 @@
 
 <script>
 // import pie from "@/components/echartsTemplate/pie_new.vue";
-import pie from "@/components/echartsTemplate/pie.vue";
+import pie from "@/components/echartsTemplate/pieNew.vue";
 
 import { GetCascadeList, GetTabsPanePost } from "@/api/cockpitNew";
 import * as wellknown from "wellknown";