echarts图例与文字对齐问题

 今天使用echarts时发现官网示例图例部分并没有进行对齐,一上一下逼死强迫症,经过对文档的查询,发现可以通过对textStyle-height以及rich的设置调整对齐方式

textStyle: {
            fontSize: 14,
            height: 10,
            rich: {
              a: {
                verticalAlign: 'middle',
              },
            }
          },

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要让 ECharts 图例多行信息显示并且图标首行对齐,可以通过设置图例对齐方式和样式来实现。具体步骤如下: 1. 设置图例对齐方式 在 ECharts 中,可以通过设置 legend.align 属性来控制图例对齐方式。将该属性设置为 'left'、'center' 或 'right' 可以让图例水平居左、居中或居右对齐。例如: ``` legend: { align: 'left', // 图例水平居左对齐 // ... } ``` 2. 设置图例的样式 在 ECharts 中,可以通过设置 textStyle 属性来控制图例项的样式。将该属性设置为一个样式对象,可以对图例项的文字样式进行统一设置,例如: ``` legend: { textStyle: { fontSize: 12, // 图例文字的字体大小 lineHeight: 20 // 图例文字的行高 }, // ... } ``` 3. 设置图例项的高度ECharts 中,可以通过设置 legend.itemHeight 属性来控制图例项的高度。将该属性设置为一个数值,可以对图例项的高度进行统一设置,例如: ``` legend: { itemHeight: 20, // 图例项的高度为 20 // ... } ``` 综上所述,要让 ECharts 图例多行信息显示并且图标首行对齐,可以通过设置 legend.align、textStyle 和 legend.itemHeight 属性来实现。具体代码示例如下: ``` legend: { align: 'left', // 图例水平居左对齐 itemHeight: 20, // 图例项的高度为 20 textStyle: { fontSize: 12, // 图例文字的字体大小 lineHeight: 20 // 图例文字的行高 }, // ... } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值