//圆柱图
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(EcharData("ALL", 0));
$.each(res.data, function (index, value) {
option3.series.push(EcharData(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) { //对应Echarts.js的方法执行之后
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();
});
});
}
getEchart3 对应效果
//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));
var colorList = res.data.ColorData;
typeEchart2s.legend.textStyle.color = "#fff";
typeEchart2s.legend.pageIconColor = "#fff";
$.each(res.data.NPSData, function (index, value) {
var color = "";
for (var j = 0; j < colorList.length; j++) {
if (colorList[j].BU_Sub == index) {
color = colorList[j].ChartsColor;
}
}
typeEchart2s.series.push(EcharData(index, value[0], color));
typeEchart2s.legend.data.push(index);
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();
}
}
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();
var customers = res.list;
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 < customers.length; a++) {
if (sel == customers[a].Customer) {
html += "<option value='" + customers[a].Customer + "' selected>" + customers[a].Customer + "</option>";
} else {
html += "<option value='" + customers[a].Customer + "'>" + customers[a].Customer + "</option>";
}
}
$("#BUSelect").html("").append(html);
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();
});
}
});
}
getEchart2 对应效果
1796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
