扇形echarts

父组件：            <ordinary-ring
              ref="sale"
              id="sale"
              :data="saleRatioData"
              :options="saleOptions"
            ></ordinary-ring>
  computed: {
    saleRatioData() {
      return this.saleData.map((item) => {
        return {
          ...item,
          itemStyle: {
            normal: {
              borderWidth: 4,
              borderColor: "#fff",
              borderRadius: 3,
              color: item.color,
            },
          },
        };
      });
    },
  },
       //销量占比图标配置
      saleOptions: {
        legend: {
          top: "25%",
          right: "6%",
          showValue: true,
        },
      },
子组件:
<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import resize from "@/views/mixins/resize";
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => [],
    },
    options: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    data: {
      handler(newName, oldName) {
        this.initChart();
      },
      deep: true, //深度监听
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      let data = [...this.data];
      let showValue = this.options.legend.showValue ? true : false; //是否显示%符号
      let option = {
        grid: this.options.grid
          ? this.options.grid
          : {
              top: "15%",
              left: 0,
              right: "5%",
              bottom: "10%",
            },
        tooltip: {
          trigger: "item",
          backgroundColor: "#fff",
          textStyle: {
            color: "#000",
          },
          formatter: showValue
            ? function (text) {
                var dotHtml =
                  '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background:' +
                  text.color +
                  '"></span>';
                return dotHtml + text.data.name + ": " + text.data.value + "%";
              }
            : function (text) {
                var dotHtml =
                  '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background:' +
                  text.color +
                  '"></span>';
                return dotHtml + text.data.name + ": " + text.data.value;
              },
        },
        legend: {
          show: true,
          orient: "vertical",
          icon: "circle",
          top: this.options.legend ? this.options.legend.top : "40%",
          right: this.options.legend ? this.options.legend.right : "10%",
          formatter: function (name) {
            if (showValue) {
              for (var i = 0; i < data.length; i++) {
                if (data[i].name == name) {
                  return (
                    "{title|" +
                    name +
                    "}" +
                    "  " +
                    "{value|" +
                    data[i].value +
                    "%}"
                  );
                }
              }
            } else {
              return "{title|" + name + "}";
            }
          },
          textStyle: {
            rich: {
              title: {
                align: "center",
                fontSize: this.fontSize(15),
                color: "#858A8E",
              },
              value: {
                align: "center",
                fontSize: this.fontSize(15),
                color: "#858A8E",
              },
            },
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            center: this.options.center ? this.options.center : ["35%", "50%"],
            radius: this.options.radius ? this.options.radius : ["45%", "65%"],
            legendHoverLink: false, // 禁用legend的hover
            hoverAnimation: true,
            //圆环内部文字
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: showValue
                  ? function (text) {
                      return (
                        "{value|" +
                        text.value +
                        "%}\n" +
                        "{title|" +
                        text.name +
                        "}"
                      );
                    }
                  : "{value|{d}%}\n{name|{b}}", //文字显示格式   饼图-d表示百分比 b-数据项名称
                textStyle: {
                  //文字样式设置
                  rich: {
                    value: {
                      padding: 5,
                      align: "center",
                      verticalAlign: "middle",
                      fontSize: this.fontSize(27),
                      color: "#000",
                      fontWeight: "bold",
                    },
                    title: {
                      align: "center",
                      verticalAlign: "middle",
                      fontSize: this.fontSize(14),
                      color: "#999",
                    },
                    name: {
                      align: "center",
                      verticalAlign: "middle",
                      fontSize: this.fontSize(14),
                      color: "#999",
                    },
                  },
                },
              },
              //高亮样式设置
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: this.fontSize(12),
                },
              },
            },
            //高亮圆环图标
            emphasis: {
              label: {
                show: true,
                position: "center",
                formatter: "{value|{d}%}\n{name|{b}}",
                rich: {
                  value: {
                    padding: 5,
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: this.fontSize(27),
                    color: "#000",
                    fontWeight: "bold",
                  },
                  name: {
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: this.fontSize(14),
                    color: "#999",
                  },
                },
              },
              scale: true, //放大
              // scaleSize: 20,
              // itemStyle: {
              //   borderColor: "#fff",
              //   borderWidth: 10,
              //   shadowBlur: 10,
              // },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                borderWidth: 3,
                borderColor: "#fff", //边框的颜色
              },
            },
            data: this.data,
          },
        ],
      };
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 300);
    },

    //设置默认选中
    getDefaultSelected(params, index = 0) {
      //高亮第一条数据
      this.chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      //将data中的数据全部设置为未选中状态
      for (var i = 0; i < this.data.length; i++) {
        this.data[i].selected = false;
        //取消之前高亮的图形
        this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: i,
        });
      }

      //再data中找到传递过来要默认的数据，将其设置为选中
      const idx = this.data.findIndex((el) => el.name == params.name);
      if (idx !== -1) {
        this.data[idx].selected = true;
      }

      //图例设置为选中
      this.chart.setOption({
        legend: { selected: { [params.name]: true } },
      });
      //高亮样式
      this.chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: idx,
      });
      //鼠标进入图表时触发的事件
      this.chart.on("mouseover", (e) => {
        //若是当前鼠标选择的数据不是默认数据的话，清除默认数据的高亮样式
        if (e.dataIndex != index) {
          this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
        }
      });
      //鼠标进入节点时的触发事件
      this.chart.on("mouseout", (e) => {
        index = e.dataIndex; //修改高亮的数据下标
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex, //dataIndex为数据在data中的下标
        });
      });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

结果：