问题描述:
在绘制图表时,左侧 Y 轴有一条曲线,右侧 Y 轴有三条曲线。初始化时发现,图表的宽度变窄了,这在 PC 端不太明显,但在移动端特别明显。
没有右轴,图宽度正常。
高亮右轴,图宽度会变窄。
原因:
因为在options的配置中,设置了 “containLabel”: true 导致的。
"grid": {"top": 10,"bottom": 30,"left": 10,"right": 10,"containLabel": true}
https://echarts.apache.org/zh/option.html#%2Fsearch%2FcontainLabel
当 “containLabel”: true 配置被启用时,ECharts 会确保图表区域包含所有的标签,即确保图例、坐标轴标签等不会被裁剪。
这可能导致图表的绘制区域(即图表的实际显示区域)变小,从而影响图表的宽度,特别是在右侧有多条曲线时,这种影响更为明显。
我是设置了右轴,而且多个右轴,我只展示了一个,所以当点击图例的时候,由于设置了 “containLabel”: true,
图会动态计算宽度,从而会变窄。
所以,没有右轴图的时候,宽度正常。
当我点击右轴图的时候,宽度会变窄。