麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 網站 > WEB開發 > 正文

使用echart畫折線圖的經驗_1

2024-04-27 15:15:21
字體:
來源:轉載
供稿:網友
幾點經驗: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) }}

“`


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 久久久成人一区二区免费影院 | 国产精品一区视频 | 久艹在线视频 | 欧洲精品久久久久69精品 | 中文字幕一二区 | 国产精品麻豆一区二区三区 | 久久午夜免费视频 | 久久九九热re6这里有精品 | 一级黄色a视频 | 69性欧美高清影院 | 性片久久 | 欧美一级电影网站 | 3级毛片 | 日本中文字幕久久 | 欧美综合在线观看视频 | 爽爽视频免费看 | 欧美成人三级视频 | chinese乱子伦xxxx国语对白 | www.99tv| 成年免费看 | 欧美a在线观看 | 久久久久久久久久久久久久国产 | 本站只有精品 | 在线观看国产一区二区 | 日韩做爰视频免费 | 亚洲影视在线 | 国产精品一区二区免费在线观看 | www.热| 蜜桃网在线 | 国产精品久久久久久影视 | 日韩欧美精品电影 | 一级毛片在线免费观看视频 | 欧美精品| 最新中文字幕在线 | 一区二区免费看 | 色视频一区二区 | 色网站在线免费观看 | 国产毛片在线看 | 欧美精品免费一区二区三区 | 成人午夜免费看 | 久草在线新时代视觉 |