Echarts 报表使用一个图例legend实现全选和全部取消的功能

<div class="content">
<img id="zz" src="../../Image/Web/titleHour.png" alt="" class="logo">
<div id="crrentTime">0000-00-00 00:00:00</div>
<div class="layui-form" lay-filter="selectDate" id="searchDate">
<input type="text" id="Date" placeholder="yyyy-MM-dd HH:MM:SS" autocomplete="off" class="layui-input" style="width: 165px">
</div>
<a οnclick="newWinBtn();">
<div id="newWinBtn">Full Screen</div>
</a>
<div class="contentTop inlineFlex">
<div class="contentTopItem inlineFlex">
<div class="contentTopItemLeft">
<div class="title">
<div class="titleImg"><img src="../../Image/Web/headerLine.png" class="titleLine" alt=""></div>
<div class="titleText"><span class="titleSpan"></span>Proportion of GMV</div>
</div>
<div id="topEchart1" style="width: 90%;margin:0 5%;height:calc(100% - 46px)"></div>
</div>
<div class="contentTopItemRight">
<div class="title">
<div class="titleImg"><img src="../../Image/Web/headerLine.png" class="titleLine" alt=""></div>
<div class="titleText"><span class="titleSpan"></span>Proportion of Sales Quantity</div>
</div>
<div id="topEchart2" style="width: 90%;margin:0 5%;height:calc(100% - 46px)"></div>
</div>
</div>
<div class="contentTopItem inlineFlex">
<div class="contentTopItemCenterLeft">
<p class="smallTit">Amount By Hour</p>
<div class="bacNumBox">
<div class="bacNum" id="numLeft"></div>
<span>￥</span>
</div>
<div class="inlineFlex">
<div>VS Last 1h</div>
<div class="inlineFlex flexEnd">
<span style="color: #0037ff;margin-right: 6px;font-weight: 400;font-weight: bold;font-size: 16px;" id="yesterdayLeft">0</span>
<img src="../../Image/Web/upIcon.png" alt="">
</div>
</div>
</div>
<div class="contentTopItemCenterRight">
<p class="smallTit">Quantity By Hour</p>
<div class="bacNumBox">
<div class="bacNum" id="Unit">
</div>
<span>Unit</span>
</div>

<div class="inlineFlex">
<div>VS Last 1h</div>
<div class="flexEnd">
<span style="color:#79235f;margin-right: 6px;font-weight: 400;font-weight: bold;font-size: 16px;" id="yesterdayRight">0</span>

<img src="../../Image/Web/upIcon.png" alt="">
</div>
</div>
</div>
</div>
<div class="contentTopItem">
<div id="shopTopListHead_A">
<div>Ranking</div>
<div>Customer</div>
<div>Target</div>
<div>Ach</div>
<div>Ach%</div>
</div>
<ul style="overflow: auto;" id="shopList">
</ul>
</div>
</div>
<div class="contentBottom inlineFlex">
<div class="contentBottomItem">
<div class="contentBottomItemTop">
<div class="title">
<div class="titleImg"><img src="../../Image/Web/headerLine.png" class="titleLine" alt=""></div>
<div class="titleText">
<span class="titleSpan"></span>
<div class="tabTitle">
<div id="tab1" class="tabTitleItem" οnclick="showTab1()">Customer Group Level</div>
<div id="tab2" class="tabTitleItem" οnclick="showTab2()">Channel Level</div>
</div>
<a id="backEchart1" href="javascript:void(0);" οnclick="backEchart1()"><div class="rightBtn" style="right: 110px;">Back</div></a>
<a id="Bigger1" href="javascript:void(0);" οnclick="Bigger(1)"><div class="rightBtn">Magnify</div></a>
</div>
</div>
<div style="width: 100%;height:100%;position: relative;">

<div style="width: 100%; height: calc(100% - 46px)" id="tab1Content">
<div id="echart1" style="width: 90%;margin:0 5%;height:calc(100% - 27px)"> </div>

<div class="inlineFlex" id="tuli" style="height:22px;line-height: 22px;margin-bottom: 5px;justify-content: flex-start;padding-left: 10%;">
</div>
</div>

