echarts框选+缩放折线图

分别用brush和dataZoomSelect组件,做出框选,缩放效果,highcharts上有现成使用的方法,echart需要自己去找,特表是dataZoomSelect,在toolbox上自动开启,就可以直接使用,另外本来打算自己写个d3的方法,但是,d3上关于获取框选数据这一块比较麻烦,只能定位坐标,根据坐标计算框选的数据,计算过程略微复杂。写到一半,放弃了,主要是项目时间紧张,略略略。

1.使用dataZoomSelect

配置项说明

toolbox:{
      feature : {
            dataZoom : {
                      yAxisIndex : "none"   //不启用y轴的选中
            }
      }
}

方法使用dispatchAction

myChart.dispatchAction({
      type : "takeGlobalCursor",
      key : "dataZoom",
      dataZoomSelectActive : true
})

在图形缩放时触发函数

myChart.on("dataZoom",function(param){
        //缩放时触发函数
})

2.使用brush

brush配置

brush: {
       toolbox: ['lineX'],
       xAxisIndex: 'all',
       throttleType: 'debounce',
       throttleDelay: 100,
       outOfBrush: {
               colorAlpha: 1
       },
       inBrush: {
               colorAlpha: .3
       }
}

方法使用dispatchAction

myChart.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'brush',
       brushOption: {
              brushType: 'lineX'
       }
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • d3 (核心部分)选择集d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文...
    谢大见阅读 3,471评论 1 4
  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,651评论 1 180
  • 昨天是百班千人共读活动打卡的第一天,已经有好些同学和家长都认真参与进来了。虽然我们是农村孩子,家长们上班也很忙,但...
    Sunny的阳光小屋阅读 609评论 0 1
  • 无解 (文/亦浓) 偶然的眷顾 认认真真的想念 万千红颜 一张平凡的图片 落红流水 何苦痴恋 思无解 将离
    开在夜里的花儿阅读 188评论 0 6
  • 谈了再多任也不如他那般深刻,时间和新欢都是在扯淡? 到2015年最后一天为止,我和他分手就已经三年了。这三年里,我...
    茶木森阅读 283评论 2 1