echarts环形图

echarts环形图按照数据显示在整个图表上的占比情况,比如下图所示
在这里插入图片描述
代码如下:

let option = {
        title: {
          text: "90%",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#fff",
            fontSize: "20",
          },
        },
        tooltip: {
          formatter: function (params) {
            return params.name + ":" + params.percent + " %";
          },
          show: false,
        },
        legend: {
          show: false,
          itemGap: 12,
          data: ["占比", "剩余"],
        },

        series: [
          {
            name: "内环",
            type: "pie",
            clockWise: true,
            radius: ["45", "55"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,   //取消鼠标悬浮放大的效果
            data: [
              {
                value: '90',   //实际占比的数据
                name: "占比",
                itemStyle: {
                  normal: {
                    color: "#6bb136",  //绿色区域
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                name: "剩余",
                value: 100 - 90,
                itemStyle: {
                  normal: {
                    color: "rgba(108,119,122,0.3)",   //灰色区域
                  },
                },
              },
            ],
          },
          {
            name: "外环",
            radius: ["60", "65"],
            type: "pie",
            hoverAnimation: false,  //取消鼠标悬浮放大的效果
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            data: [
              {
                name: "",
                // value: handred - point, 
                value: 100 - 90,
                itemStyle: {
                  normal: {
                    color: "rgba(108,119,122,0.3)",
                  },
                },
              },
            ],
          },
        ],
      };

版权声明:本文为qq_40576178原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。