ECharts之动态缩放中x轴或者y轴名称显示不全

如果对你有用的话，望来个一键三连^^_^^

0 问题描述

动态缩放中x轴或者y轴名称显示不全，如图所示

1 分析归因

可能是左边距太小，亦或者y轴nameGap太大，这两个都好解决。

2 解决方案

2.1 左边距太小

增大左间距

grid: {
  // 距离容器上边界40像素
  bottom: '15%', // 下边界距离
  right: '13%', // 右边界距离
  //left: '2%', // 左边界距离
  left: '5%', // 左边界距离
},

就能看到了

进一步的问题，当在更小的屏幕上显示时候又会出现显示不全，研究测试 containLabel: true // 保证label不会被挤掉 这个是有用的

grid: {
  // 距离容器上边界40像素
  bottom: '15%', // 下边界距离
  right: '13%', // 右边界距离
  //left: '2%', // 左边界距离
  containLabel: true // 保证label不会被挤掉
    
},

2.2 y轴nameGap太大

当nameLocation为'middle'时候，减小nameGap

yAxis: {
  nameGap: 65,
  nameLocation: 'middle'
}

也能看到了

3 原理探究

待补充

4 注意事项

待补充

5 拓展思路

待补充