echarts二维图表举例

//所用数据
var data1={"date":"2017.2",
            "data":{"专线": [{"key":"联通","value":622},
                            {"key":"电信","value":776},
                            {"key":"移动","value":481},
                            {"key":"其他","value":146}],
                    "VPN": [{"key":"联通","value":467},
                            {"key":"电信","value":400},
                            {"key":"移动","value":20},
                            {"key":"其他","value":38}],
                  "Internet":[{"key":"联通","value":18},
                             {"key":"电信","value":49},
                             {"key":"移动","value":16},
                              {"key":"其他","value":104}]  
                    }
           } 
 //data1.data是一个对象，下面先写下二维数组重组的方法，这种方法可以在非矩阵的情况下重组，比如缺失了{"key":"联通","value":622}，如果是矩阵转置，关键是arr[i][j]=newarr[j][i]

      //对象转数组的方法
        function transform(obj){
          var arr1 = [];          
          for(var item in obj){
             arr1.push(obj[item]);            
          }
          return arr1;         
           }       
      //二维数组重组 方法1      
  // var data2={};
  //   for(var index in data1.data){    //遍历对象
  //     for (var i = data1.data[index].length - 1; i >= 0; i--) {
      //   var item={"key":index,"value":data1.data[index][i].value}
  //       if (!data2[data1.data[index][i].key]) {
          //         data2[data1.data[index][i].key] = [];
          //       }
          //       data2[data1.data[index][i].key].push(item);
          //     };
          //   }  
          // console.log(data2)
          //data1.data是原对象，data2是重组后的新对象

  //（方法二）   data1.data是原对象 newobj是重组后的新对象
    var obj_Property=Object.getOwnPropertyNames(data1.data)//该方法可以获取对象的属性值，返回一个数组（方法一用的是遍历）
    var newobj={}        
       for (var i = 0; i < obj_Property.length; i++){               
         for (var j = 0; j < data1.data[obj_Property[i]].length; j++) {
             var obj_Propertynew=Object.getOwnPropertyNames(newobj)
             var b=obj_Propertynew.indexOf(data1.data[obj_Property[i]][j].key)
            if(b==-1){
                newobj[data1.data[obj_Property[i]][j].key]=[];
            }
    newobj[data1.data[obj_Property[i]][j].key].push({"key":obj_Property[i],"value":data1.data[obj_Property[i]][j].value})                        
         }
       }
       //以上的方法与下面成图无关，这里从数据data1中提取echart要用的series.data
        var  chart1_xAxis=obj_Propertynew      
        var   chart1_data=new Array()//要组成3*4的数组
          for(var i=0;i<obj_Property.length;i++){  
             chart1_data[i]=new Array() 
            for(var j=0;j<obj1[obj_Property[i]].length;j++){             
               chart1_data[i].push(obj1[obj_Property[i]][j].value);       
            }           
          }      
//下面是图表
var mychart1=echarts.init(document.getElementById('item1'));
option1 = {
   title: {
        text: '运营商资源分布('+data1.date+')',
        subtext:'线路数量',
        left:'center'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'         
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    legend: {
        data: obj_Property,
         right:'3%',
        top:'3%'      
    },
    xAxis : [
        {
            type : 'category',
            data :chart1_xAxis,     
        }
    ],
    yAxis : [
        {
            type : 'value',
             name: '数量（条）',
        },

    ],
    series : [
        {
            name:'专线',
            type:'bar',
            barWidth: '20%',
            data:chart1_data[0],
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
        },
        {
            name:'VPN',
            type:'bar',
            barWidth: '20%',
            data:chart1_data[1],
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
        },
        {
            name:'Internet',
            type:'bar',
            barWidth: '20%',
            data:chart1_data[2],
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
        },
    ]
};
mychart1.setOption(option1);