使用
看完这个标签的用法，好像是可以满足我们的需求了所以我们来试一下：
const underLine = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABPSURBVFhH7dixDQAgCABBoWD/IdhTLRziJX8JgfZbYl9rgHz7e4bQGEJjCI0hNIbQGEJjCI0hNIbQGEIzJiS6e8Q7KO741yLJqnrnvzJzHUQCCDJBedO2AAAAAElFTkSuQmCC'; yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], axisLabel:{ formatter:(val,ind)=>{ return val + '\n' + '{hr|}'; }, interval:0, rich: { hr: { width: '100%', backgroundColor: { image: underLine}//文本块背景图片 } }, } },
效果如下图
通过这个方法确实也成功加上图片了，但是这里的图片我们是作为一个另外的元素拼接在标签文字的下一行，因此原本图片的高度也会占位，所以我们可以给背景图片设置一个高度来进行限制。
通过上面这组图片，我们可以发现，背景图片的height属性会影响到像素的展示，这样的设置使得下划线图片的显示并不稳定，所以我们可以换一张图片，直接使用一种全黑的图片来作为下划线图片即可。
转换成base64
使用新图片代替原来的图片：
const underLine = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABBSURBVFhH7c/BCQAwDMNAp/vvnPTRIZSiA+O3KknfrXfer2cIjSE0htAYQmMIjSE0htAYQmMIjSE0htAYQvNJSDJsvgE1zcTjegAAAABJRU5ErkJggg=='; yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], axisLabel:{ formatter:(val,ind)=>{ return val + '\n' + '{hr|}'; }, interval:0, rich: { hr: { width: '100%', height: 1, backgroundColor: { image: underLine}//文本块背景图片 } }, } },
效果如下图：
动态添加下划线
const underLine = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABBSURBVFhH7c/BCQAwDMNAp/vvnPTRIZSiA+O3KknfrXfer2cIjSE0htAYQmMIjSE0htAYQmMIjSE0htAYQvNJSDJsvgE1zcTjegAAAABJRU5ErkJggg=='; yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], axisLabel:{ formatter:(val,ind)=>{ return val + '\n' + (ind % 2 == 1 ? '{hr|}' : ''); }, interval:0, rich: { hr: { width: '100%', height: 1, backgroundColor: { image: underLine}//文本块背景图片 } }, } },
效果如下图：
这时我们发现没设置下划线的标签文字好像会上移一点，这样肯定不行，所以我们给不设置下划线的文字标签也加上背景。
const underLine = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABBSURBVFhH7c/BCQAwDMNAp/vvnPTRIZSiA+O3KknfrXfer2cIjSE0htAYQmMIjSE0htAYQmMIjSE0htAYQvNJSDJsvgE1zcTjegAAAABJRU5ErkJggg=='; yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China','Japan', 'World'], axisLabel:{ formatter:(val,ind)=>{ //这里的(6 + ind)中的6为data的长度减1，因为n - 1 + n - 1 = (2 - 1) * n，这样最上面的一项永远是偶数开始 return val + '\n' + ((6 + ind) % 2 == 1 ? '{hr|}' : '{none|}'); }, interval:0, rich: { hr: { width: '100%', height: 1, backgroundColor: { image: underLine}//文本块背景图片 }, none: { width: '100%', height: 1, backgroundColor: { image: 'none'}//文本块背景图片 } }, }
效果如下图：
从上图来看，效果是很完美的，所以给项目经理看了效果图，结果项目经理说我不会数数，不是说了是从上往下数，奇数的加上下划线，偶数的不加吗？，然后我说是呀，然后battle了一番发现原来是我们的数数方法不一样。
然后我又小小地修改了一下，准时下班😎
完整代码
const underLine = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABBSURBVFhH7c/BCQAwDMNAp/vvnPTRIZSiA+O3KknfrXfer2cIjSE0htAYQmMIjSE0htAYQmMIjSE0htAYQvNJSDJsvgE1zcTjegAAAABJRU5ErkJggg=='; option = { title: { text: 'World Population' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China','Japan', 'World'], axisLabel:{ formatter:(val,ind)=>{ //这里的(7 + ind)中的7为data的长度，因为n + n - 1 = 2 * n - 1，这样最上面的一项永远是奇数开始 return val + '\n' + ((7 + ind) % 2 == 1 ? '{hr|}' : '{none|}'); }, interval:0, rich: { hr: { width: '100%', height: 1, backgroundColor: { image: underLine}//文本块背景图片 }, none: { width: '100%', height: 1, backgroundColor: { image: 'none'}//文本块背景图片 } }, } }, series: [ { name: '2011', type: 'bar', data: [18203, 23489, 29034, 104970, 131744,111111, 741341] }, { name: '2012', type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 111111,792918] } ] };
往期精彩
说在后面
🎉这里是JYeontu，喜欢算法，GDCPC打过卡；热爱羽毛球，大运会打过酱油。毕业一年，两年前端开发经验，目前担任H5前端开发，算法业余爱好者,有空会刷刷算法题，平时喜欢打打羽毛球🏸 ，也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。
