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         },

 

暂且就这么着吧

 

标签：柱子,bar,name,text,图表,偏移,params,type,echarts
来源： https://www.cnblogs.com/frontweb/p/16643499.html