ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

echart series 那些事儿[第二篇]

2020-03-26 16:00:35  阅读:356  来源: 互联网

标签:chartOption 150 echart series yAxisData item rate ms 第二篇


 

 

function(chartOption){

chartOption = $nps$.deepCopyTo({}, chartOption);

var ChartData_ms = this.__portal.componentItemMap.root.chartDataList_ms || [];
var ChartData_rate = this.__portal.componentItemMap.root.chartDataList_rate || [];
var yCategory = this.__portal.componentItemMap.className.getRawValue();
var xAxisData = [],yAxisData_ms = [],yAxisData_rate = [];

ChartData_ms.map(function(item) {
xAxisData.push(item._time);
switch(yCategory) {
case '挑战字':
yAxisData_ms.push(item['挑战字时延'] ? item['挑战字时延'].toFixed(2) : 0);
break;
case '访问令牌':
yAxisData_ms.push(item['访问令牌时延'] ? item['访问令牌时延'].toFixed(2) : 0);
break;
case 'ACS认证':
yAxisData_ms.push(item['ACS认证时延'] ? item['ACS认证时延'].toFixed(2) : 0);
break;
case 'luancher认证':
yAxisData_ms.push(item['luancher认证时延'] ? item['luancher认证时延'].toFixed(2) : 0);
break;
}
});
ChartData_rate.map(function(item) {
switch(yCategory) {
case '挑战字':
yAxisData_rate.push(item['挑战字成功率'] ? (item['挑战字成功率']).toFixed(2) : 0);
break;
case '访问令牌':
yAxisData_rate.push(item['访问令牌成功率'] ? (item['访问令牌成功率']).toFixed(2) : 0);
break;
case 'ACS认证':
yAxisData_rate.push(item['ACS认证成功率'] ? (item['ACS认证成功率']).toFixed(2) : 0);
break;
case 'luancher认证':
yAxisData_rate.push(item['luancher成功率'] ? (item['luancher成功率']).toFixed(2) : 0);
break;
}
});


chartOption.xAxis[0].data = xAxisData;
chartOption.series[0].data = yAxisData_rate;
chartOption.series[1].data = yAxisData_ms;
// 标题
// chartOption.title.left = "left";
// chartOption.title.top = "0";
// chartOption.title.text = "{icon|} 收视趋势";
chartOption.title.textStyle.rich = {
icon: {
backgroundColor: '#3c8cd0',
width: 2,
height: 15
}
};

// 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.dataZoom = [{
"height": 18,
"bottom": 5,
"left": 10,
"right": 13,
"borderColor": "rgba(150,150,150,0.2)",
"handleStyle": {
"color": "rgba(150,150,150,0.5)"
},
"fillerColor": "rgba(150,150,150,0.2)",
"startValue": xAxisData[xAxisData.length > 24 ? parseInt(xAxisData.length/2) : 0],
"endValue": xAxisData[xAxisData.length-1],
}, {
"type": "slider",
"height": 18,
"bottom": 5,
"left": 10,
"right": 13,
"border": 0,
"borderColor": "rgba(150,150,150,0.2)",
"backgroundColor": "rgba(150,150,150,0.2)",
"handleStyle": {
"color": "rgba(150,150,150,0.5)"
},
"fillerColor": "rgba(150,150,150,0.2)",
"dataBackground": {
"areaStyle": {
"color": "gray"
}
}
}];

console.log('请求过程', chartOption);
return chartOption;
}

// 返回数据格式

 

 

标签:chartOption,150,echart,series,yAxisData,item,rate,ms,第二篇
来源: https://www.cnblogs.com/stevenzhangcy/p/12574964.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有