项目中使用echarts进行图表的绘制。在dom中设置了cssStyle样式
style={{width: "100%", height: 300}}.发现在切换tab展示的过程中，有些图表展示宽度变为100px。但是整个代码中并未设置过这个宽度。
echars默认使用canvas进行画图。查看Elements发现结果如下：
1. 将百分比识别为像素(px)
由上可知，应该避免使用百分比，全部使用px/rem/em等。
2. 给canvas元素设宽高使用其自身width/height属性
echarts3支持直接使用canvas元素初始化dom。
canvas元素本身的width/height属性决定画布的显示尺寸。当不设置width和height的属性值时，canvas元素默认width="300" height="150"。使用style或者class的样式进行尺寸设置时，只是将默认的画布进行拉扯。
-
使用width/height属性
<canvas key={lineDatas} width={928} height={300} ref={(ref: any) => {lineRef.current = ref;}}
展示效果如下：
-
使用style样式设置
<canvas key={lineDatas} style={{width: 928, height: 300}} ref={(ref: any) => {lineRef.current = ref;}}
展示效果如下：
