Vue3+Echarts 图例对齐问题

最新推荐文章于 2024-07-18 15:48:23 发布

程序媛小白白

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量225

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_46382462/article/details/130244833

版权

多个图例如何每行对齐

原本的样式是这样

可以通过下面的代码设置legend成为这样

legend部分代码如下：

legend: {
      data: ['第一', '第二', '第三','第四','第五','第六', '第七', '第八','第九','第十'],
      right: 0,
      top: 400,//垂直定位 可根据需求改动 我这个需求是位于环形图底部
      width: 500, // 每一行图例的宽度 根据需求改动 
      formatter: [
        '{a|{name}}'
      ].join('\n'),
      textStyle: {
        rich: {
          a: {
            width: 50, // 单个图例的宽度
            lineHeight: 12,
            color: '#fff',
            fontSize:10,
          }
        }
      }
    },