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,
      },

.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 */
}