echarts图表，堆积图和柱子偏移的一种形式

 

像以上这种图表，左边有一根柱子是目标项，右边需要展示已转化+未转化=已完成的项，需要三根柱子，已完成为底。

中间用 barGap: '-100%', z: '-1', 通过柱子偏移，实现叠加。但是···一往左一偏移吧，目标柱子就会被盖住。那距离需求又差点意思了。

后来也没想到好法子。最后只想到用堆叠图解决右边的两个柱子，被包含的柱子放前面，包含的柱子放后面。也就是上图中的黄色柱子放在最后面。悬浮鼠标提示做一下拼接

上盘子了

series: [
　　{
　　　　name: '目标',
　　　　type: 'bar',
　　　　barGap: 0,
　　　　data: [320, 562, 501, 334, 390]
　　},
　　{
　　　　name: '已转化',
　　　　type: 'bar',
　　　　stack:'add',
　　　　data: [150, 232, 201, 154, 190]
　　},
　　{
　　　　name: '已完成',
　　　　type: 'bar',
　　　　stack:'add',
　　　　data: [220, 182, 191, 234, 290]
　　}

],

 　　tooltip: {

          trigger: "axis",

          formatter: function (params) {

            let text = params[0].name + '<br/>'

            params.forEach((p,i)=>{

              const serIdx = p.seriesIndex;

              if(serIdx==2){

                text += `${p.marker} ${p.seriesName} : ${ Number(params[1].value || 0) + Number(p.value || 0) }<br/>`

              }else{

                text += `${p.marker} ${p.seriesName} : ${p.value}<br/>`

              }

            })

            return text

          }

        },

　　legend: {

          selectedMode: false

        },

 

暂且就这么着吧