使用echart画折线图的经验_1

几点经验：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){ //鼠标移到某有值点的X轴位置时，提示的信息。                    var info =  desc.xlabels[data[0].dataIndex];                    for (var i = 0; i < data.length; i++){//data[i]是值点系列                        if ("-" != data[i].value){//如果某系列在此X轴位置没有值，则其值为'-'                            var tmp = data[i].seriesName.split(" ");                            info += "<br>" + 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},//设置X坐标标识斜转45度；并设置刻度生成的间隔，以避免刻度太多显示难看                         type : 'category',                         splitLine: {show: false},//不显示X轴垂直的分割线                         boundaryGap : false,                         data : desc.xVals                     },                 ],                 yAxis : [                     {                         type: 'value',                         min: desc.ymin,                         max: desc.ymax,                         splitNumber:desc.gripNum,//设置Y轴值最大最小值，以及分为几个刻度。                         axisLabel : {                             formatter: '{value} '+ desc.unit//设置Y轴刻度标识格式                         }                     }                 ],               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 < items.length; i++){            var labelx = items[i].tvSec + "<br>" +                "Addr:"+items[i].addr +"/"+ items[i].port + "<br>" +                 "周期:"+items[i].period +"&nbsp;&nbsp;" +" " + 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 < linelist_info.length; i++){        var key = linelist_info[i][LINE_INFO.KEY];        if (typeof(items[0][key+tag]) != "undefined"){            var desc = getLineDesc(key, items, filterval);            desc.seqNum = lineNum + 1;            lineDesc[lineNum++] = desc;        }    }    for (var i = 0; i < lineDesc.length; i++){        lineChart(lineDesc[i], filterval)    }}

“`