精选文章 echart图表缩放到一定比例(可自定义)后,停止放大,还可以缩小回去

echart图表缩放到一定比例(可自定义)后,停止放大,还可以缩小回去

作者:极客曼巴 时间: 2020-07-28 01:30:01
极客曼巴 2020-07-28 01:30:01

一、需求:

      有时候,我们有这样的需求:当echart图表(特别是折线图)的数据量很大,客户要求可以放大图表来仔细查看数据。echart有dataZoom这种技术来支持,也蛮好用的。但是有的客户就是很刁钻,要求放大到一定的程度都就不让缩放了(dataZoom会放的很大很大)。那怎么办呢???

二、网上现状:

1.说改源码可以解决。但是,我想说我不是前端工程师啊,怎么改?参考网上的回复:https://segmentfault.com/q/1010000014751205

2.查看各种文档,找到了一个dataZoom的配置项:zoomLock。信心来了,开始干吧!

  1)动态的改变dataZoom中zoomLock来实现。

   步骤:

    a.获取echart对象

    b.获取option属性

    c.获取dataZoom数组(数组通常有两个对象,zoomLock配置在哪个对象,根据自己的情况而定)

    d.获取zoomLock属性,并重新赋值

  备注:这个方法并没有生效,不知道这样做是不是不规范的。动态的改变属性,失败了。

  2)动态设置option

   步骤:

    a.把option抽离出去,定义为一个变量。我用的是vue,在data里面定义就可以了。

    b.当图表放大到一定时候,获取chart对象并setOption()即可。

   备注:问题有点眉目了。当放大到一定的程度的时候,图表真的就被禁止缩放了。然而新的问题由来了:1.图表回到了原始大小。2.禁止放大后,如果我要缩小回去呢?就不能操作了。怎么办???

3.新问题解决

    1)图表禁止放大后,回到放大前的效果。

        问题分析:通过获取option可以知道,放大后的option里面的数值(x周,series等)并没改变。可以确定的是,放大后的效果和图表数据没有关系。再看看dataZoom绑定的方法的参数,发现起始参数回到了初始值。问题就找到了。

        问题解决:

         a.在dataZoom绑定的方法的中记录(定义变量来存下来)下每次缩放是的起始值。

         b.当确定要禁止放大的时候,把记录下来的起始值重新赋值给dadaZoom。

         c.重新setOption.

         部分代码:param是dataZoom绑定的方法传入的参数。

    if(param.batch){
        this.zoomStart = param.batch[0].start;
        this.zoomEnd = param.batch[0].end;
    }else{
        this.zoomStart = param.start;
        this.zoomEnd = param.end;
    };
    重新赋值:
    this.option.dataZoom[1].start = this.zoomStart;
    this.option.dataZoom[1].end = this.zoomEnd;
    this.option.dataZoom[1].zoomLock = false;

   2)禁止放大后,我要缩小回去怎么办呢?此时已经禁止缩放功能了。

     问题分析:1.此时已经不能缩放图表了,显然我们不能再在dataZoom上面做文章。2.可以新增按钮,触发事件去改变dataZoom,但是新增按钮显然不是很美观。3.可以绑定js的鼠标滑轮事件,来改变dataZoom,并setOption来实现。

     问题解决:

        a.js绑定一个鼠标滑轮事件,参考代码如下:

     window.addEventListener('mousewheel',this.handleScroll,false);

        b.在this.handleScroll方法中处理“禁止放大”时的一切操作。不同的是放开zoomLock 锁定:

     this.option.dataZoom[1].zoomLock = false;

        c.这里有个小技巧,为了避免继续放大,在this.handleScroll方法中可以判断滚动的方向。一般来说前滚是放大,后滚是缩小。如果是继续放大,就不做处理,缩小就放开zoomLock为false。参考伪代码:
          handleScrol(e){
               if(e.zrDelta === -1){

                   do something.....

               }

           }

到这里问题都解决了,很多细节的问题各不相同就不多赘述。

三、疑问解答:

1.什么时候处理“禁止放大”的操作?

答:dataZoom绑定的方法中判断start和end来处理。

2.绑定的鼠标滑轮时间和dataZoom的事件有没有冲突?

答:不会有,当图表可以滚动的时候,自定义的滑轮事件会失效,反之亦然。

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:ssrs 数据分页_如何在SSRS中使用JSON数据

