几点经验:
1. 绘制函数一定要扩展性强,以适应多指标多图表绘制。
2. 可以按照中间95%范围的数据样本的值来设置Y轴刻度的最大最小值。最大最小值之外的值点还是会体现在数据中,其标识点则会画在最上或最下的分割线上。
3. axisLabel: {rotate: 45, interval:desc.xVals_intv}可以控制X轴坐标的角度和显示间隔。
4. 折线图不能像scatter一样,以[x,y]方式设置系列的值列表。所以,如果有某值系在某X位置没有值,则其中值可以设置为'-'。此时,折线绘制到此[x,-]位置时,会断掉,形成很多的断裂的线段。
4. echart在CPU很忙的时候,同时进行绘图,很容易导致渲染失败。可以把大规模的数据计算放在绘图前完成。避免绘图与数据处理并行。
//绘图
<script src="<%=path%>/resources/customJS/echarts-all.js">script>
<script type="text/Javascript"> var lineChart=function (desc,filterval) { var myChart = echarts.init(document.getElementById(lineDivGet(desc.key))); var cOngesalg= "" if (typeof(filterval.congesalg) != "undefined"){ cOngesalg= filterval.congesalg; } var myoption = { title : { text: desc.seqNum + ". " + lineTitleGet(desc.key)+" ("+filterval.eNetType+" "+ congesalg + ")", subtext:"计算公式: " + lineSubtitleGet(desc.key), subtextStyle: { fontSize: 14, color: 'blue' }, x:'center' }, tooltip : { show: true, trigger: 'axis', formatter: function(data){ var info = desc.xlabels[data[0].dataIndex]; for (var i = 0; i if ("-" != data[i].value){ var tmp = data[i].seriesName.split(" "); info += "
" + tmp[0]+":" + data[i].value + desc.unit; } } return info; } }, legend: { orient: 'vertical', x:'left', data:desc.sName }, toolbox: { show: true, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { axisLabel: {rotate: 45, interval:desc.xVals_intv}, type : 'category', splitLine: {show: false}, boundaryGap : false, data : desc.xVals }, ], yAxis : [ { type: 'value', min: desc.ymin, max: desc.ymax, splitNumber:desc.gripNum, axisLabel : { formatter: '{value} '+ desc.unit } } ], series : [ { name: desc.sName[0], type: 'line', data: desc.yVals[0], itemStyle:{ emphasis:{label:{show:true}} }, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name: desc.sName[1], type: 'line', data: desc.yVals[1], itemStyle:{ emphasis:{label:{show:true}} }, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ], }; myChart.setOption(myoption); }
“`
//计算值点描述信息
var getLineDesc = function(key, items, filterval){
var xlabels = []
var xVals = []
var yVals = []
var yVals_S1 = []
var avg_S1 = 0
var num_S1 = 0
var avg_S2 = 0
var num_S2 = 0
var yVals_S2 = []
var xVals_num = 10
if (items.length > 0){
var xVals_intv = Math.ceil(items.length/xVals_num)
var tag=""
if (datafilter_nettype_slow == filterval.eNetType){
tag="2"
}
//区分值系列
for (var i = 0; i " +
"Addr:"+items[i].addr +"/"+ items[i].port + "
" +
"周期:"+items[i].period +" " +" " + items[i].congesalg
xlabels.push(labelx)
xVals.push(items[i].tvSec.replace(" ","\n"))
var yx = Math.floor((items[i][key+tag] * lineAjustGet(key))*100)/100;
yVals.push(yx);
if (0 != items[i].optimizing){
avg_S1 += yx;
num_S1 ++;
yVals_S1.push(yx);
yVals_S2.push("-");
}else{
avg_S2 += yx;
num_S2 ++;
yVals_S1.push("-");
yVals_S2.push(yx);
}
}
}
var optPercent = ""
var unit = lineUnitGet(key);
if (num_S1 > 0){
avg_S1 = Math.floor((avg_S1/num_S1) *100)/100;
}else{
avg_S1 = "-"
}
if (num_S2 > 0){
avg_S2 = Math.floor((avg_S2/num_S2) *100)/100;
if (num_S1 > 0){
if ('%' == unit){
optPercent = "(" + Math.ceil((avg_S1 - avg_S2) *100)/100 + "%)";
}else{
optPercent = (((avg_S2 - avg_S1)*100)/avg_S2)
optPercent = "(" + Math.ceil(optPercent *100)/100 + "%)";
}
}
}else{
avg_S2 = "-"
}
//计算Y周最大最小刻度,和设置的分割数
var defaultYGripNum = 4
var pickThreshold = 0.025 //use 95% data 2 caculate Y Scale Value
var ySort = sortArray(yVals);
var ymax = 0;
var ymin = 0;
if (0 != yVals.length) {
var tag = Math.ceil(ySort.length * pickThreshold)
ymin = ySort[tag];
tag = Math.ceil(ySort.length * ( 1 - pickThreshold));
if (tag >= ySort.length){
tag = ySort.length - 1;
}
ymax = ySort[tag];
var yIntvl = Math.ceil((ymax - ymin + 1)/(defaultYGripNum - 1))
ymin = ymin - Math.ceil(yIntvl/2)
if (ymin <0){
ymin = 0;
}else{
ymin = Math.floor(ymin)
}
ymax = ymax + Math.ceil(yIntvl/2);
ymax = ymin + Math.ceil((ymax - ymin)/defaultYGripNum)*defaultYGripNum;
}
//赋值出去
var desc = {};
desc.key = key;
desc.xVals = xVals;
desc.xlabels = xlabels;
desc.xVals_intv = xVals_intv;
desc.yVals = [yVals_S1, yVals_S2];
desc.ymax = ymax;
desc.ymin = ymin;
desc.unit = unit;
desc.gripNum = defaultYGripNum;
desc.sName = [datafilter_optimize_yes +" "+avg_S1+unit + optPercent,
datafilter_optimize_no+" "+avg_S2+unit];
return desc;
}
var allLineChartDo = function(filterval, items){//上层控制函数
if (0 == items.length){
return;
}
var tag=""
if (datafilter_nettype_slow == filterval.eNetType){
tag="2"
}
var lineDesc = [];
var lineNum = 0;
for (var i = 0; i
“`