Eharts实现横向柱状图

Eharts版本V=5.2.0实现效果图如下

代码：

const datas = [
   { name: "taskA", percent: "58", total: "158111", finished: "82311" },
   { name: "taskB", percent: "76", total: "16522", finished: "9873"  },
   { name: "taskC", percent: "98", total: "5823", finished: "5500"  },
   { name: "taskD", percent: "77" , total: "3244", finished: "2355" },
   { name: "taskE", percent: "85", total: "15344", finished: "12009"  }
];
const yData = datas.map(item => item.name);
const zData = datas.map(item => item.finished);
const pData = datas.map(item => item.percent);
var xuhaofontsize = 50;

const img1 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAAt5JREFUaEPtmj1oFEEYhp/vjD9nEklhY5EUIgp2ooVaaW+jjXYKglaKJCgH/mEQCYKnJigqCGkEbWJjEdJopRaKhRAQxEILLVKImktikv1kJpNLuLvo7uyOOWW/5rjdvZln33lvjvveFTIunWIrs/QjTFOgR1YzmuUUktVg+o31tHAJOAa0uHFngHvMcFHWMZbFXKmBVVnFBCeAc0AHMAs8AlYCB4AVwFfgMkUGRPiZBjwVsFbYD1wFNjmI58ANlA/2vbAROAXsduffA2dkLY99ob2AdZxtCGVgj5vYABpQA1xfYoENuLkBU89QuqWVN0nBEwHrOBvs0gpHgIJb6rvAEGqtsHSJtYaxyHFnnQhl0FhJWvkcFzwWsCpFJulGKQFtwLT1qXCfiO9xJ7PXFWhHOQocdD7/AfRS5GYcf/8WWBVhgkNAH9DlwJ6i9AOfEoHWX9yJcBLYm8TfSwJrhZ3AdbCvpt6h1revU4LWfnw7Qg+wOY6/64B1gi7UKmqUNefHUG4DT4AoY9i54RL4uwqsShsVSgjdQBGYQnlAgUEiKkFAawdt5G+hjzWUxZjT3Jv16SSHUa6A3QXMkREiBoAvfwX0z/7+CJQo8lC0wouqT4W3QJnIvjZDGX+bFd/iYF4aYHU+OkvEiFW4ucrs9/sQLsxZYh5Y2dFcnDU0wqscOOgK5QoHldf+uOQeDqtxrnBYfXMPh9Y3VzhXuE6BfFsLbYpc4Vzh/B9HaA/8hwr3Bm1H+S9I3d/8hUZKuIafL26DRkrYlqovaG0rdqFVNT9ipk1rX8w4zcDasRvEAs3Zbm0AboKXW8Audy5MQzthYLN8kYFnJLYcoUwHapMkr9AxFnD1i5ku9jLJqEmOTILUDnjFuomAF4H7BIungU7Xix72Dc69gKvgSaNbZRSlR9oY9t35UgGbSZcIx4cc0GKfnqfIHRFrBe9KDVxV+195/KBu/zYPeERcs8cDPODxC0lMg5hwur7YAAAAAElFTkSuQmCC';
const img2 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAAxFJREFUaEPtmjFoE2EUx//vfZ4SsNDBxSH2EgMBO4kO4mQGty7tUkdB0MlSWiwdikXpUBRLsVCwIhRc7FIXh27qUh0UpxYCJVyTwaVDQTFgvO/JV75KiNc0yd21Ddy3Hd/dez/++X/vyHtHiHhtb29f8n3/mYhURWQil8ttRZmCogpWLBbPOY7zCMBdAKds3N8AFohoJpPJ7EaRKzTwxsbG6VQqdR/AFIBeAD6AVQBnAAwAYAA7IjJdLpeXCoXCnzDgoYA9zxvUWj8BkDMQRLQuIvNa65K9zhPRGIAr5lpENpl5PJPJrHUK3RGw9ek8gJs2sQE0oOtBIMxcADACIG3315RS4319fZvtgrcFHODTXRF5QUSrWmtjhQOXUsrRWg8T0R0APQCMNZZqtdp0Pp/faRW8JeAgnxLRCoCXvu//aDWZtUkvEd0DMARAATCHcaZarS709/ebQ9p0HQp8mE8PS3DQPjNniWhURK7be7aYecJ13bfNYh4I7HneZa31HIAbrfg0BLgBHgWQtTE+MPOY67rfgmL+B+x53nkRmRGR27YktezTENBKRIasVUxp1ES0TERTrut+r4/7D7hSqaRqtZopQZMAzgKoAVgholft+rRTcKVUj4iYQzkMwAHwE8Cs4zhz6XS6uncGRIRKpdItIpoFcMHWy/fM/Nz3/UqnycM8p5RKa61HiMiUQ7PKIjKZzWbfGNhPAK7ZjSKAOa311zAJo3qWmc0Lx/zqeRvzowEWq+pjAO9EREeVMIo4RGRe7QNE9HDPEvvAWuurUSSIKwYzf0mA41LXxE0UjlPdROG41U0UThQOUCApa3HbIlE4UbhBgcQSiSUSS8TtgUTh41ZYRLrmb343NVI+d1+rat+KQc1AInotIsta619HYdmWmoGNIAHtVjMBWoyzjcXM7bdbA8AbG9qxNAqZOVxDOwB8UESeishF2zSMpBUb+cigHjzKZjcRxTuUqQcPM0440rFXC/4+mYPFIH83G90qpXIi8uDYR7f14E2G4+a2/eHhyRiO14N3zecHjTaJ+wOPvxF8nWDb371gAAAAAElFTkSuQmCC';
const img3 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAA5tJREFUaEPtmU9oVFcUxn/ffZkEq4ILF3VRF6UguJORiXWlrt3UjUI3AaGFQlsZiyQ11GmdJqF/RjEgVCi4KbQbu+lC3FRcNG1M2oIQKIiLdtEushDaaifOu6fcmYmtmclk5s08FXl3NY8775zfO++793HPJwY8bGp0d4x9inE/ctEpTczdHmQKDSqYfZLfHleH3kf2GjDUjLti0uxQtVpW6ee7g8jVN7CVdg/73OY3TZoEtgExcAVsBHQYcBjLcnbGVTdfUul6rR/wvoBr04VXMD4CXqpDiO+A8x7dCZfO2y6JokE+XBssITuZm7h5NSl0IuCV6b17nKkCOtBMfEfG+dgpALeMyDho2FvAC83JqxE6qXd/WOoVvCfghk6js4igUwfcNeMzM3+FKApSWH/E5OT8UaHjwFaghulSNFI7o3cWl7sF7wq4jU4fIH1l6HPD/uw2WV013m+T9DpwBIjCQ8us7B78PavS0spGsTYEbtGpcQNxzku/bRS807zDXgROYOxv/u824tTQxPzXne5bF7hXnSaFj7ztN3ECCA8QluZ1LysOTyz81C5mC7B9mN8Ru6iMMdazTpNSx3EkuSMSQSpha/SIy5GPJ3V68ff/h30IbJWXN/lqXDRjHNgCJNZpUm6hrcKOY3YUyAF/Scy4kaii4tz9+howQ/FM4RjGDLCzmexb4EK/Ok0K7szC9he2wYPNGL8ixqPx+S9Vmy7MYeyrq0f84lAlhsWkyQZ5XwR5jxVl7GrImxuqTRWs8ds+MPFN+D4NMmn/sbyTcVjovbokVoG9tLf/4OlFcGYLGXB69YWswmlWN8TOKpxVeE0FMklkksgkkbYGsgpnFe5cgWwfTlshWYWzCj9z+7DgdOy5RqT6sf/pGWuO+fFU4UeDPfUjNHbLjIp37tbTANzSSBHfy0q4ODc6hqwM7Gh09rmGMeud/ngS4M7b84gicKiZ/79W1SqQlQ5sqeXujQdPAtgEVBFfmHHZpHuPA1xmz0mMYbwKjLRtBq4FsZn8zthHoTF4rKESlk12Md02VlOnpjcQ27tqt64FXymP7nORnUu7UdhOpz72bw9PLsy3e6sdLYM0W7EdW6rhva4zNvQ4wn2DbHZ307TutF66An64MPuxE3qwBQYGvBqorWEjPo7RzXbJejVeBg68GrDFEoNHrIak1lZqwHV9t5rjdTMHC+Z4MvMwVeAO+g5TiezZxwLcRt//JDXAOwH/C2NeWG8WRbglAAAAAElFTkSuQmCC';
const img4 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAAt9JREFUaEPtmj9oFEEUxn/vEpVAAgHTpDCFiIKdaKFW2ttooekUBGMURS4oAeO/EOQIeGpCLjlBSCMYi9hYhDRaqYViIQQEsdBCBQVBUWLiPpm9OXLsnZu72d0YZac5lmW++e233wzceyvEPSZ0Kx7XfNkMfRyXuTiXkNjEitqBxxWUY0Cz1V1EuEWGS/TIpzjWig58T9fymVMoA0A78AuYtnAHgCbgC8IFPjLBZVmMAh4NeFz3owwDmyzEY+AG8MZebwTOALvt9RxKHydlxhXaDXhct6HkgT12YQNoQA1wrWGAzwIb7M0Z13w3BlzUThYZQjjibynzqqGIMI36UQgba4BDwFGgDXDKd33AeW1hHVmEfqAVWACmEG6jfG3o9Xq0k6EHqMz3EOsZ5aD8XE4rHFhVKNCNkAO6rNhDYAR4t5z4MveD+X6NcI5euR8278/AJqceYwi7rMAr8HP7PCJocLrJt9mY5gHMeISQpVde1FqnGrg6p+b8LKA8QPBihi3JCU2oHxETFXM0eiiTNDNAj7yvXHMJOM6cuj6V0Ib6m9JsTrNJv6HkmCdPVn6Uni3ZnLqim+PvNLDXCrxF6ecEd4WCPgF2JpxTV/DtQBbYYgWeGmC1F4OJ5tQVWckg7AMuliKxBLzDVXOF5j1LgRN2OnU4YYNJHU4dDjiQRiKNRBqJpDOQOpw6HO5Aeg4nnZDU4dTh/+4cPk+GWb9ItJpGjb/5S4UU4SUeeczv6hg1CimlUtVhhKtAJ/gOzwKjwIe/xB1SqioTjWkrGfpRvzTUAsyj3EGYBL6vCHhdxcAgSVG78MihdPuVIVil5dYgeEFNgfD6ChQKTU77gM0WocGCdiV4sqXYYE4jtgwqweMsdtfKKQzSwc3oTZnqfLu3vRpoC4Rt8PraXkEFt8Zi3Y2X+IHLio23buvKaXLARrl2c3zKNlWcmofJApfV/5nPD4J2mA88lBGUBdcGeJjDvwEuqGXYEDGELgAAAABJRU5ErkJggg==';

