echarts 环形图内部加个圈

最新推荐文章于 2024-09-07 09:00:00 发布

ana_9717

最新推荐文章于 2024-09-07 09:00:00 发布

阅读量2.2k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/ana_9717/article/details/121724546

版权

设计图中需要在环形图中加个外环中浅浅的圈圈，想了许多办法之后发现，只要在series中再加一组数据，内环的外半径等于外环的内半径，data的value设置成一样就好啦

series: [
          {
            name: "观看次数",
            type: "pie",
            startAngle: 0,
            radius: [42, 64],
            label: {
              show: false,
            },
            data: [
              {
                value: 55,
                name: "3次",
                itemStyle: {
                  color: "#407aff",
                },
              },
              {
                value: 25,
                name: "2次",
                itemStyle: {
                  color: "#8068e3",
                },
              },
              {
                value: 15,
                name: "1次",
                itemStyle: {
                  color: "#feb202",
                },
              },
              {
                value: 5,
                name: "0次",
                itemStyle: {
                  color: "#f16548",
                },
              },
            ],
          },
          {
            name: "观看次数",
            type: "pie",
            startAngle: 0,
            radius: [36, 42],
            label: {
              show: false,
            },
            data: [
              {
                value: 55,
                name: "3次",
                itemStyle: {
                  color: "#78a1ff",
                },
              },
              {
                value: 25,
                name: "2次",
                itemStyle: {
                  color: "#a594ea",
                },
              },
              {
                value: 15,
                name: "1次",
                itemStyle: {
                  color: "#feca51",
                },
              },
              {
                value: 5,
                name: "0次",
                itemStyle: {
                  color: "#f5937f",
                },
              },
            ],
          },
        ],