标签：柱子 bar name text 图表 偏移 params type 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。