echarts中使用区域选择（brush）
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.clear();//清空画布防止缓存
// 绘制图表
let option = {
title: {
text: ''
},
color:['#EFF3FF','#15A8FD','#8cd5c2','#7cd5c2','#8cd1c2'],
tooltip: {//hover效果
trigger: 'axis',
formatter: function(params){
// (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> 总 销 售 ：</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> 订单数量：</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> 实际销售：</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> 订单数量：</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> 取消及退款：</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> 订 单 数 量：</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) {
// ('params',params);
var brushed = [];
var brushComponent = params.batch[0];
// for (var sIdx = 0; sIdx < ; sIdx++) {
// var rawIndices = [sIdx].dataIndex;
// ('[Series ' + sIdx + '] ' + (', '));
// }
let numArray=[];//选中范围
if(brushComponent.areas[0]!==undefined){
numArray=brushComponent.areas[0].coordRange;
};
// ('numArray',numArray);
let TotalAdd=0;//总销售金额
let TotalNum=0;//总销售数量
TotalDataArrObj.TotalDataArr.forEach((value, index, array)=>{
if(index>=numArray[0] && index<=numArray[1]){
// (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
});
}
}
},