首页 前端知识 echarts legend 图例形状、图标与文字对齐

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

2024-08-14 00:08:34 前端知识 前端哥 312 824 我要收藏

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属性来控制图例与文字居中对齐

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15541.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!