说在前面
🎈对于echarts，相信大多数人都是不陌生的吧，应该是大部分同学都有使用过的一个图表库，echarts可以满足绝大多数可视化图表的展示，大多数情况下我们都可以通过官方文档的配置项来完成一个图表的配置，但是往往会有一些意料之外的需求，如这次需求要求给图表的坐标轴数据加上下划线（代表有点击事件），一开始我以为可以直接通过
border或者text-decoration样式来直接设置完成，尝试一番后发现不得行，于是就有了这一篇文章……
效果展示
如下图，这里给y轴上的数据都加上了下划线展示
实现思路
看到这个需求之后，我马上到echarts官网查看了相关的配置项，寻找可能可以实现该效果的配置，主要尝试了一下这几种。
1、borderType + borderColor + borderWidth
我们给yAxis中的axisLabel加上borderType、borderColor和borderWidth这三个配置项，可以给文字标签添加上边框。
yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], axisLabel:{ borderType: 'solid', borderColor:'red', borderWidth:1, } }
效果如下图：
从上图我们可以看到是成功给标签添加上了边框，但是我们现在是只需要下边框，所以我又尝试了很多方法，发现并不能很好地去除左、上、右这三边的边框，所以这个方法失败了，当然，这里只是我自己进行了尝试没有找到好的方法，实际上可能还有方法可以去除多余的边框，如果有大佬知道的话也可以指教一下，感激不尽🙇♀
2、textBorderColor + textBorderType + textBorderWidth
在配置项中还发现了这样一个与边框有关的配置组合，所以抱着试一试的心态也尝试了一下，发现emmmm……情况好像不太对
yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], axisLabel:{ textBorderType: 'solid', textBorderColor:'red', textBorderWidth:1, } }
效果如下图：
从上图我们可以看到这个效果并不是我们想要的，textBorderType是在文字的边缘包裹了一层边，所以这一组配置也不能实现我们所需要的内容，所以我们需要继续寻找。
3、backgroundColor
文字块背景色。
可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。
也可以直接使用图片，例如：
backgroundColor: { image: 'xxx/xxx.png' // 这里可以是图片的 URL， // 或者图片的 dataURI， // 或者 HTMLImageElement 对象， // 或者 HTMLCanvasElement 对象。 }
当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。
我们可以先准备这样一张图片
然后将其转换成base64
然后将其设置成图片的背景
yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], axisLabel:{ backgroundColor: { image: 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABPSURBVFhH7dixDQAgCABBoWD/IdhTLRziJX8JgfZbYl9rgHz7e4bQGEJjCI0hNIbQGEJjCI0hNIbQGEIzJiS6e8Q7KO741yLJqnrnvzJzHUQCCDJBedO2AAAAAElFTkSuQmCC', } } }
效果如下图：
从上图我们可以看到，使用backgroundColor这一配置项，我们可以成功的给y轴标签加上下划线，所以我便决定使用这种方案来实现该效果。
需求变更
找到了可以实现该效果的方案之后，三下五除二的敲完了代码，提测之后看了一下时间，还有一小时下班，这不又可以上掘金来摸鱼了嘛，就在我刚打开掘金准备摸鱼之时，我看到项目经理正不怀好意的向我走来，心头顿感不妙，以迅雷不及掩耳之势关掉了掘金页面，打开了vscode。
项目经理走过来对我说：“刚刚那个效果样式好像不太好，改成从上往下数，奇数的加上下划线，偶数的不加。”，然后就潇洒的走开了😥
看来今天这鱼又是摸不成了，加上条件限制之后，现在好像不能直接使用backgroundColor这个属性来实现了，这时我又想起来了标签的值可以通过formatter函数来进行格式化，那么我们可不可以直接格式化将下划线添加到文字中呢？
使用formatter函数
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' + underLine; }, } },
效果如下图：
emmm……好像有点问题，那么我们将base64格式的图片生成一个图片标签再加上试试：
const underLine = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABPSURBVFhH7dixDQAgCABBoWD/IdhTLRziJX8JgfZbYl9rgHz7e4bQGEJjCI0hNIbQGEJjCI0hNIbQGEIzJiS6e8Q7KO741yLJqnrnvzJzHUQCCDJBedO2AAAAAElFTkSuQmCC'; const hr = new Image(); hr.src = underLine; yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], axisLabel:{ formatter:(val,ind)=>{ return val + '\n' + hr; }, } },
效果如下图：
这样子好像也还是不能正常展示图片，这是我又看到了一个充满想象力的配置项。
yAxis.axisLabel.rich
在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
例如：
label: { // 在文本中，可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号： // `{styleName|text content text content}` 标记样式名。 // 注意，换行仍是使用 '\n'。 formatter: [ '{a|这段文本采用样式a}', '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}' ].join('\n'), rich: { a: { color: 'red', lineHeight: 10 }, b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 }, x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 }, ... } }
详情参见教程：富文本标签
所有属性
{ color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY }
