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

简介: 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,
    }
}

效果如下图:

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

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 对象。
}

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

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

然后将其转换成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 }

使用

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

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]
    }
  ]
};

目录
相关文章
|
3天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
33 0
|
3天前
|
新零售 分布式计算 数据可视化
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
|
3天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
3天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
20 0
|
3天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
17 0
|
3天前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
3天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
71 2
|
3天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
18 0
|
3天前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架,可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库,可以通过简单的配置实现各种图表的展示和交互。
102 0