使用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 += "
" + 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 + "
" +
"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 < 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)
}
}
“`