Echarts图表数据动态单位显示

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+' :
';
        //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
';
        }else if((params[x].value/(1024*1024))>=1){
        //M
        msg+=params[x].seriesName+" : " +(params[x].value/(1024*1024)).toFixed(2)+' M
';
        }else if((params[x].value/(1024))>=1){
        //K
        msg+=params[x].seriesName+" : "+(params[x].value/(1024)).toFixed(2)+" K
";
        }else if((params[x].value/(1024))<1&&(params[x].value/(1024))>0){
        //byte
        msg+=params[x].seriesName+" : "+params[x].value+" byte
";
        }else{
        //0
        msg+=params[x].seriesName+" : 0 byte
";
        }
        }
       
       
        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;
}