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不会被挤掉
    
},

containLabel说明

2.2 y轴nameGap太大

当nameLocation为’middle’时候,减小nameGap

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

也能看到了
在这里插入图片描述

3 原理探究

待补充

4 注意事项

待补充

5 拓展思路

待补充

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
ECharts 提供了一些交互组件,包括缩放工具(toolbox)。通过在 toolbox 配置 dataZoom 组件可以实现缩放功能。 下面是一个简单的例子,展示了如何在 y 上使用缩放工具放大缩小: ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, dataZoom: [{ type: 'inside', start: 0, end: 100 }, { start: 0, end: 100, handleIcon: 'M10.7,11.3c0,0.4,0.1,0.7,0.2,1c0.3,0.7,1,1.2,1.8,1.2c1.1,0,2-0.9,2-2c0-0.8-0.4-1.5-1.2-1.8c-0.3-0.1-0.6-0.2-1-0.2c-0.8,0-1.5,0.4-1.8,1.2c-0.1,0.3-0.2,0.6-0.2,1z m-2.7,0c0-0.4-0.1-0.7-0.2-1c-0.3-0.7-1-1.2-1.8-1.2c-1.1,0-2,0.9-2,2c0,0.8,0.4,1.5,1.2,1.8c0.3,0.1,0.6,0.2,1,0.2c0.8,0,1.5-0.4,1.8-1.2c0.1-0.3,0.2-0.6,0.2-1z m-2.7,0c0-0.4-0.1-0.7-0.2-1c-0.3-0.7-1-1.2-1.8-1.2c-1.1,0-2,0.9-2,2c0,0.8,0.4,1.5,1.2,1.8c0.3,0.1,0.6,0.2,1,0.2c0.8,0,1.5-0.4,1.8-1.2c0.1-0.3,0.2-0.6,0.2-1z', handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; ``` 在该示例,我们在 toolbox 配置了 dataZoom 组件,并将 yAxisIndex 设置为 'none',这样 dataZoom 只会对 x 进行缩放。然后,我们在 option 添加了一个 dataZoom 组件,通过设置 start 和 end 属性来限制缩放的范围。最后,我们将 series 的类型设置为 'line',并提供了一些示例数据。 缩放工具的使用方法还有很多,以上仅是一个简单的示例。如果你需要更详细的信息,请参阅 ECharts 文档的 dataZoom 组件文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RayFet

你的鼓励是我进步的第二大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值