echarts 玫瑰图的配置和实现

Beblien

已于 2022-07-13 22:02:41 修改

阅读量1.9k

点赞数 1

文章标签：大数据 echarts vue.js

于 2022-07-13 22:00:53 首次发布

本文链接：https://blog.csdn.net/weixin_50656154/article/details/125773595

版权

本文介绍了如何使用echarts实现玫瑰图效果，通过展示配置代码并提示根据数据进行适配，同时也建议参照官方文档以满足特殊需求。

摘要由CSDN通过智能技术生成

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",//此行代码即是玫瑰图关键 注释后就是普通圆环图