</div>
</div>
<div class="contentBottomItemBottom">
<div class="title">
<div class="titleImg"><img src="../../Image/Web/headerLine.png" class="titleLine" alt=""></div>
<div class="titleText">
<span class="titleSpan"></span>Customer Level
<select class="CustomerSelect" id="CustomerSelect">
<option value="All">All</option>
</select>
<a id="Bigger3" href="javascript:void(0);" οnclick="Bigger(3)"><div class="rightBtn">Magnify</div></a>
</div>
</div>
<div id="echart3" style="width: 90%;margin:0 5%;height:calc(100% - 46px)"></div>
</div>
</div>
<div class="contentBottomItem">
<div class="contentBottomItemTop">
<div class="title">
<div class="titleImg"><img src="../../Image/Web/headerLine.png" class="titleLine" alt=""></div>
<div class="titleText">
<span class="titleSpan"></span>BU Level
<select class="BUSelect" id="BUSelect">
<option value="All">All</option>
</select>
<a id="Bigger3" href="javascript:void(0);" οnclick="Bigger(2)"><div class="rightBtn">Magnify</div></a>
</div>

</div>
<div id="echart2" style="width: 90%;margin:0 5%;height:calc(100% - 46px)"></div>
</div>
<div class="contentBottomItemBottom">
<div class="title">
<div class="titleImg"><img src="../../Image/Web/headerLine.png" class="titleLine" alt=""></div>
<div class="titleText"><span class="titleSpan"></span>TOP 10 Sku Level <a id="jup" target="_blank"><div class="rightBtn">More</div></div>
</div>
<div id="shopTopListHead">
<div style="width:10%">Ranking</div>
<div style="width:55%">Product Name</div>
<div style="width:11%">Stroe</div>
<div style="width:12%">GMV</div>
<div style="width:12%">Quantity</div>

</div>

});

layui.use(['element', 'jquery', 'form', 'laydate'],
function () {
var $ = layui.jquery;
var element = layui.element;
var laydate = layui.laydate;
var form = layui.form;
form.render(null, 'selectDate');
var currentyear = (new Date()).getFullYear();
var currentmonth = ("0" + ((new Date()).getMonth() + 1)).slice(-2);
var currentday = ("0" + (new Date()).getDate()).slice(-2);
var currentHour = (new Date()).getHours();//- 1
if (currentHour < 0) {
currentday = currentday - 1;
if (currentday < 10) {
currentday = "0" + currentday;
}
currentHour = 23;
}
var currentMM = (new Date()).getMinutes();
var currentSS = (new Date()).getSeconds();

var curDay = "";
BaseApiPost("/DashBoard/GetLastDataVerTime", [], function (res) {
console.log(res.list);
if (res.errCode == "0") {
var yearMonthDayHour = res.list[0].YearMonthDayHour.toString();
curDay = yearMonthDayHour.substring(0, 4) + "-" + yearMonthDayHour.substring(4, 6) + "-" + yearMonthDayHour.substring(6, 8) + " " + yearMonthDayHour.substring(8, 10) + ":00:00"
} else {
curDay = currentyear + "-" + currentmonth + "-" + currentday + " " + currentHour + ":" + currentMM + ":" + currentSS;
}

laydate.render({
elem: '#Date',
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
value: curDay,
isInitValue: true,
max: curDay,
done: function (value, date) {
$("#Date").val(value);
get();

},
choose: function (value, date) {
$("#Date").val(value);
get();
},
});
form.render();
get();
//五分钟刷新一次
setInterval("get()", 60 * 5 * 1000);
});

});

function get() {
var LoadIndex = layer.load(1, { shade: [0.1, '#fff'] });
isCustomer = false;
isStore = false;
GetnumLeft();
GetanHour();
getShopList();
getShopTopList();
getEchart1("echart1", totalEchart);
getEchart2("echart2", 0);
getEchart3("echart3");
getTopEchart1("topEchart1");
getTopEchart2("topEchart2");
showTab1(); //默认选中第一个
GeTSalesGroupLevel();
GetGroupLevel();

}

$("#jup").click(function () {
var date = $("#Date").val();
$(this).attr("href", "Top10Table.html?date=" + date);
});

}
);
} else if (isCustomer) {
body.find("#backEchart1").css("display", "block");
expendChart.off('legendselectchanged');
expendChart.on('legendselectchanged', function (params) {
var iframeWin = window[layero.find('iframe')[0]['name']];
console.log(iframeWin);
iframeWin.showStore2(params.name);
});
}
else if (isStore) {
body.find("#backEchart1").css("display", "block");
}
}
}
else if (code == 2) {
body.find("#backEchart1").css("display", "none");
body.find("#BUSelect2").css("display", "block");
}
else if (code == 3) {
body.find("#BUSelect2").css("display", "none");
body.find("#backEchart1").css("display", "none");
}
},

});
}