// 设置等长的背景柱状图
const maxData = new Array(yData.length).fill(100);
option = {
   backgroundColor: "#0b1a2a",
   grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "10%",
      containLabel: false
   },
   xAxis: [
      {
         show: true
      },
      {
         show: false,
         splitLine: {
            show: false
         }
      }
   ],
   yAxis: [
      {
         show: true,
         data: yData,
         position: "left",
         inverse: true,//横向柱状图由上至下显示
         max:10,//设置类目数量，平均分配坐标轴，避免数据量小时柱子间距太宽
         axisLabel: {
            lineHeight: 0,
            verticalAlign: "bottom",
            fontSize: 14,
            color: "#e6a635",
            // formatter: "{value}",
             formatter: (name, index) => {
            let tempValue;
            for (var i = 0; i < datas.length; i++) {
               if (datas[i].name === name) {
                  tempValue =datas.length-i;
               }
            }

            const id = tempValue;
            if (id < 4) {
               return `{icon${id}|${id}}`;
            } else {
               return `{count|${id}}`;
            }
         },
       rich: {
            icon1: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               align: 'center',
               padding: [0, 0, 2, 0],
               backgroundColor: {
                  image: img1,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            },
            icon2: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               padding: [0, 0, 2, 0],
               align: 'center',
               backgroundColor: {
                  image: img2,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            },
            icon3: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               padding: [0, 0, 2, 0],
               align: 'center',
               backgroundColor: {
                  image: img3,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            },
            count: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               padding: [0, 0, 2, 0],
               align: 'center',
               backgroundColor: {
                  image: img4,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            }
         },
         },
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         }
      },
      {
         show: true,
         data: zData,
         inverse: true,//横向柱状图由上至下显示
         max:10,//设置类目数量，平均分配坐标轴，避免数据量小时柱子间距太宽
         offset: 5,
         position: "right",
         axisLabel: {
            lineHeight: 0,
            verticalAlign: "bottom",
            fontSize: 14,
            color: "#19E5E6",
            formatter: "{value}"+'人次'
         },
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
      }
   ],
   series: [
      {
         name: "进度",
         show: true,
         type: "bar",
         barGap: "-100%",
         xAxisIndex: 1,
         barWidth: 20,
         itemStyle: {
            borderRadius: 10,
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               colorStops: [
                  {
                     offset: 0,
                    color:'#1084fa'
                  },
                  {
                     offset: 1,
                    color:'#2bf2ff'
                  },
               ],
               global: false, // 缺省为 false
            }
         },
         label: {
            show: true, 
            position: 'insideRight', 
            formatter: '{c}%',
            offset: [-10, 2], 
            color: '#fff'
         },
         labelLine: {
            show: false
         },
         z: 2,
         data: pData,
         animationDelay: 1000,
         animationDuration: 1000
      },
      {
         name: "百分比",
         z: 1,
         show: true,
         type: "bar",
         xAxisIndex: 1,
         barGap: "-100%",
         barWidth: 20,
         itemStyle: {
            borderRadius: 4,
            color: "rgba(13, 55, 78, 1)"
         },
         label: {
            show: false,
         },
         data: maxData
      }
   ]
};