echarts 玫瑰图的配置和实现

1：echarts 玫瑰图效果：

 2：配置代码：

按照对应数据 适当修改，有特殊需求的，还是按照官方文档进一步配置。

      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "3%",
          left: "58%",
          width: 5,
          itemGap: 40.5,
          itemWidth: 14,
          itemHeight: 14,
          orient: "vertical",//图例方向
          textStyle: {
            color: "#959BCB",
            fontSize: 14,
          },
          icon: "circle",//图例形状
        },

        series: [
          {
            name: "",
            type: "pie",
            center: ["30%", "30%"],
            radius: ["24%", "50%"],
            roseType: "radius",//此行代码即是玫瑰图关键 注释后就是普通圆环图
            label: {
              show: false,
              position: "center",
            },
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: "17",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: dataList,//此数据来源自定
          },
        ],
      };