Echarts 横向条形图的右侧标签靠右显示对齐，不被遮挡

@小匠

于 2024-07-31 18:24:23 发布

阅读量516

点赞数 3

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_45629145/article/details/140829647

版权

解决方案：
再添加一个y轴，隐藏刻度线即可。

配置如下：

在这里插入代码片yAxis: [{
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#EFEFEF', // 轴线颜色
              width: 1, // 轴线线宽
              type: 'solid' // 轴线线条类型，可选为 'solid'、'dashed'、'dotted'
            }
          },
          axisLabel: {
            color: '#323232', // 字体颜色
            fontSize: 12, // 字体大小
            // 其他字体样式属性，如 fontFamily, fontWeight 等
          },
          axisTick: {
            show: false // 隐藏y轴的刻度线
          },
          splitLine: {
            show: false // 如果需要的话，也可以隐藏y轴的分隔线
          },
          // 生成10个车牌号数据
          data: this.equipData.labels,
        },{
          type: 'category',
          data: this.equipData.values,
          axisTick: 'none',
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#979797', // 设置标签颜色为白色
            fontSize: 12, // 设置标签字体大小为 12
            formatter: function (value) {
              return `${value} 时/天`;
            }// 格式化数据值为 "x 小时/天" 的形式
          },
        },],