Echats----实现效果,一个datazoom同时控制两个图表

Echats----实现效果,一个datazoom同时控制两个图表

效果描述
1.Echarts是一种通过配置来实现一些图表效果的工具,本身的使用难度并不大。
但是,往往项目的本身需要一些特殊的效果,并不能通过直接的配置来解决问题,
这个时候可能会遇到一些难题。
2.通过查询结果网上的解决方法都是解决通过datazoom控制两个纵向排列的图表,
而参与项目则是需要实现控制两个横向的图表,并附带两图表的合并效果。
解决方法

尝试方法:

同一个图表中设置两个grid/两套坐标轴,通过left,top来控制grid的位置。通过datazoom的 xAxisIndex/ yAxisIndex属性来确定datazoom可以控制那些x轴或者y轴。(缺陷:通过尝试无法实现图表合并现效果的动画)

实现方法:
1.使用来那个div,来放置两个图表,一个大的div,一个小的div,大div的作用用来显示完整的拖动轴(datazoom),小的div不显示datzoom。
2.通过echarts的connect方法将两个图表链接起来,这样他们可以公用一个datazoom了,同时因为两个图表在两个图表中也不会影响他们实现一些动画效果,、。
如图:
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值