window.onload = function () {
setInterval("NowTime()", 1000);
}
function NowTime() {
var myDate = new Date();
var y = myDate.getFullYear();
var M = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
var d = myDate.getDate(); //获取当前日(1-31)
var h = myDate.getHours(); //获取当前小时数(0-23)
var m = myDate.getMinutes(); //获取当前分钟数(0-59)
var s = myDate.getSeconds(); //获取当前秒数(0-59)

//检查是否小于10
M = check(M);
d = check(d);
h = check(h);
m = check(m);
s = check(s);
var timestr = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
document.getElementById("crrentTime").innerHTML = timestr;
}
//时间数字小于10，则在之前加个“0”补位。
function check(i) {
var num = (i < 10) ? ("0" + i) : i;
return num;
}
//获取十六进制颜色
function randomColor1() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
if (r < 16) {
r = "0" + r.toString(16);
} else {
r = r.toString(16);
}
if (g < 16) {
g = "0" + g.toString(16);
} else {
g = g.toString(16);
}
if (b < 16) {
b = "0" + b.toString(16);
} else {
b = b.toString(16);
}
return "#" + r + g + b;
}

function showTypeDetail(type) {
console.log('当前查看', type);
//$("#echart1").height('90%');
GeTSalesGroupLevel(type);
$("#backEchart1").show();
$("#tuli").hide();
groupType = type;
}
function showStore(type) {
console.log('当前查看', type);
//$("#echart1").height('90%');
GeTStore(type);
//$("#backEchart1").hide();

//$("#backEchart2").show();
$("#tuli").hide();
customerType = type;
}

function backEchart1() {
//$("#echart1").height('calc(100% - 27px');
getEchart1("echart1", totalEchart);
$("#backEchart1").hide();
$("#tuli").hide();
GeTSalesGroupLevel();
}
function backEchart2() {
//$("#echart1").height('calc(100% - 27px');
getEchart1("echart1", totalEchart);
$("#backEchart2").hide();
$("#backEchart1").show();
$("#tuli").hide();
//GeTSalesGroupLevel(groupType);
GeTSalesGroupLevel();
}

function showTab1(code) {
$("#tab1Content").show();
$("#othersEchart1").hide();
$("#tab1").attr("class", "tabTitleItem tabTitleAct");
$("#tab2").attr("class", "tabTitleItem");
if (isCustomer || isStore) {
$("#backEchart1").show();
}

}

}
}

//获取右上排行数据
function getShopList() {
var str = "";
var date = $("#Date").val();
var data = [];
BaseApiPost('/DashBoard/GeTACHByhour',
[{ "DateTime": date }],
function (res) {
$('#shopList').html("");
if (res.errCode == "0") {
var data = res.list;
if (data && data.length > 0) {
for (var i = 0; i < data.length; i++) {
str +=
"<li>" +
"<div><span>" + [i + 1] + "</span></div>" +
"<div>" + ((data[i].NameEN == null || data[i].NameEN == "") ? data[i].Name : data[i].NameEN) + "</div>" +
"<div>" + fmoney(data[i].Target, 0) + "</div>" +
"<div>" + fmoney(data[i].SumNPS, 0) + "</div>" +
"<div>" + data[i].ACH + "</div>" +
"</li>";

}
} else {
str += "<li><div>暂无数据</div></li>";
}
}
$('#shopList').append(str);
})
;

}

var optionOthersData = {
"tooltip": {
"trigger": 'axis',
formatter: function (params) {
var fg = 0;
var htmlStr = "<div>";
for (var i = 0; i < params.length; i++) {
htmlStr += "<span style='margin - right:5px; display:inline-block; width:10px; height:10px; border-radius:5px; background-color:" + params[i].color + ";'></span>";
htmlStr += params[i].seriesName + ":" + fmoney(strToInt(params[i].value), 0) + "<br>";
fg += parseFloat(params[i].value);
}

htmlStr += 'Total：' + fmoney(strToInt(fg.toString()), 0) + '<br/>';//x轴的名称
'</div>';

return htmlStr;
}
},
"grid": {
"left": '3%',
"right": '4%',
"bottom": '15%',
"top": '15%',
"containLabel": true
},
"legend": {
//"padding": [50, 30, 20, 0],
"icon": 'pin',
"left": 20,
"bottom": 8,
"data": ['B2B', 'B2C', 'O2O'],
"textStyle": {
"color": '#fff',
"fontSize": 12
}
},
"xAxis": {
"type": 'category',
"boundaryGap": true,
"data": ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
}
},
"yAxis": {
"type": 'value',
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
},
formatter: function (v) {
return tranNumber(v);
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
}
},
"series": []
};
//B2C
function GetGroupLevel() {
var date = $("#Date").val();
var data = [];
BaseApiPost('/DashBoard/GetGroupLevel',
[{ "DateTime": date }],
function (res) {
if (res.errCode == 0) {
$.each(res.data, function (index, value) {
var data = {
"name": index,
"type": 'line',
"symbol": 'circle',
"symbolSize": 4,
"color": ['#FCCD46'],
"data": value[0],
"itemStyle": {
"normal": {
"color": '#FCCD46',
"borderColor": '#FCCD46', //拐点边框颜色
}
}
}
optionOthersData.series = [];
optionOthersData.series.push(data);
})
getEchart1Others("othersEchart1", optionOthersData);
}

layer.closeAll();
}
)
}

