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

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

echarts中使用区域选择（brush）相关推荐

echarts js 删除框选数据_ECharts进行区域选择
action.brush | * 区域选择相关的行为. action.brush.brush | * 触发此 action 可向 echarts 中添加一个或多个选框,例如:myChart ...
Echarts中对地图的指定区域文字展示指定的颜色
Echarts中对地图的指定区域文字展示指定的颜色项目场景: 为提高客户满意度,修改地图中某个区域的文字颜色解决方案: 通过修改series-map.data.label.color属性参考链接 ...
ECharts中setOption的title、tooltip、xAxis、yAxis、series、legend等参数的含义。
ECharts中setOption的title.tooltip.xAxis.yAxis.series.legend等参数的含义. title //标题设置 legend //图例控制 grid //图 ...
【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
4G EPS 中的小区选择
目录文章目录目录前文列表小区选择 RSRP(参考信号接收功率) RSRQ(参考信号接收质量) RSSI(接收信号强度指示) SINR(信号与干扰加噪声比) 前文列表 <4G EPS 中的 ...
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
在Excel中实现下拉列表选择录入
我们在用Excel录入表格数据时,常常会遇到某列数据的值只在几个固定值中选择一个的情况,比如:人的性别列只可能录入男或女,对学历列只可能录入高中.大专.本科.研究生之一等.遇到这类数据,如果我们手工录 ...
Python读写Excel文件中指定区域单元格内容
封面图片:<Python程序设计基础(第2版)>,ISBN:9787302490562,董付国,清华大学出版社图书详情: 配套资源:用书教师可以免费获取教学大纲.教案.课件.源码.习题答 ...
在实际项目中，如何选择合适的机器学习模型？
https://blog.csdn.net/gitchat/article/details/78913235 本文来自作者 chen_h 在 GitChat 上分享「在实际项目中,如何选择合适的机器 ...

echarts中使用区域选择（brush）

场景

效果

代码实现主要点

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

官方实例地址

echarts中使用区域选择（brush）相关推荐

最新文章

热门文章