前端可视化，怎么展示出各个部分的比列呢

这种效果要怎么展示呢？ 进度条，柱形图，datav的进度池等都不能很好的实现这个效果，

echarts柱状象形图 在这里面找   https://www.makeapie.com/explore.html 或者echarts官网示例里找

let option = {
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 80,
          top: 20, // 设置条形图的边距
          right: 80,
          bottom: 20,
        },
        yAxis: [
          {
            type: "category",
            show:true, 
            inverse: false,
            data: ["80%以上", "50%-80%", "50%以下"],
            axisLine: {
              show:false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              show: true,
              margin: 15,
              textStyle:{
                fontSize:16,
                color:function (value){
                  return value=="80%以上"?"#81D3F8":(value=="50%-80%"?"#FF6600":"#FF004D");
                },
              },
              interval: 0,
              
            },
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 10,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 4, 4],
                color: function (params) {
                  var colorlist = ["#81D3F8", "#FF6600", "#FF004D"];
                  return colorlist[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "right",
                distance:20,//距离柱形的距离
                // formatter: "{b}",
                textStyle: {
                  color:"inherit",//映射颜色
                  fontSize: 36,
                },
              },
            },
            data: [
              {
                name: "80%以上",
                value: 5,
              },
              {
                name: "50%-80%",
                value: 18,
              },
              {
                name: "50%以下",
                value: 7,
              },
            ],
            z: 1,
            animationEasing: "elasticOut",
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#000",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 5,//图形的两边间隔
            symbol: "rect",
            symbolClip: true,//是否裁剪图形
            symbolSize: [2, 20],
            symbolPosition: "start",//图形的定位位置。
            symbolOffset: [-2, 0],//图形相对于原本位置的偏移。
            data: [
              {
                name: "80%以上",
                value: 5,
              },
              {
                name: "50%-80%",
                value: 18,
              },
              {
                name: "50%以下",
                value: 7,
              },
            ],
            z: 2,
            animationEasing: "elasticOut",
          },
        ],
      };

只能弄成这样了，勉勉强强吧