echarts 柱状图数据过多时自动滚动

        当我们柱状图中X轴数据太多的时候,会自动把柱形的宽度挤的很细,带来的交互非常不好,我们可以用dataZoom属性来解决
简易的版本,横向滚动。

option.dataZoom = [
    {
        type: "slider",
        show: true,
        startValue: 0, //数据窗口范围的起始百分比
        endValue: 8,
     },
];

效果如下:

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

还可以在标签上设置鼠标放上去停止滚动

@mouseover="hovers = true" @mouseleave="hovers = false"

 

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-26 19:02:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-26 19:02:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-26 19:02:01       82 阅读
  4. Python语言-面向对象

    2024-01-26 19:02:01       91 阅读

热门阅读

  1. 每日OJ题_算法_二分查找③_力扣69. x 的平方根

    2024-01-26 19:02:01       58 阅读
  2. IDEA使用快捷键提炼函数(Extract Method)

    2024-01-26 19:02:01       49 阅读
  3. 字符串随机生成工具(开源)-Kimen(奇门)

    2024-01-26 19:02:01       48 阅读
  4. Angular封装HttpClient文件下载

    2024-01-26 19:02:01       43 阅读
  5. OpenGL顶点规范和绘图命令:图元类型 Primitive Types

    2024-01-26 19:02:01       48 阅读
  6. Win32 MDI 程序学习1

    2024-01-26 19:02:01       52 阅读
  7. 2d关键点可视化 coco转h36m人体关键点

    2024-01-26 19:02:01       53 阅读