real3d-portalsite/src/components/echartsTemplate/pieNew.vue

<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>