echart

function(chartOption){
???
??? chartOption = $nps$.deepCopyTo({},chartOption);
??? var chartDataList = this.__portal.componentItemMap.root.ChartDataList || [];
??? // 根据图标类型 改变趋势图
??? var chartType = this.__portal.componentItemMap.bar.sourceConfig.type || this.__portal.componentItemMap.line.sourceConfig.type;
???
??? // 判断x轴时间是否一个粒度
??? var xTime = [];
??? chartDataList.forEach(function(item) {
??????? if(item.region == ‘全部‘) {
??????????? xTime.push(item.time);
??????? }
??? });
??? xTime = $nps$.unique(xTime);
??? if (xTime.length == 1) {
??????? chartType = ‘bar‘
??? };
??? // 根据指标名称显示对应的数据
??? var yCategory = this.__portal.componentItemMap.className.getRawValue();
??? var timeAry = [],timeAryData = [];
??? var xAxisData = [],yAxisData = [];
???
???? // 过滤出x轴时间列
??? chartDataList.forEach(function(item) {
?????? xAxisData.push(item.time);
??? })
??? //?? 时间去重
??? xAxisData = $nps$.unique(xAxisData);
???
??? // 取出所有的地市 或者区县
??? var chartCfg = [];
??? chartDataList.forEach(function(item) {
??????? if (xAxisData[0] == item.time) {
??????????? if(item.region != ‘全部‘) {
??????????????? var obj = {};
??????????????? obj[‘name‘] = item.region;
??????????????? chartCfg.push(obj);
??????????? }
??????? }
??? });
??? var chartMapData = {};
??? chartCfg.forEach(function(item) {
??????? chartMapData[item.name] = [];
??? })
??? // 填充每个地市中不同时间段的数据
??? for (var k in chartMapData) {
?????? xAxisData.forEach(function(item2) {
??????????????? // 填充每个地市 不同时间的数据
??????????? chartDataList.forEach(function(item3) {
??????????????? if(k == item3.region) {
??????????????????? if (item2 == item3.time ) {
??????????????????????? // 根据不同指标填充不同的数据
??????????????????????? switch (yCategory) {
??????????????????????????? case ‘总用户数‘:
??????????????????????????????? chartMapData[k].push(item3.totalCount);
??????????????????????????????? break;
??????????????????????????? case ‘无线用户数‘:
??????????????????????????????? chartMapData[k].push(item3.wifiCount);
??????????????????????????????? break;
??????????????????????????? case ‘有线用户数‘:
??????????????????????????????? chartMapData[k].push(item3.nonwifiCount);
??????????????????????????????? break;
??????????????????????????? case ‘活跃用户数‘:
??????????????????????????????? chartMapData[k].push(item3.hourUsers || item3.minuteUsers || item3.todayUsers);
??????????????????????????????? break;
??????????????????????????? case ‘开机用户数‘:
??????????????????????????????? chartMapData[k].push(item3.hourBootUsers || item3.minuteBootUsers || item3.todayBootUsers);
??????????????????????????????? break;
??????????????????????????? case ‘播放用户数‘:
??????????????????????????????? chartMapData[k].push(item3.hourPlayUsers || item3.minutePlayUsers || item3.tadayPlayUsers);
??????????????????????????????? break;
??????????????????????????? case ‘卡顿用户数‘:
??????????????????????????????? chartMapData[k].push(item3.hourStutterUsers || item3.minuteStutterUsers || item3.todayStutterUsers);
??????????????????????????????? break;
??????????????????????????? case ‘告警用户数‘:
??????????????????????????????? chartMapData[k].push(item3.hourAlarmUsers || item3.minuteAlarmUsers || item3.todayAlarmUsers);
??????????????????????????????? break;
??????????????????????? }
??????????????????? }
??????????????? }
??????????? })
??????? })
??? }
??? // 判断用户点击是 柱 还是 线
??? if (chartType == ‘line‘) {
??????? // 以时间为x轴? "type": "scroll",
??????? chartOption.series[0].type = ‘line‘;
??????? chartOption.legend.type = ‘scroll‘;
??????? chartOption.xAxis[0].boundaryGap = false; // 数据是否从0 开始排列x轴
???????
??????? var firstSeries = chartOption.series[0];
??????? var chartSeries = [];
??????? chartOption.legend.selected = {};
??????? for (var i = 0; i < chartCfg.length; i ++) {
??????????? var cfgItem = chartCfg[i];

　　// 右边红框 legend 初始显示 5个 其余默认不选中
??????????? if(i > 4)? {
??????????????? chartOption.legend.selected[cfgItem.name] = false;
??????????? }
??????????? var serieItem = $nps$.applyIf({
??????????????? name: cfgItem.name,
??????????????? // stack: ‘总量‘,
??????????????? smooth:true,
??????????????? data: chartMapData[cfgItem.name] || []
??????????? },firstSeries);
??????????? // delete serieItem.areaStyle;
??????????? chartSeries.push(serieItem);
??????? }
??????? // 折线图填充 chartOption
??????? var xAxisData1 = [];
??????? chartDataList.forEach(function (item,index) {
??????????????? if (item.region == ‘全部‘) {
???????????????????? xAxisData1.push($nps$.utils.dateTimeRenderer(item.time,‘d H:i‘));
??????????????? }
??????????? });
??????? chartOption.series = chartSeries;
??????? chartOption.xAxis[0].data = xAxisData1;
??????? // 浮窗显示
??????? chartOption.tooltip.formatter = function(options) {
??????? ????
??? ???? if (!options.length) return;
??? ????
??? ???? var htmls = [
??? ???????? ‘<p>‘+options[0].name+‘</p>‘,
??? ???????? ‘<table>‘,
??? ???? ];
??? ???? for (var i = 0; i < options.length; i +=3) {
??? ???????? htmls.push(‘<tr>‘);
??? ???????? htmls.push(‘<td>‘+
??????? ???????? ‘<span style="width:10px;height:10px;display:inline-block;margin-right:5px;border-radius:5px;"></span>‘+
??? ???????????? options[i].seriesName+‘: ‘+options[i].value+
??? ???????????? ‘</td>‘
??? ???????? );
??? ???????? if (options[i+1]) {
??? ???????????? htmls.push(‘<td style="padding-left:10px;">‘+
??????? ???????????? ‘<span style="width:10px;height:10px;display:inline-block;margin-right:5px;border-radius:5px;"></span>‘+
??????? ???????????? options[i+1].seriesName+‘: ‘+options[i+1].value+
??????? ???????????? ‘</td>‘
??? ???????????? );
??? ???????? } else {
??? ???????????? htmls.push(‘<td></td>‘);
??? ???????? }
??? ???????? if (options[i+2]) {
??? ???????????? htmls.push(‘<td style="padding-left:10px;">‘+
??????? ???????????? ‘<span style="width:10px;height:10px;display:inline-block;margin-right:5px;border-radius:5px;"></span>‘+
??????? ???????????? options[i+2].seriesName+‘: ‘+options[i+2].value+
??????? ???????????? ‘</td>‘
??? ???????????? );
??? ???????? } else {
??? ???????????? htmls.push(‘<td></td>‘);
??? ???????? }
??? ???????? htmls.push(‘</tr>‘);
??? ???? }
??? ???? htmls.push(‘</table>‘);

??? ??return htmls.join(‘‘);
??? ?};
???????
??? } else {
??????? // 当时间粒度只有1个
??????? if (xTime.length == 1) {
??????????? //---------
???????????? // 处理数据 以地市为x轴 各个地市数据求和
??????????? chartOption.series[0].type = ‘bar‘;
??????????? chartOption.xAxis[0].boundaryGap = true;
??????????? chartDataList.forEach(function (item,index) {
??????????????? if (item.region == ‘全部‘) {
???????????????????? timeAry.push($nps$.utils.dateTimeRenderer(item.time,‘d H:i‘));
??????????????? }
??????????? });
??????????? timeAry.forEach(function (item) {
??????????????? var ary = [];
??????????????? ary.push(item);
??????????????? ary.unshift(item);
??????????????? timeAryData.push(ary);
??????????? });
??????????? // 时间段下拉框设置
??????????? this.__portal.componentItemMap.timeGun.setSource({matrix: timeAryData});
??????????? // 首次变成柱状图 初始设置
??????????? if (!this.__portal.componentItemMap.timeGun.getValue()) {
??????????????? this.__portal.componentItemMap.timeGun.setValue(timeAryData[0][0]);
??????????? }
??????????? // debugger
??????????? var timekey =? this.__portal.componentItemMap.timeGun.getValue();
??????????? // 显示对应y轴数据
??????????? chartDataList.forEach(function (item) {
??????????????? var datatime = $nps$.utils.dateTimeRenderer(item.time,‘d H:i‘);
??????????????? if(timekey == datatime) {
??????????????????? xAxisData.push(item.region || ‘未知‘);
??????????????????? switch (yCategory) {
??????????????????????? case ‘总用户数‘:
??????????????????????????? yAxisData.push(item.totalCount);
??????????????????????????? break;
??????????????????????? case ‘无线用户数‘:
??????????????????????????? yAxisData.push(item.wifiCount);
??????????????????????????? break;
??????????????????????? case ‘有线用户数‘:
??????????????????????????? yAxisData.push(item.nonwifiCount);
??????????????????????????? break;
??????????????????????? case ‘活跃用户数‘:
??????????????????????????? yAxisData.push(item.hourUsers || item.minuteUsers || item.todayUsers);
??????????????????????????? break;
??????????????????????? case ‘开机用户数‘:
??????????????????????????? yAxisData.push(item.hourBootUsers || item.minuteBootUsers || item.todayBootUsers);
??????????????????????????? break;
??????????????????????? case ‘播放用户数‘:
??????????????????????????? yAxisData.push(item.hourPlayUsers || item.minutePlayUsers || item.tadayPlayUsers);
??????????????????????????? break;
??????????????????????? case ‘卡顿用户数‘:
??????????????????????????? yAxisData.push(item.hourStutterUsers || item.minuteStutterUsers || item.todayStutterUsers);
??????????????????????????? break;
??????????????????????? case ‘告警用户数‘:
??????????????????????????? yAxisData.push(item.hourAlarmUsers || item.minuteAlarmUsers || item.todayAlarmUsers);
??????????????????????????? break;
??????????????????? }
??????????????? }
??????????? })
???????????? xAxisData.shift();
??????????? //柱状图 填充chartOption
??????????? chartOption.series[0].data = yAxisData;
??????????? chartOption.series[0].color = ‘#47C2C3‘;
??????????? chartOption.xAxis[0].data = xAxisData;
??????????? chartOption.yAxis[0].data = yAxisData;
???????????
??????? } else {
??????????? // 以时间为x轴? "type": "scroll",
??????????? chartOption.series[0].type = ‘bar‘;
??????????? chartOption.legend.type = ‘scroll‘;
??????????? chartOption.xAxis[0].boundaryGap = true; // 数据是否从0 开始排列x轴
???????????
??????????? var firstSeries = chartOption.series[0];
??????????? var chartSeries = [];
??????????? chartOption.legend.selected = {};
??????????? for (var i = 0; i < chartCfg.length; i ++) {
??????????????? var cfgItem = chartCfg[i];
??????????????? if(i > 4)? {
??????????????????? chartOption.legend.selected[cfgItem.name] = false;
??????????????? }
??????????????? var serieItem = $nps$.applyIf({
??????????????????? name: cfgItem.name,
??????????????????? // stack: ‘总量‘,
??????????????????? data: chartMapData[cfgItem.name] || []
??????????????? },firstSeries);
??????????????? chartSeries.push(serieItem);
??????????? }
??????????? // 折线图填充 chartOption
??????????? var xAxisData1 = [];
??????????? chartDataList.forEach(function (item,index) {
??????????????????? if (item.region == ‘全部‘) {
???????????????????????? xAxisData1.push($nps$.utils.dateTimeRenderer(item.time,‘d H:i‘));
??????????????????? }
??????????????? });
??????????? chartOption.series = chartSeries;
??????????? chartOption.xAxis[0].data = xAxisData1;
??????? }
??? }
???? // tooltip浮窗未知
??? chartOption.tooltip.position = function(point,params,dom,rect,size){
???? var pos = [point[0]-10,point[1]+10];
???? var contentSize = size.contentSize,viewSize = size.viewSize;
???? pos[0] = Math.min(viewSize[0]-contentSize[0],pos[0]);
???? pos[1] = Math.min(viewSize[1]-contentSize[1],pos[1]);
????
???? return pos;
?};
??? // 标题
??? // chartOption.title.text = "{icon|} "+ yCategory + ‘(个)‘;
??? chartOption.title.textStyle.rich = {
??icon: {
???backgroundColor: ‘#3c8cd0‘,
???width: 2,
???height: 15
??}
?};
??? return chartOption;
}

// 返回数据格式

?

?