//右下Top10
function getShopTopList() {
var date = $("#Date").val();
var data = [];
BaseApiPost('/DashBoard/GetTop10Byhour',
[{ "DateTime": date }],
function (res) {
var str = "";
if (res.errCode == "0") {
$('#shopTopList').html(str);
for (var i = 0; i < res.list.length; i++) {
var C = {
"rank": i + 1,
"target": res.list[i].NPS,
"productName": res.list[i].MaterialName_CN,
"Customer": res.list[i].Customer,
"num": res.list[i].Unit

};
data.push(C);
}
if (data && data.length > 0) {
for (var i = 0; i < data.length; i++) {

str +=
"<li>" +
"<div style='width:10%'><span>" + data[i].rank + "</span></div>" +
"<div style='width:55%' title='" + data[i].productName + "'>" + data[i].productName + "</div>" +
"<div style='width:11%'>" + data[i].Customer.toString() + "</div>" +
"<div style='width:12%'>" + fmoney(strToInt(data[i].target.toString()), 0) + "</div>" +
"<div style='width:12%'>" + fmoney(strToInt(data[i].num.toString()), 0) + "</div>" +

"</li>";
}
} else {
str += "<li><div>暂无数据</div></li>";
}

}
$('#shopTopList').html(str);
});
}

}

//曲线图添加数据

var totalEchart = {
"tooltip": {

"trigger": 'axis',
formatter: function (params) {
var fg = 0;
var htmlStr = "<div>";
for (var i = 0; i < params.length; i++) {
htmlStr += "<span style='margin - right:5px; display:inline-block; width:10px; height:10px; border-radius:5px; background-color:" + params[i].color + ";'></span>";
htmlStr += params[i].seriesName + ":" + fmoney(strToInt(params[i].value), 0) + "<br>";
fg += parseFloat(params[i].value);
}

htmlStr += 'Total：' + fmoney(strToInt(fg.toString()), 0) + '<br/>';//x轴的名称
'</div>';

return htmlStr;
}
},
"grid": {
"left": '3%',
"right": '4%',
"top": '15%',
"bottom": '25%',
"containLabel": true
},

"legend": {
"type": "scroll",
"pageIconColor": "#fff",
"icon": 'pin',
"left": 20,
"bottom": 5,
"data": [],
"textStyle": {
"color": '#fff',
"fontSize": 12
}
},
"xAxis": {
"type": 'category',
"boundaryGap": true,
"data": ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
}
},
"yAxis": {
"type": 'value',
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
},
formatter: function (v) {
return tranNumber(v);
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
}
},
"series": []
};

var CustomerLevelEchart = {};
var storeEchart1 = {};
var storeEchart2 = {};

// position: 'insideBottom',
// formatter: '{c}',
// textStyle: {
// color: '#02FCFA'
// }
//}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)'
}
},
data: data
};
return a;
}

$("#BUSelect").on("change", function () {
getEchart2("echart2", 1);
});

$("#CustomerSelect").on("change", function () {
getEchart3("echart3");
});
//BU level
function getEchart2(id, code) {
var date = $("#Date").val();
var sel = "";
console.log(typeEchart2s);
if (code == 1) {
sel = $("#BUSelect option:selected").val();
}

BaseApiPost('/DashBoard/GeTBuByhour',
[{ "DateTime": date, "Customer": sel }],
function (res) {
var totalArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var totalStrArray = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",]
if (res != null) {
var totalNum = 0;
typeEchart2s.series = [];
typeEchart2s.legend.data = [];

typeEchart2s.legend.data.push("ALL");
typeEchart2s.series.push(EcharData("ALL", 0));

}
total = totalStrArray;
//typeEchart2s.series.push(EcharTotal("Total", totalStrArray));
//typeEchart2s.legend.data.push("Total");
var myChart2 = echarts.init(document.getElementById(id));
myChart2.clear();
myChart2.setOption(typeEchart2s, true);
myChart2.resize();
// GeTSalesGroupLevel();

myChart2.on('legendselectchanged', function (obj) {
if (obj.name.toUpperCase() == "ALL".toUpperCase()) {
if (obj.selected.ALL == false) {
$.each(obj.selected, function (index, item) {
obj.selected[index] = false;
});
}
else {
$.each(obj.selected, function (index, item) {
obj.selected[index] = true;
});
}
}
else {
$.each(obj.selected, function (index, item, i) {
if (obj.selected.hasOwnProperty(index) && index != "ALL") {
legendCount++;
}
if (index != "ALL" && obj.selected[index] == false) {
selectFalse++;
}
});
}
if (selectFalse == legendCount && legendCount > 0) {
obj.selected["ALL"] = false;
}
selectFalse = 0; legendCount = 0;
CustomerLevelEchart = typeEchart2s;
typeEchart2s.legend.selected = obj.selected;
myChart2.clear();
myChart2.setOption(typeEchart2s);
myChart2.resize();
});
}
});
}