下一篇:Linux 命令的初学习5

您可能感兴趣

  • HDFS的功能和架构原理详解

    目录 一、分布式文件系统的理解 二、HDFS的架构详细剖析 1. 文件分块存储&3副本 2. 抽象成数据块的好处 3. HDFS架构 4. 扩展 三、HDFS的shell命令操作 四、HDFS安全模式 一、分布式文件系统的理解 最直观的理解便是三个臭皮匠,顶个诸葛亮。 很多的磁盘加一起就可以装下天下所有的avi 类似于你出五毛,我出五毛,我们一起凑一块的效果 如下图: 二、HDFS的架构详细...

  • Unity渲染教程(九):复杂材质 https://www.jianshu.com/p/5e3af869870f

    Unity渲染教程(九):复杂材质 https://www.jianshu.com/p/5e3af869870f 同样的着色器,不同的贴图 用户界面 到目前为止,我们一直都为我们的材质使用Unity默认的材质监视器,它很耐用,但是Unity的标准着色器长得非常不一样。仿照着标准着色器,让我们一起来为我们自己的着色器创建一个自定义监视器吧。 我们默认的监视器和标准着色器监视器 着色器GUI 我...

  • 美团数据库运维自动化系统构建之路

    本文整理自美团点评技术沙龙第10期:数据库技术架构与实践。 美团点评技术沙龙由美团点评技术团队主办,每月一期。每期沙龙邀请美团点评及其它互联网公司的技术专家分享来自一线的实践经验,覆盖各主要技术领域。 目前沙龙会分别在北京、上海和厦门等地举行,要参加下一次最新沙龙活动?赶快关注微信公众号“美团点评技术团队”。 本次沙龙主要围绕数据库相关的主题,内容包括美团数据库自动化运维系统构建、点评侧My...

  • 美团点评移动网络优化实践

    本文根据第16期美团点评技术沙龙“移动开发实践(上海站)”演讲内容整理而成。 第18期沙龙:高可用系统背后的基础架构(3月25日)火热来袭!快快点击报名吧。 网络优化对于App产品的用户体验至关重要,与公司的运营和营收息息相关。这里列举两个公开的数据: “页面加载超过3秒,57%的用户会离开。” “Amazon页面加载延长1秒,一年就会减少16亿美金营收。” 在做网络优化前,我们首先要为网络...

  • 适合新手练习的Python项目有哪些?

    适合新手练习的Python项目有哪些?简单易上手的Python项目汇总:Web 项目设计:内容聚合器、正则表达式查询工具、网址缩短、便利贴、功能、测验、GUI 项目设计:MP3 播放器、闹铃提醒工具、文件管理器、记账功能、命令行项目设计:通讯录、网站连接检查、批量文件重命名工具、目录树生成器。   一、Web 项目设计:内容聚合器(Content Aggregator)   该项目设计的主要...

  • 诺瓦笔试2020.8.4

    1、Socket通信步骤 建立一个服务器SeverSocket,并同时定义好SeverSocket的监听端口 SeverSocket调用accept()方法,使之处于阻塞 创建一个客户机Socket,并设置好服务器的IP和端口 客户机发出连接请求,建立连接 分别获取服务器和客户端SeverSocket和Socket的InputStream和OutStream 利用Socket和SeverSo...

  • JVM调优简单理解

    Java堆(Heap)结构图:https://mp.csdn.net/console/editor/html/107782139 项目环境:分布式、高并发 运行参数调优 查看 GC 日志 dump JDK8堆 做管理时只管理新生代和老年代,元空间由操作系统管理。当内存不足时,就需要进行伸缩区的控制,当内存充足时,就需要考虑将伸缩区所占的内存释放掉,这样来回进行操作,一定会造成额外的计算性能的...

  • 基础知识二

    重载(Overload)和重写的区别.重载的方法能否根据返回类型进行区分. 重载:在同一个类中,方法名相同,参数列表不同(参数类型不同,参数个数不同或者两者都不同),就是重载,重载对返回类型没有特殊要求,也就是说重载的方法不能根据返回类型进行区分. 重载的规则: 1)、必须具有不同的参数列表; 2)、可以有不同的返回类型,只要参数列表不同就可以了; 3)、可以有不同的访问修饰符; 4)、可以...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。