2025-05-29 09:22AM
在项目中,图例过多就会产生文字重叠,如下图所示:
要实现图例自动右移,避免与图表名称重合
可以使用 ECharts 的 legend
的 right
属性和 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 */
}
页面展示:
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论