主页

ECharts 设置图例换行

2025-05-29 09:22AM

在项目中,图例过多就会产生文字重叠,如下图所示:

要实现图例自动右移,避免与图表名称重合

可以使用 ECharts 的 legendright 属性和 padding 属性,并确保 grid 的设置适应图例的宽度。

代码实现:

修改src/pages/CalculationCharts/index.jsx文件:

      legend: {
        orient: 'horizontal',
        left: '13%', // 增加这个值以右移图例
        data: this.state.materials,
        itemWidth: 20,
        itemHeight: 14,
        padding: [10, 10], // 添加内边距以增加间隔
        formatter: (name) => {
          return `{a|${name}}`;
        },
        textStyle: {
          rich: {
            a: {
              width: 100, // 设置最大宽度
              overflow: 'truncate',
            },
          },
        },
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        borderWidth: 2,
        borderColor: 'black',
        show: true,
      },

修改src/pages/CalculationCharts/index.css文件:

.legend-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  max-width: 100%; /* 限制最大宽度 */
}

.legend-item {
  flex: 1 1 auto; /* 自动调整宽度 */
  white-space: nowrap; /* 防止纵向展示 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
  margin: 5px; /* 添加间距 */
  padding-left: 30px; /* 向右移动30px */
}

页面展示:

 

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论