echarts 柱状图数据过多时自动滚动
当我们柱状图中X轴数据太多的时候,会自动把柱形的宽度挤的很细,带来的交互非常不好,我们可以用dataZoom属性来解决。如果需要自动滚动,需要再加个定时器,还可以在标签上设置鼠标放上去停止滚动。简易的版本,横向滚动。
·
当我们柱状图中X轴数据太多的时候,会自动把柱形的宽度挤的很细,带来的交互非常不好,我们可以用dataZoom属性来解决
简易的版本,横向滚动。
option.dataZoom = [
{
type: "slider",
show: true,
startValue: 0, //数据窗口范围的起始百分比
endValue: 8,
},
];
效果如下:

如果需要自动滚动,需要再加个定时器,

还可以在标签上设置鼠标放上去停止滚动
@mouseover="hovers = true" @mouseleave="hovers = false"
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐



所有评论(0)