1，這次要說明的主要問題是：對於數據量很大的時候比如：2132984738432，在顯示的時候動態的進行換算。這個操作的基本流程如下：
首先，基本的圖表操作與之前的一致，然後需要進行的操作就是在通過ajax獲取數據之後，動態進行Option的構造的時候，嚴重注意裝數據的時候要裝原始數據，在這個地方不要進行單位換算，因爲如果你的圖有座標軸的話，座標軸的構建需要依賴數據，以及單位。此時就會與tooltip的動態發生衝突，會導致其中的一個單位無法實現動態，所以，裝數據的時候放原始數據，在顯示的地方在進行單位換算，這樣就不會導致不同部分互相影響
下面來一個實際的案例吧：
下面的這個方法就是一個構造折線圖與柱狀圖混合的Option的方法，參數Sj即爲後臺傳遞的數據
makeBarOption:function(Sj){
var uparry = [];
var downarry = [];
var count = [];
var xname = [];
for(x in Sj.rows){
xname.push(Sj.rows[x].apname);
uparry.push(Sj.rows[x].upcount);
downarry.push(Sj.rows[x].downcount);
count.push(Sj.rows[x].count);
}
var option = {
tooltip: {
trigger: 'axis',
formatter:function(params){
var msg=params[0].name+' : <br /> ';
//alert(JSON.stringify(params));
for(x in params){
if(params[x].seriesName=="連接數"){
msg+="連接數 ："+params[x].value;
}
else if((params[x].value/(1024*1024*1024))>=1){
//G
msg+=params[x].seriesName+" : "+(params[x].value/(1024*1024*1024)).toFixed(2)+' G <br />';
}else if((params[x].value/(1024*1024))>=1){
//M
msg+=params[x].seriesName+" : " +(params[x].value/(1024*1024)).toFixed(2)+' M <br />';
}else if((params[x].value/(1024))>=1){
//K
msg+=params[x].seriesName+" : "+(params[x].value/(1024)).toFixed(2)+" K <br />";
}else if((params[x].value/(1024))<1&&(params[x].value/(1024))>0){
//byte
msg+=params[x].seriesName+" : "+params[x].value+" byte<br />";
}else{
//0
msg+=params[x].seriesName+" : 0 byte<br />";
}
}
return msg;
}
},
legend: {
data:['上行流量','下行流量','連接數']
},
xAxis: [
{
type: 'category',
data: xname,
axisLabel:{
//橫座標數據斜着顯示
interval:0,
//顯示全部的橫座標
rotate:40,//傾斜度 -90 至 90 默認爲0
}
}
],
yAxis: [
{
type: 'value',
name: '流量大小',
// interval: 10,
//最多顯示的y座標刻度個數
axisLabel: {
formatter: function(value,index){
if((value/(1024*1024*1024))>10){
return (value/(1024*1024*1024)).toFixed(2)+" G";
}else if((value/(1024*1024))>10){
return (value/(1024*1024)).toFixed(2)+" M";
}else if((value/(1024))>10){
return (value/(1024)).toFixed(2)+" K";
}else{
return value+" byte";
}
}
},
splitLine:{
show:false
}
},
{
type: 'value',
name: '連接數大小',
// interval: 10,
//最多顯示的y座標刻度個數（第二個y座標）
axisLabel: {
formatter: '{value} 個'
}
}
],
series: [
{
name:'上行流量',
type:'bar',
barWidth:15,
data:uparry
},
{
name:'下行流量',
type:'bar',
barWidth:15,
data:downarry
},
{
name:'連接數',
type:'line',
barWidth:15,
yAxisIndex: 1,
data:count
}
]
};
return option;
}
