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

目录
相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
260 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
179 23
echarts地图数据信息流向图效果
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
192 2
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
75 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
439 0
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
598 0
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
4月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
526 1
微信小程序使用echarts图表(ec-canvas)
|
4月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
4月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
85 1

热门文章

最新文章

下一篇
DataWorks