需求描述

接到需求在一个xAxis坐标轴为time类型，series的type类型为line的可视化图表上，用brush圈选出图表上的任何一段数据，然后根据不用数据做出不同的操作。本来以为很简单调一下方法，去翻文档的时候发现：

1、不支持line

2、不支持xAxis坐标轴为time时间轴（不用的轴的区别这里不多赘述）

难搞哦！

简单配置

首先先走官网下载一个例子

官网链接：https://echarts.apache.org/examples/zh/index.html

启动brush也有两种方案：

1、通过toolbox指定按钮。（详情参加brush.toolbox）

 brush: {  
      xAxisIndex: 'all',//指定哪些 series 可以被刷选
      throttleType: "debounce", //开启选中延迟后调用回调延迟 
      throttleDelay: 600, //选中延迟后调用回调延迟时
      brushStyle: {                  
         borderWidth: 1,                    
         color: 'rgba(120,140,180,0.3)',                    
         borderColor: 'rgba(0,0,0,.65)'  
       }            
  },            
  toolbox: {                
    show: true, //可以设置不同的按钮           
  },

2、通过调用 dispatchAction 来用程序主动渲染选框

Chart是当前图表的实例。

根据需求我用的这一种方式。

Chart.dispatchAction({
      type: 'takeGlobalCursor',
      // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
      key: 'brush',
      brushOption: {
           // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
           brushType: 'lineX',                    
           // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置
           brushMode: 'single'              
       }            
     });            
myChart.on('brushEnd', renderBrushed); //圈选结束后的回调

xAxis坐标轴为time类型和其他类型

1、xAxis坐标轴type为time（时间轴）返回的坐标系单位？

2、xAxis坐标轴type为category（类目轴）,根据返回的下标去option里得series查找数据

series的type类型为line类型和其他类型

1、bar类型使用brushselected方法返回dataIndex下标去查找数据

2、line类型，返回的是空。文档也有说明不支持line。

解决方案

思路：brush之后会返回圈选矩形的left和top，刷子的矩形范围可以取的到，那再去取每个点的坐标，然后判断每个点是否在这个矩形里面，这样就可以获取到圈选了哪些数据！但是并没有返回每个点的left和top，最后在图表的自身实例上找到了

废话少说，贴代码

function renderBrushed(params) { 
    if (params.areas.length != 0) {
        let p = {}; // 矩形范围
        p.left = params.areas[0].range[0];
        p.right = params.areas[0].range[1];
        let arr = myChart._chartsViews[0]._points.map(([left], i) => left >= p.left && left <= p.right ? i : -1).filter(i => i >= 0);
       //获取不同维度的数据
       console.log(arr.map(i => ([...option.series.map(s => s.data[i])])))               
       console.log(option.series.map(s => ([...arr.map(i => s.data[i])])))
    };
}

两种维度的数据获取方式，完美解决！

结尾

写的不好或者其他解决方案的欢迎交流、指点！

战胜困难的最好办法就是面对困难，加油，奥利给！