echarts legend 图例形状、图标与文字对齐

gyuhao_o

已于 2022-09-14 16:16:29 修改

阅读量1w

点赞数 6

文章标签： echarts 前端 javascript vue.js

于 2022-09-14 16:16:12 首次发布

本文链接：https://blog.csdn.net/m0_48571414/article/details/126854426

版权

1、设置图例的图标形状，参考此文章

2、图标与文字对齐，参考此文章

legend: {
     icon: "roundRect",
     left: 'right',
     data: ['最高分','平均分','最低分'],
     itemHeight: 6,
     itemWidth: 18,
     textStyle: {
          fontSize: 14,
          lineHeight: 14,
          rich: {
              a: {
                 verticalAlign: 'middle',
              },
          },
          padding:[0,0,-2,0],  //[上、右、下、左]
     },
},

注意点：

1、icon：修改图例图标的形状，可以参考文章1，选择更多形状；

2、itemHeight和itemWidth：分别设置图标的高、宽；

3、textStyle中的rich属性控制图例和文字对齐方式，可选为top、middle、bottom。参考文章2的两种解决方法，在我的项目中需要通过padding属性来控制图例与文字居中对齐。