//GeTSalesGroupLevel
function GeTSalesGroupLevel(data) {
var type = data;
var date = $("#Date").val();
BaseApiPost('/DashBoard/GeTSalesGroupLevelS',
[{ "DateTime": date, "Type": data }],
function (res) {
var totalArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var totalStrArray = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",]
if (res != null) {
var style = {
"tooltip": {

htmlStr += 'Total：' + fmoney(strToInt(fg.toString()), 0) + '<br/>';//x轴的名称
'</div>';

return htmlStr;
}
},
"grid": {
"left": '3%',
"right": '4%',
"bottom": '25%',
"top": '15%',
"containLabel": true
},
"legend": {
"pageIconColor": "#fff",
"type": "scroll",
"icon": 'pin',
"left": 20,
"bottom": 5,
"data": [],
"textStyle": {
"color": '#fff',
"fontSize": 12
}
},
"xAxis": {
"type": 'category',
"boundaryGap": true,
"data": ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
}
},
"yAxis": {
"type": 'value',
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
},
formatter: function (v) {
return tranNumber(v);
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
},
},
"series": []
};
style.legend.textStyle.color = "#fff";
style.legend.pageIconColor = "#fff";
var div = "";
var top3color = ["#0EBDA0", "#2A71DD", "#F1BA2C"]
var x = 0;
totalEchart.series = [];
//totalEchart.legend.data = [];
if (type != undefined) {
var totalNum = 0;
var color = randomColor1();
$.each(res.data,
function (index, value) {
var color = randomColor1();
// style.series.push(EcharData(index, value[0], top3color[x]));
//} else {
// style.series.push(EcharData(index, value[0], color));
//}
style.series.push(EcharData(index, value[0], color));
style.legend.data.push(index);
x++;
totalNum = value[0].length;
for (var i = 0; i < value[0].length; i++) {
if (index == 0) {
totalArray.push(parseFloat(value[0][i]));
}
else {
totalArray[i] = totalArray[i] + parseFloat(value[0][i]);
}
}

});
totalArray = totalArray.slice(0, totalNum);

for (var j = 0; j < totalArray.length; j++) {
if (totalArray[j].toString().indexOf(".") > 0) {
totalStrArray[j] = totalArray[j].toString().substring(0, totalArray[j].toString().indexOf(".") + 3);
} else {
totalStrArray[j] = totalArray[j].toString();
}

}
color = randomColor1();
//style.legend.data.push("Total");
//style.series.push(EcharTotal("Total", totalStrArray, color));
storeEchart1 = style;
getEchart99("echart1", style);

} else {
console.log(totalEchart);
var totalNum = 0;
$.each(res.data,
function (index, value) {
var color = randomColor1();
//固定前三个颜色
if (index == 'Tmall Group') {
color = top3color[0]
} else if (index == 'JD Group') {
color = top3color[1]
} else if (index == 'Others') {
color = top3color[2]
}
totalEchart.series.push(EcharData(index, value[0], color));
totalEchart.legend.data.push(index);

//getEchart1("echart1", totalEchart);
x++;
totalNum = value[0].length;

for (var i = 0; i < value[0].length; i++) {
if (index == 0) {
totalArray.push(parseFloat(value[0][i]));
}
else {
totalArray[i] = totalArray[i] + parseFloat(value[0][i]);
}
}
});
totalEchart.legend.textStyle.color = "#fff";
totalEchart.legend.pageIconColor = "#fff";
totalArray = totalArray.slice(0, totalNum);
totalStrArray = totalStrArray.slice(0, totalNum);
for (var j = 0; j < totalArray.length; j++) {
if (totalArray[j].toString().indexOf(".") > 0) {
totalStrArray[j] = totalArray[j].toString().substring(0, totalArray[j].toString().indexOf(".") + 3);
} else {
totalStrArray[j] = totalArray[j].toString();
}

}
color = randomColor1();
//totalEchart.legend.data.push("Total");
//totalEchart.series.push(EcharTotal2("Total", totalStrArray, color));
console.log(totalEchart);
getEchart1("echart1", totalEchart);

}
}
});
}

