bug分析专栏：最近在项目上的bug出现的比较多，想着可以记录一下各种奇怪五花八门的bug的分析和解决方案，越发的觉得对bug的分析和解决更能提升代码的逻辑思维，尤其是对于一个自己不熟悉的项目，react写的也比较少，刚上手的项目就让我直接改bug，确实是一个挑战，针对各种bug做一个简单的记录。
问题描述
在业务中出现了一个图标的宽度发生改变的问题。具体表现为曲线图中，x轴的坐标数据都挤在一块，导致整个图标的宽度变得很小。但是可以看出我们的图表整体的数据仍然存在，x轴和y轴的数据也没有问题。
这个问题是由于图标的宽度变化引起的，导致坐标数据显示异常。接下来记录一下对该问题的分析和解决。
业务代码
js
<Chart
height={500}
padding={['2%', 'auto', '30%', 'auto']}
style={{ width: '100%' }}
data={props.tempValusData}
scale={props.chartcols}
forceFit
>
<Legend position="bottom" />分析BUG
1.出现概率：问题出现的复现率不是百分百，只是单单这个表格出现了宽度的变化，
-
x轴坐标数据挤在一块： 由于图标宽度的改变，x轴上的坐标数据被挤在一块，导致显示异常。
-
整体图标宽度变得很小：虽然宽度改变了，但是整体的数据没有发生变化，问题仅仅表现在图标压缩了。
问题定位
第一猜测是canvas的宽度设置了固定宽度，但是可以看到在Chart的元素中只有高度的一个声明，没有对宽度的一个限制
并且其他的chart没有出现宽度的压缩
再次对比了一下正常的chart，发现出现问题的图表下方的lengend标签，貌似超过了父级div的宽度，导致部分lengend没有显示完整
可以看到标签的长度已经超出并且被隐藏，到这里笔者觉得就是这里出现的问题
下方的标签长度太长超过了外层父级div，导致上层的图表被压缩，有经验的开发者应该也会遇到过这个问题
解决流程
问题解决之前不清楚标签使用的元素是什么，所以到官网查一下
可以看到代表的是legend元素
定位到的问题是legend的长度过长，那么就需要对legend的元素进行处理
在legend标签中可以看到有一个itemFormatter的传参，这个是用于处理标签的返回的，在这里对长度进行一个处理，如果超过了20个的字数，就进行省略的操作
js
const legendItemFormatter = val => {
// 在这里进行字符串截断或其他处理，确保文本长度不超过你想要的长度
const maxLength = 20;
return val.length > maxLength ? val.slice(0, maxLength) + '...' : val;
};
return (
<>
<Chart
height={500}
padding={['2%', 'auto', '30%', 'auto']}
style={{ width: '100%' }}
data={props.tempValusData}
scale={props.chartcols}
forceFit
>
<Legend position="bottom" itemFormatter={legendItemFormatter} />解决效果
解决完成后效果如下，确实图表的压缩是由于下方legend的超出把图标挤在一起了，使用itemFormatter来对legend返回的标签做处理，做出长度限制即可。
