echarts 图表x轴坐标文字添加下划线

最新推荐文章于 2023-09-22 17:14:02 发布

JunJiu0420

最新推荐文章于 2023-09-22 17:14:02 发布

阅读量450

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/JunJiu0420/article/details/132816591

版权

echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

const underlineImage = new Image()
underlineImage.src =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAPCAYAAAFSGJVvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuN2E3YTIzNiwgMjAyMS8wOC8xMi0wMDoyNToyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjUgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMi0xMC0yMVQxMDoyOTo1NyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0xMC0yMVQxMDoyOTo1NyswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjItMTAtMjFUMTA6Mjk6NTcrMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZjFlYmU0MjEtM2Y5Zi1hZTQ1LWIxNWYtODk1Njk4Mjk1NWNkIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YTVhZjAzMzMtZjMyMy01NzQ5LTk3YTItOWZkYTdjZWExMTNjIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6OTdiNTkxOTUtZGEyZi1mZDQ2LTk3ZjQtNDBlYjU3ZTc5Y2I4IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTdiNTkxOTUtZGEyZi1mZDQ2LTk3ZjQtNDBlYjU3ZTc5Y2I4IiBzdEV2dDp3aGVuPSIyMDIyLTEwLTIxVDEwOjI5OjU3KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuNSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmYxZWJlNDIxLTNmOWYtYWU0NS1iMTVmLTg5NTY5ODI5NTVjZCIgc3RFdnQ6d2hlbj0iMjAyMi0xMC0yMVQxMDoyOTo1NyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjUgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PooSsWIAAAAfSURBVAiZY/j//z8DEwMDAwMDFhaEeLe/7D+6GBYCABBIDy1kPlezAAAAAElFTkSuQmCC'

xAxis: [
      {
        type: 'category',
        data: xData,
        axisLabel: {
          textStyle: {
            fontSize: 12, // 字体大小
            lineHeight: 14,
            color: '#EDBE75'
          },
          // 图表添加下划线
          formatter: (val) => {
            return `{underline|${val}}`
          },
          rich: {
            underline: {
              backgroundColor: { image: underlineImage },
              fontSize:16
            }
          }
        },
        triggerEvent: true,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.75)'
          }
        }
      }
    ],