function GeTStore(data) {
var type = data;
var date = $("#Date").val();
BaseApiPost('/DashBoard/GeTStroeS',
[{ "DateTime": date, "Type": data }],
function (res) {
var totalArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var totalStrArray = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",]
if (res != null) {
var style = {
"tooltip": {

"trigger": 'axis',
formatter: function (params) {
var fg = 0;
var htmlStr = "<div>";
for (var i = 0; i < params.length; i++) {
htmlStr += "<span style='margin - right:5px; display:inline-block; width:10px; height:10px; border-radius:5px; background-color:" + params[i].color + ";'></span>";
htmlStr += params[i].seriesName + ":" + fmoney(strToInt(params[i].value.toString()), 0) + "<br>";
fg += parseFloat(params[i].value);
}

htmlStr += 'Total：' + fmoney(strToInt(fg.toString()), 0) + '<br/>';//x轴的名称
'</div>';

return htmlStr;
}
},
"grid": {
"left": '3%',
"right": '4%',
"bottom": '25%',
"top": '15%',
"containLabel": true
},
"legend": {
"pageIconColor": "#fff",
"type": "scroll",
"icon": 'pin',
"left": 20,
"bottom": 5,
"data": [],
"textStyle": {
"color": '#fff',
"fontSize": 12
}
},
"xAxis": {
"type": 'category',
"boundaryGap": true,
"data": ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
}
},
"yAxis": {
"type": 'value',
"axisLabel": {
"textStyle": {
"color": '#9B9B9B',
"fontSize": 12
},
formatter: function (v) {
return tranNumber(v);
}
},
"axisLine": {
"lineStyle": {
"color": '#9B9B9B'
}
},
"splitLine": {
"show": false
},
},
"series": []
};
style.legend.textStyle.color = "#fff";
style.legend.pageIconColor = "#fff";
var div = "";
var top3color = ["#0EBDA0", "#2A71DD", "#F1BA2C"]
var x = 0;
var totalNum = 0;
if (type != undefined) {
var color = randomColor1();
$.each(res.data,
function (index, value) {
var color = randomColor1();
//if (x < 3) {

// style.series.push(EcharData(index, value[0], top3color[x]));
//} else {
// style.series.push(EcharData(index, value[0], color));
//}
//for (var a = 0; a < value[0].length; a++) {
// value[0][a] = fmoney(strToInt(value[0][a]), 0);
//}
style.series.push(EcharData(index, value[0], color));
style.legend.data.push(index);

x++;
totalNum = value[0].length;
for (var i = 0; i < value[0].length; i++) {
if (index == 0) {
totalArray.push(parseFloat(value[0][i]));
}
else {
totalArray[i] = totalArray[i] + parseFloat(value[0][i]);
}
}

});
totalArray = totalArray.slice(0, totalNum);
totalStrArray = totalStrArray.slice(0, totalNum);
for (var j = 0; j < totalArray.length; j++) {
if (totalArray[j].toString().indexOf(".") > 0) {
totalStrArray[j] = totalArray[j].toString().substring(0, totalArray[j].toString().indexOf(".") + 3);
} else {
totalStrArray[j] = totalArray[j].toString();
}

}
color = randomColor1();
//style.legend.data.push("Total");

style.legend.selectedMode = false;
storeEchart2 = style;
console.log(style);
//style.series.push(EcharTotal("Total", totalStrArray, color));
getEchart1Others("echart1", style);

}
}
});
}

//获取总销售额、销售件数
function GetnumLeft() {
var date = $("#Date").val();
BaseApiPost('/DashBoard/GeTSalesVolumeHour', [{ "DateTime": date }],
function (RtnData) {
if (RtnData.errCode == 0) {
var NPSTotalHtml = "";
var UnitTotalHtml = "";
var Nps = RtnData.list[0].Nps.toString();
var Unit = RtnData.list[0].Unit.toString();
var numLeft = fmoney(strToInt(Nps), 0);
var numRight = fmoney(strToInt(Unit), 0);
//总销售额
if (Nps == "0" || Nps == "") {
$("#numLeft").html("<div class='bacNumIcon'>0</div>");
} else {
for (var i = 0; i < numLeft.length; i++) {
if (numLeft[i] == ",") {
NPSTotalHtml += "<div class='threePoint'>,</div>";
}
else {
NPSTotalHtml += "<div class='bacNumIcon'>" + numLeft[i] + "</div>";
}
}
$("#numLeft").html(NPSTotalHtml);
}
//总销售件数
if (Unit == "0" || Unit == "") {
$("#Unit").html("<div class='bacNumIcon'>0</div>");
} else {

for (var i = 0; i < numRight.length; i++) {
if (numRight[i] == ",") {
UnitTotalHtml += "<div class='threePoint'>,</div>";
}
else {
UnitTotalHtml += "<div class='bacNumIcon'>" + numRight[i] + "</div>";
}
}
$("#Unit").html(UnitTotalHtml);
}
}
else {
$("#Unit").html("<div class='bacNumIcon'>0</div>");
}
});
}

