echart series 那些事儿[第四篇]

 

function(chartOption){

chartOption = $nps$.deepCopyTo({}, chartOption);
var chartDataList = this.__portal.componentItemMap.root.activity.chartDataList || [];
// 根据图标类型 改变趋势图
var chartType = this.__portal.componentItemMap.bar.sourceConfig.type || this.__portal.componentItemMap.line.sourceConfig.type;
// 根据指标名称显示对应的数据
var yCategory = this.__portal.componentItemMap.className.getRawValue();

var xAxisData = [],yAxisData = [],xTime = [];
chartDataList.sort(function(item1,item2) {return item1.time - item2.time});
chartDataList.map(function(item) {
xTime.push(item.time);
xAxisData.push($nps$.utils.dateTimeRenderer(item.time,'d H:i'));
});

// 时间列去重
xTime = $nps$.unique(xTime);
xAxisData = $nps$.unique(xAxisData);

// 取出所有得地市
var chartCfg = [];
chartDataList.map(function(item) {
if (xTime[0] == item.time) {
if(item['城市']) {
var obj = {};
obj['name'] = item['城市'];
chartCfg.push(obj);
}
}
});
// console.log('系列地市',chartCfg);
var chartMapData = {};
chartCfg.forEach(function(item) {
chartMapData[item.name] = [];
});

var tempMap = {};
for (var i = 0; i < chartDataList.length; i++) {
var dataItem = chartDataList[i];
tempMap[dataItem.time] = tempMap[dataItem.time] || {};
tempMap[dataItem.time][dataItem['城市']] = dataItem;
};
for (var i = 0; i < xTime.length; i++) {
var time = xTime[i];
var dataItem = tempMap[time] || {};
for (var j = 0; j < chartCfg.length; j++) {
var k = chartCfg[j].name;
switch (yCategory) {
case '挑战字':
chartMapData[k].push(dataItem[k] ? dataItem[k]['挑战字请求次数'] : 0);
break;
case '访问令牌':
chartMapData[k].push(dataItem[k] ? dataItem[k]['访问令牌请求次数'] : 0);
break;
case 'ACS认证':
chartMapData[k].push(dataItem[k] ? dataItem[k]['ACS认证请求次数'] : 0);
break;
case 'luancher认证':
chartMapData[k].push(dataItem[k] ? dataItem[k]['Luancher请求次数'] : 0);
break;
}
}
};
console.log(chartMapData);
if (xTime.length == 1 || chartType == 'bar') {
chartOption.series[0].type = 'bar';
chartOption.legend.type = 'scroll';
chartOption.xAxis[0].boundaryGap = true; // 数据是否从0 开始排列x轴
} else {
// 以时间为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 = {};
var colors = ['#9bd049', '#1d9af9', '#663db7', '#f9c928', '#d05221', '#21d0b4'];
for (var i = 0; i < chartCfg.length; i ++) {
var cfgItem = chartCfg[i];
if (cfgItem.name == '全省') {
chartOption.legend.selected[cfgItem.name] = false;
}
if(i > 5) {
chartOption.legend.selected[cfgItem.name] = false;
}
var serieItem = $nps$.applyIf({
name: cfgItem.name,
color: colors[chartSeries.length],
// stack: '总量',
data: chartMapData[cfgItem.name] || []
}, firstSeries);
chartSeries.push(serieItem);
};

// 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.series = chartSeries;
chartOption.xAxis[0].data = xAxisData;

return chartOption;
}

// 数据格式