echarts图表坐标轴数据标签添加下划线

说在前面

🎈对于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,
    }
}
1
2
3
4
5
6
7
8
9

效果如下图：

从上图我们可以看到是成功给标签添加上了边框，但是我们现在是只需要下边框，所以我又尝试了很多方法，发现并不能很好地去除左、上、右这三边的边框，所以这个方法失败了，当然，这里只是我自己进行了尝试没有找到好的方法，实际上可能还有方法可以去除多余的边框，如果有大佬知道的话也可以指教一下，感激不尽🙇‍♀

2、textBorderColor + textBorderType + textBorderWidth

在配置项中还发现了这样一个与边框有关的配置组合，所以抱着试一试的心态也尝试了一下，发现emmmm……情况好像不太对

 yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
    axisLabel:{
      textBorderType: 'solid',
      textBorderColor:'red',
      textBorderWidth:1,
    }
}
1
2
3
4
5
6
7
8
9

效果如下图：

从上图我们可以看到这个效果并不是我们想要的，textBorderType是在文字的边缘包裹了一层边，所以这一组配置也不能实现我们所需要的内容，所以我们需要继续寻找。

3、backgroundColor

文字块背景色。

可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。
也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}
1
2
3
4
5
6
7

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

我们可以先准备这样一张图片

然后将其转换成base64

然后将其设置成图片的背景

 yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
    axisLabel:{
      backgroundColor: {
          image: 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAbCAYAAAA+nNxPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABPSURBVFhH7dixDQAgCABBoWD/IdhTLRziJX8JgfZbYl9rgHz7e4bQGEJjCI0hNIbQGEJjCI0hNIbQGEIzJiS6e8Q7KO741yLJqnrnvzJzHUQCCDJBedO2AAAAAElFTkSuQmCC',
      }
    }
}
1
2
3
4
5
6
7
8
9

效果如下图：

从上图我们可以看到，使用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;
      },
    }
},
1
2
3
4
5
6
7
8
9
10

效果如下图：

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;
      },
    }
},
1
2
3
4
5
6
7
8
9
10
11
12

效果如下图：

这样子好像也还是不能正常展示图片，这是我又看到了一个充满想象力的配置项。

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
        },
        ...
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

详情参见教程：富文本标签

所有属性

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

使用

看完这个标签的用法，好像是可以满足我们的需求了所以我们来试一下：

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}//文本块背景图片
        }
      },
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如下图

通过这个方法确实也成功加上图片了，但是这里的图片我们是作为一个另外的元素拼接在标签文字的下一行，因此原本图片的高度也会占位，所以我们可以给背景图片设置一个高度来进行限制。

通过上面这组图片，我们可以发现，背景图片的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}//文本块背景图片
        }
      },
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下图：

动态添加下划线

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}//文本块背景图片
        }
      },
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下图：

这时我们发现没设置下划线的标签文字好像会上移一点，这样肯定不行，所以我们给不设置下划线的文字标签也加上背景。

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'}//文本块背景图片
        }
      },
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果如下图：

从上图来看，效果是很完美的，所以给项目经理看了效果图，结果项目经理说我不会数数，不是说了是从上往下数，奇数的加上下划线，偶数的不加吗？，然后我说是呀，然后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]
    }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

往期精彩

面试官：不使用canvas怎么实现一个刮刮卡效果?

vue封装一个3D轮播图组件

vue实现一个鼠标滑动预览视频封面组件（精灵图版本）

node封装一个图片拼接插件

基于inquirer封装一个控制台文件选择器

node封装一个控制台进度条插件

密码太多不知道怎么记录？不如自己写个密码箱小程序

微信小程序实现一个手势图案锁组件

vue封装一个弹幕组件

为了学（mo）习（yu），我竟开发了这样一个插件

程序员的浪漫之——情侣日常小程序

vue简单实现词云图组件

说在后面

🎉这里是JYeontu，喜欢算法，GDCPC打过卡；热爱羽毛球，大运会打过酱油。毕业一年，两年前端开发经验，目前担任H5前端开发，算法业余爱好者,有空会刷刷算法题，平时喜欢打打羽毛球🏸 ，也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。