//获取上一小时数据
function GetanHour() {
var date = $("#Date").val();
BaseApiPost('/DashBoard/GeTSalesVolumeanHour',
[{ "DateTime": date }],
function (res) {
if (res.errCode == 0) {
if (res.data.Nps == "" || res.data.Nps == 0) {
$("#yesterdayLeft").html(0);
} else {
var Nps = res.data.Nps;
//Nps = Nps.toFixed(2);
if (Nps >= 0) {
$("#yesterdayLeft").parent().find("img").attr("src", "../../Image/Web/upIcon.png");
} else {
$("#yesterdayLeft").parent().find("img").attr("src", "../../Image/Web/downIcon.png");
}
$("#yesterdayLeft").html(fmoney(strToInt(Nps.toString()), 0));
}
}
else {
$("#yesterdayLeft").html(0);
}
if (res.data.Unit == "" || res.data.Unit == 0) {
$("#yesterdayRight").html(0);
} else {
var Unit = res.data.Unit;
console.log(Unit);
// Unit = Unit.toFixed(2);
if (Unit >= 0) {
$("#yesterdayRight").parent().find("img").attr("src", "../../Image/Web/upIcon.png");
} else {
$("#yesterdayRight").parent().find("img").attr("src", "../../Image/Web/downIcon.png");
}
$("#yesterdayRight").html(fmoney(strToInt(Unit.toString()), 0));
}
});
}

