echart框选--适用于散点,柱状, 折线图

在官方的文档中,我们可以容易查找到关于散点,还有柱状图的框选api
在这里插入图片描述
是的,通过这样的一段代码,在实例中触发brushSelected事件,就可以得到我们想要的数据,但是,在项目中,我接到得需求是如何在通过框选折线图进行跳转。
目前,echarts的官方只是提供了散点及柱状图的框选功能,折线图的并没有!
而我的方法则可以分为三个部分:

1.在配置echarts实例的option配置项中,series属性,添加bar也就是柱状图的显示,同时,这个在官方的实例中,我们可以找到

2.将柱状图的颜色设置为透明(这样就能完美隐藏柱状图,同时,显示折线图)

3.option中,brush的配置也要进行设置:
brush:{
toolbox:[‘lineX’],
xAxisIndex:0,
outOfBrush:{
opacity:0 //这个代码主要是在brush过程中,隐藏掉方框外的柱状图
}
}
在这里插入图片描述
上述,是我代码
通过,brushSelected获取到对应的时间,然后,再通过jquery的mouseup事件进行跳转,注意,对数据进行判断,否则,没得到数据就跳转了
觉得好,就給个赞吧!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts官方提供的文档中,我们可以找到关于散点图和柱状图框选功能的API。然而,对于折线图框选功能,目前官方并没有提供相应的支持。但是,根据我的方法,你可以通过以下三个步骤来实现折线图框选功能: 1. 首先,你需要在echarts实例的配置项的series属性中添加折线图的显示。这可以通过在option配置项中添加line属性来实现。 2. 其次,你需要为折线图添加框选功能。你可以通过在option配置项中的toolbox属性中添加brush工具来实现。brush工具可以允许用户框选并选择想要的数据。 3. 最后,你可以在实例中触发brushSelected事件来获取用户框选的数据。这样,你就可以根据用户的选择进行相应的跳转或其他操作。 需要注意的是,以上方法是基于我研究的资料和经验提供的,因此可能会有一些限制和局限性。如果官方未提供折线图框选功能,可能需要通过自定义或其他方式来实现你的需求。 综上所述,你可以尝试通过添加折线图的显示、添加框选功能,并通过触发brushSelected事件来实现echarts折线图框选功能。希望这能对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [echart框选--适用散点柱状折线图](https://blog.csdn.net/weixin_44437473/article/details/105223087)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [后端:SpringBoot 前端:Vue+Echarts基于校园一卡通的学生考勤信息分析展示系统设计与实现](https://download.csdn.net/download/a332324956/85122259)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值