echarts中使用区域选择（brush）

场景

在某些按周月年统计中，我们想看到任意某几天区域的数据总和时使用

效果

代码实现主要点

          /*添加*/
          brush: {
            toolbox: ['lineX', 'clear'],
            xAxisIndex: 0,
            throttleType: 'debounce',//开启选中延迟后调用回调延迟
            throttleDelay: 600,//选中延迟后调用回调延迟时间

          },


        /*添加*/
        myChart.off("brushSelected");//解绑事件处理函数（可根据情况而定是否需要，这里我这边会重绘几次表，所以需要解绑事件处理函数）。
        myChart.on('brushSelected', renderBrushed);
        function renderBrushed(params) {
          // console.log('params',params);
          var brushed = [];
          var brushComponent = params.batch[0];
          // for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
          //   var rawIndices = brushComponent.selected[sIdx].dataIndex;
          //   brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
          // }
          let numArray=[];//选中范围
          if(brushComponent.areas[0]!==undefined){
            numArray=brushComponent.areas[0].coordRange;
          };
          // console.log('numArray',numArray);
          let TotalAdd=0;//总销售金额
          let TotalNum=0;//总销售数量
          let RealityAdd=0;//实际销售金额
          let RealityNum=0;//实际销售数量
          let CancelRefundAdd=0;//取消及退款销售金额
          let CancelRefundNum=0;//取消及退款销售数量
          if(numArray.length>0){
            self.$notify({
              title: '统计值',
              dangerouslyUseHTMLString: true,
              message: '<strong>总销售金额： <i>'+TotalAdd+'</i> 元</strong></br>' +
                '<strong>数量： <i>'+TotalNum+'</i> 盒</strong></br>' +
                '<strong>实际销售金额： <i>'+RealityAdd+'</i> 元</strong></br>' +
                '<strong>数量： <i>'+RealityNum+'</i> 盒</strong></br>' +
                '<strong>取消及退款金额： <i>'+CancelRefundAdd+'</i> 元</strong></br>' +
                '<strong>数量： <i>'+CancelRefundNum+'</i> 盒</strong></br>',
              offset: 100,
              duration:60000
            });
          }
        }

全部代码实现（参考）数据处理可忽略