//获取上小时数据作对比
function getTopEchart2(id) {
var date = $("#Date").val();
BaseApiPost('/DashBoard/GetNumHour',
[{ "DateTime": date }],
function (res) {
if (res.errCode == "0") {
var top3color = ["#0EBDA0", "#2A71DD", "#F1BA2C"]
var optionTop2 = {
tooltip: {
trigger: 'item',
formatter: function (params) {
var html = "<div>" + params.name + ": " + fmoney(strToInt(params.value.toString()), 0) + "(" + params.percent + "%)</div>";
return html;
},
position: [100, 100]
},
grid: {
containLabel: true,

},
legend: {
icon: 'pin',
orient: 'vertical',
right: 0,
top: 25,
data: ['Tmall Group', 'JD Group', 'Others'],
textStyle: {
color: '#fff',
fontSize: 12
}
},
series: [{
name: '销售数量占比',
type: 'pie',
radius: ['45%', '65%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '24',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: []
}]
};
for (var i = 0; i < res.list.length; i++) {
var color = "";
var name = res.list[i].CustomerLevel2;
if (name == 'Tmall Group') {
color = top3color[0]
} else if (name == 'JD Group') {
color = top3color[1]
} else if (name == 'Others') {
color = top3color[2]
}
var dataValue = {
value: res.list[i].Unit,
name: name,
itemStyle: {
color: color
}
};
optionTop2.series[0].data.push(dataValue);
}
var myChartTop2 = echarts.init(document.getElementById(id));
myChartTop2.setOption(optionTop2);
myChartTop2.resize();
getEchart3("echart3");
}
}
);
}

function getEchart1(id, result) {
isCustomer = false;
isStore = false;
var option1 = result;
var myChart1 = echarts.init(document.getElementById(id));
myChart1.off('legendselectchanged');
myChart1.on('legendselectchanged', function (params) {

showTypeDetail(params.name);
}
);
myChart1.clear();
myChart1.setOption(option1, true);
myChart1.resize();
}

///
function getEchart1Others(id, data) {
isCustomer = false;
isStore = true;
var myChartOthers = echarts.init(document.getElementById(id));
myChartOthers.clear();
myChartOthers.setOption(data, true);
myChartOthers.resize();
}
var legendCount = 0;
var selectFalse = 0;
//圆柱图
function getEchart3(id) {
var date = $("#Date").val();
var option3 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var fg = 0;
var htmlStr = "<div>";
for (var i = 0; i < params.length; i++) {
htmlStr += "<span style='margin - right:5px; display:inline-block; width:10px; height:10px; border-radius:5px; background-color:" + params[i].color + ";'></span>";
htmlStr += params[i].seriesName + ":" + fmoney(strToInt(params[i].value), 0) + "<br>";
fg += parseFloat(params[i].value);
}

htmlStr += 'Total：' + fmoney(strToInt(fg.toString()), 0) + '<br/>';//x轴的名称
'</div>';

return htmlStr;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '25%',
top: '15%',
containLabel: true
},
legend: {
"pageIconColor": "#fff",
type: "scroll",
icon: 'pin',
left: 20,
bottom: 5,
data: [],
textStyle: {
color: '#fff',
fontSize: 12
}
},
xAxis: [{
type: 'category',
"data": ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
axisLabel: {
textStyle: {
color: '#9B9B9B',
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#9B9B9B'
}
},
splitLine: {
show: false
}
}],
yAxis: [{
type: 'value',
axisLabel: {
textStyle: {
color: '#9B9B9B',
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#9B9B9B'
}
},
splitLine: {
show: false
},
axisLabel: {
formatter: function (v) {
return tranNumber(v);
}
}

}, {
type: 'value',
axisLabel: {
textStyle: {
color: '#9B9B9B',
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#9B9B9B'
}
}
},

],
series: []
};
var sel = $("#CustomerSelect option:selected").val();
BaseApiPost('/DashBoard/GeTCustomerByhour',
[{ "DateTime": date, "BU_Sub": sel }],
function (res) {
if (res.errCode == "0") {
var totalArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var totalStrArray = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",];
var totalNum = 0;
option3.series = [];
option3.legend.data = [];

option3.legend.data.push("ALL");
option3.series.push(EcharData3y("ALL", 0));
$.each(res.data, function (index, value) {
option3.series.push(EcharData3y(index, value[0]));

if (index == 0) {
totalArray.push(parseFloat(value[0][i]));
}
else {
totalArray[i] = totalArray[i] + parseFloat(value[0][i]);
}

option3.legend.data.push(index);
});
totalArray = totalArray.slice(0, totalNum);
totalStrArray = totalStrArray.slice(0, totalNum);
for (var j = 0; j < totalArray.length; j++) {
totalStrArray[j] = totalArray[j].toString().substring(0, totalArray[j].toString().indexOf(".") + 3);
}
var html = "";
if (sel == "" || sel == null || sel == "All") {
html += "<option value='All' selected>All</option>";
} else {
html += "<option value='All'>All</option>";
}
for (var a = 0; a < res.list.length; a++) {
if (sel == res.list[a].BU_SubCN) {
html += "<option value='" + res.list[a].BU_SubCN + "' selected>" + res.list[a].BU_SubCN + "</option>";
} else {
html += "<option value='" + res.list[a].BU_SubCN + "'>" + res.list[a].BU_SubCN + "</option>";
}
}
$("#CustomerSelect").html("").append(html);

// option3.series.push(EcharTotal("Total", totalStrArray));
}
var myChart3 = echarts.init(document.getElementById(id));
CustomerLevelEchart = option3;
myChart3.clear();
myChart3.legendSelectActionHandler
myChart3.setOption(option3);
myChart3.resize();

myChart3.on('legendselectchanged', function (obj) {
if (obj.name.toUpperCase() == "ALL".toUpperCase()) {
if (obj.selected.ALL == false) {
$.each(obj.selected, function (index, item) {
obj.selected[index] = false;
});
}
else {
$.each(obj.selected, function (index, item) {
obj.selected[index] = true;
});
}
}
else {
$.each(obj.selected, function (index, item, i) {
if (obj.selected.hasOwnProperty(index) && index != "ALL") {
legendCount++;
}
if (index != "ALL" && obj.selected[index] == false) {
selectFalse++;
}
});
}
if (selectFalse == legendCount && legendCount > 0) {
obj.selected["ALL"] = false;
}
selectFalse = 0; legendCount = 0;
CustomerLevelEchart = option3;
option3.legend.selected = obj.selected;
myChart3.clear();
myChart3.setOption(option3);
myChart3.resize();
});
});
}

function tranNumber(num) {
var numStr = num.toString();
if (numStr.indexOf(",") > 0) {
numStr = numStr.replace(",", "");
}
console.log(numStr);
// 如果是千以下，直接返回
if (numStr.length < 4) {
return numStr;
}
//如果千以上，则进行处理
else if (numStr.length >= 4) {
var decimal = numStr.substring(numStr.length - 8, numStr.length - 8);
var val = fmoney(parseInt(parseInt(numStr) / 1000), 0);

return val + 'K';
}

};
</script>

效果图：

BULEVEL 是Echarts2 Customer Level是Echarts3

Echarts 报表使用一个图例legend实现全选和全部取消的功能

Echarts 报表 使用一个图例legend实现全选和全部取消的功能

相关推荐

Echarts 报表使用一个图例legend实现全选和全部取消的功能