echarts实现横向和纵向滚动条、dataZoom

这篇具有很好参考价值的文章主要介绍了echarts实现横向和纵向滚动条、dataZoom。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

使用echarts会遇到这种情况,以柱状图为例子,当数据过多时,echarts图就会堆叠在一起,看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度,但是若数据达到上百条,这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow: scroll;,这确实能解决一些问题,但是若是数据量过少,就会显的非常稀疏,经历过的都懂。言归正传,以上都不是最佳解决方式,echarts其实已经为提供好相应的API配置了,无论是横向滚动还是纵向滚动,dataZoom都能满足。文章来源地址https://www.toymoban.com/news/detail-514541.html


1、横向滚动条

dataZoom: [
    {
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: "slider",
        // 设置背景颜色
        backgroundColor: "rgb(19, 63, 100)",
        // 设置选中范围的填充颜色
        fillerColor: "rgb(16, 171, 198)",
        // 设置边框颜色
        borderColor: "rgb(19, 63, 100)",
        // 是否显示detail,即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值(一页显示多少条数据)
        endValue: 5,
        // empty:当前数据窗口外的数据,被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 设置滚动条宽度,相对于盒子宽度
        width: "50%",
        // 设置滚动条高度
        height: 8,
        // 设置滚动条显示位置
        left: "center",
        // 是否锁定选择区域(或叫做数据窗口)的大小
        zoomLoxk: true,
        // 控制手柄的尺寸
        handleSize: 0,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 3,
    },
    {
        // 没有下面这块的话,只能拖动滚动条,
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标滚轮触发滚动
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
    },
]

2、纵向滚动条

dataZoom: [
    {
        // 设置滚动条的隐藏或显示
        show: true,
        // 设置类型
        type: "slider",
        // 设置背景颜色
        backgroundColor: "rgb(19, 63, 100)",
        // 设置选中范围的填充颜色
        fillerColor: "rgb(16, 171, 198)",
        // 设置边框颜色
        borderColor: "rgb(19, 63, 100)",
        // 是否显示detail,即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值(一页显示多少条数据)
        endValue: 5,
        // 控制哪个轴,如果是number表示控制一个轴,
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // empty:当前数据窗口外的数据,被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 滚动条高度
        width: 8,
        // 滚动条显示位置
        height: "80%",
        // 距离右边
        right: 3,
        // 控制手柄的尺寸
        handleSize: 0,
        // 是否锁定选择区域(或叫做数据窗口)的大小
        zoomLoxk: true,
        // 组件离容器上侧的距离
        // 如果top的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐
        top: "middle",
    },
    {
        // 没有下面这块的话,只能拖动滚动条,
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 控制哪个轴,如果是number表示控制一个轴,
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标移动能否触发平移
        moveOnMouseMove: true,
        // 鼠标滚轮能否触发平移
        moveOnMouseWheel: true,
    },
]

到了这里,关于echarts实现横向和纵向滚动条、dataZoom的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目中el-tree :横向和纵向滚动条设置

    ①纵向滚动条容易设置,只需要在el-tree组件中设置height即可 ②横向滚动条稍微复杂,如下代码(或者通过js计算)

    2024年02月13日
    浏览(51)
  • 关于uniapp使用srcoll-view视图是横向及纵向滚动

            今天在用HBuilder X写uniapp项目时遇到了需要使用滚动视图的地方,为了简单省事自然就选择了srcoll-view这个标签。在写完后实验了一下,微信小程序时没有问题,但是h5页面却出问题了。         问题大致分为两类:横向、纵向         共有的问题有:给scroll-view加上

    2024年02月16日
    浏览(49)
  • element ui el-table表格纵向横向滚动条去除并隐藏空白占位列

    当table内容列过多时,可通过 height属性 设置table高度以固定table高度、固定表头,使table内容可以滚动 现在需求是 右侧滚动条 不好看,需要去 除滚动条 , 并隐藏滚动条所占列 的位置

    2024年02月04日
    浏览(50)
  • echarts通过dataZoom实现单击图像滑动

    实现原理; 1.option中配置初始化的dataZoom属性,并确定初始化数据展现位置 2.通过graphic属性配置图标及文本,并添加点击事件onclick; 3.通过dispatchAction的type: ‘dataZoom’,实现数据的最终展现。 效果:点击1图标,图像向左移一条数据,点击2图标,图像右移一条数据

    2024年01月16日
    浏览(56)
  • python实现两张图片左右(横向)和纵向(上下)拼接组合

    主要用于对两幅图像进行左右组合或者上下组合,详细代码如下: 左右组合 上下组合

    2024年02月15日
    浏览(54)
  • vue3 + Ant Design 实现双表头表格(横向表头+纵向表头)

     一、要实现的效果( 纵向固定表头的表格,横向表头数量动态化 ) 二、这是后台返回的数据格式(以企业为数组,每个企业里有个站点数组pointFactors)   三、代码实现步骤   (1)定义纵向固定表头 (2)动态生成横向表头( 从接口获取数据 )   (3)循环原始数据,生

    2024年02月04日
    浏览(50)
  • vue实现简单的鼠标拖拽横向滚动和 鼠标滚轮横向滚动

    第一种,按住鼠标拖拽滚动 以下代码项目中直接使用即可,此种方法是通过鼠标拖拽进行滚动,滑动滚轮无效果。 当然快捷键,shift+鼠标滚轮可以控制横向滚动,对用户来说体验不友好。 css代码 第二种方法是通过鼠标的滚轮进行滚动 css代码

    2024年02月11日
    浏览(45)
  • css 实现文字横向循环滚动

    ## 直接上代码,html部分

    2024年02月12日
    浏览(49)
  • vue 实现通过鼠标滚轮横向滚动

      鼠标放上去,滚动鼠标滚轮,可左右滑动标签内容  template 中的代码 css代码:  

    2024年02月05日
    浏览(52)
  • Excel·VBA表格横向、纵向相互转换

    如图:对图中区域 A1:M6 横向表格,转换成区域 A1:C20 纵向表格,即 B:M 列转换成每2列一组按行写入,并删除空行。同理,反向操作就是纵向表格转换成横向表格 实现方法1 对 本文图1 中,按“交期和交货数量”每5行2列为一组,依次按行写入,即按“交期”顺序排列 转换结果

    2024年02月14日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包