删除

src/components/echartsTemplate/pie_new.vue

@@ -1,252 +0,0 @@
-<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: {
-    // text: "报建数量",
-    x: "20%",
-    textStyle: {
-      //  rich: {
-      fontSize: 14,
-      color: "#fff",
-      fontWeight: "bold",
-    },
-    x: "20%",
-    y: "45%",
-  },
-  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}`;
-      };
-      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>