SaledrawLine(){
        let self=this;
        let XData=[];//X轴
        // 总销售数据
        let TotalDataArrObj={
          TotalDataArr:[],
          TotalDataArrNum:[],
        };
        //取消或退款数据
        let CancelRefundDataArrObj={
          CancelRefundDataArr:[],
          CancelRefundDataArrNum:[],
        };
        // 实际销售数据
        let RealityDataArrObj={
          RealityDataArr:[],
          RealityDataArrNum:[],
        };
        if(this.SaledrawLineObj!==null&&this.SaledrawLineObj!==undefined&&this.SaledrawLineObj!=={}){
          this.SaledrawLineObj.TotalData.forEach(function (item) {
            XData.push(item.time);
            TotalDataArrObj.TotalDataArr.push(item.cashamount);
            TotalDataArrObj.TotalDataArrNum.push(item.ordercount);
          });
          this.SaledrawLineObj.CancelRefundData.forEach(function (item) {
            CancelRefundDataArrObj.CancelRefundDataArr.push(item.cashcramount);
            CancelRefundDataArrObj.CancelRefundDataArrNum.push(item.ordercount);
          });
          this.SaledrawLineObj.RealityData.forEach(function (item) {
            RealityDataArrObj.RealityDataArr.push(item.cashamount);
            RealityDataArrObj.RealityDataArrNum.push(item.ordercount);
          });
        }
        // 基于准备好的dom，初始化echarts实例

        let myChart = echarts.init(self.$refs.Salechart);
        // myChart.dispose()
        myChart.clear();//清空画布防止缓存

        // 绘制图表
        let option = {
          title: {
            text: ''
          },
          color:['#EFF3FF','#15A8FD','#8cd5c2','#7cd5c2','#8cd1c2'],
          tooltip: {//hover效果
            trigger: 'axis',
            formatter: function(params){
              // console.log(params)
              var res;
              res= '<div style="z-index: 1000"><div><span></span>'+params[0].name+'</div>' +
                '<div><span><span style="background-color: #5B8FF9;display: inline-block;width: 10px;height:10px;border-radius: 50%;"></span>&nbsp;总&nbsp;销&nbsp;售&nbsp;：</span>'+allFun.twoNnumthere(params[0].data)+'元</div>' +
                '<div><span><span style="background-color: #5B8FF9;display: inline-block;width: 10px;height:10px;border-radius: 50%;"></span>&nbsp;订单数量：</span>'+TotalDataArrObj.TotalDataArrNum[params[0].dataIndex]+'</div><br/>'+
                '<div><span><span style="background-color: #5AD8A6;display: inline-block;width: 10px;height:10px;border-radius: 50%;"></span>&nbsp;实际销售：</span>'+allFun.twoNnumthere(params[1].data)+'元</div>' +
                '<div><span><span style="background-color: #5AD8A6;display: inline-block;width: 10px;height:10px;border-radius: 50%;"></span>&nbsp;订单数量：</span>'+RealityDataArrObj.RealityDataArrNum[params[0].dataIndex]+'</div><br/>'+
                '<div><span><span style="background-color: #FE947F;display: inline-block;width: 10px;height:10px;border-radius: 50%;"></span>&nbsp;取消及退款：</span>'+allFun.twoNnumthere(params[2].data)+'元</div>' +
                '<div><span><span style="background-color: #FE947F;display: inline-block;width: 10px;height:10px;border-radius: 50%;"></span>&nbsp;订&nbsp;单&nbsp;数&nbsp;量：</span>'+CancelRefundDataArrObj.CancelRefundDataArrNum[params[0].dataIndex]+'</div></div>';
              return res
            }
          },
          textStyle:{
            borderColor:'#B2B2B2',
            borderWidth:1,
            padding:5
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {},
            right:0,
            top:50,//工具栏位置
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: XData,
          },
          yAxis: {
            name:'单位(元)',
            type: 'value',
            axisLine:{
              show:false
            }
          },
          series: [
            {
              name: '总销售',
              type: 'line',
              data: TotalDataArrObj.TotalDataArr,
              smooth: true,
              itemStyle: {//线条色
                color: '#799ADA'
              },
              areaStyle: {//背景色
                color: '#EFF3FF'
              },
            },
            {
              name: '实际销售',
              type: 'line',
              data:RealityDataArrObj.RealityDataArr,
              smooth: true,
              itemStyle: {//线条色
                color: '#5AD8A6'
              },
              areaStyle: {//背景色
                color: '#DEEFF7'
              },
            }, {
              name: '取消或退款',
              type: 'line',
              aaa: 'ttttttttttt',
              data:CancelRefundDataArrObj.CancelRefundDataArr,
              smooth: true,
              itemStyle: {//线条色
                color: '#FE947F'
              },
              areaStyle: {//背景色
                color: '#DFE5EA'
              },
            },
          ],

          /*添加*/
          brush: {
            toolbox: ['lineX', 'clear'],
            xAxisIndex: 0,
            throttleType: 'debounce',//开启选中延迟后调用回调延迟
            throttleDelay: 600,//选中延迟后调用回调延迟时间

          },

        };
        myChart.setOption(option);

        /*添加*/
        myChart.off("brushSelected");//解绑事件处理函数。
        myChart.on('brushSelected', renderBrushed);
        function renderBrushed(params) {
          // console.log('params',params);
          var brushed = [];
          var brushComponent = params.batch[0];
          // for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
          //   var rawIndices = brushComponent.selected[sIdx].dataIndex;
          //   brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
          // }
          let numArray=[];//选中范围
          if(brushComponent.areas[0]!==undefined){
            numArray=brushComponent.areas[0].coordRange;
          };
          // console.log('numArray',numArray);
          let TotalAdd=0;//总销售金额
          let TotalNum=0;//总销售数量
          TotalDataArrObj.TotalDataArr.forEach((value, index, array)=>{
            if(index>=numArray[0] && index<=numArray[1]){
              // zxs.push(value);
              TotalAdd+=value;
            }
          });
          TotalDataArrObj.TotalDataArrNum.forEach((value, index, array)=>{
            if(index>=numArray[0] && index<=numArray[1]){
              TotalNum+=value;
            }
          });
          let RealityAdd=0;//实际销售金额
          let RealityNum=0;//实际销售数量
          RealityDataArrObj.RealityDataArr.forEach((value, index, array)=>{
            if(index>=numArray[0] && index<=numArray[1]){
              RealityAdd+=value;
            }
          });
          RealityDataArrObj.RealityDataArrNum.forEach((value, index, array)=>{
            if(index>=numArray[0] && index<=numArray[1]){
              RealityNum+=value;
            }
          });
          let CancelRefundAdd=0;//取消及退款销售金额
          let CancelRefundNum=0;//取消及退款销售数量
          CancelRefundDataArrObj.CancelRefundDataArr.forEach((value, index, array)=>{
            if(index>=numArray[0] && index<=numArray[1]){
              CancelRefundAdd+=value;
            }
          });
          CancelRefundDataArrObj.CancelRefundDataArrNum.forEach((value, index, array)=>{
            if(index>=numArray[0] && index<=numArray[1]){
              CancelRefundNum+=value;
            }
          });
          if(numArray.length>0){
            self.$notify({
              title: '统计值',
              dangerouslyUseHTMLString: true,
              message: '<strong>总销售金额： <i>'+TotalAdd+'</i> 元</strong></br>' +
                '<strong>数量： <i>'+TotalNum+'</i> 盒</strong></br>' +
                '<strong>实际销售金额： <i>'+RealityAdd+'</i> 元</strong></br>' +
                '<strong>数量： <i>'+RealityNum+'</i> 盒</strong></br>' +
                '<strong>取消及退款金额： <i>'+CancelRefundAdd+'</i> 元</strong></br>' +
                '<strong>数量： <i>'+CancelRefundNum+'</i> 盒</strong></br>',
              offset: 100,
              duration:60000
            });
          }
        }


      },

官方实例地址

https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-si2c2de3.html

（欢迎大家评论和提供意见）