裝置型別在裡 裝置品牌在外 

    後臺返回資料如下格式：

    device_brand_distribution = [{'equipment_type': '智慧手機', 'equipment_brand': 'xiaomi',                                     
                                'equipment_output': '20.0%', 'equipment_type_number': 300,

                              'equipment_brand_number': 200},

                             {'equipment_type': '智慧手機', 'equipment_brand': 'huawei', 
                             'equipment_output': '10.0%', 'equipment_type_number': 300,

                              'equipment_brand_number': 100},

                             {'equipment_type': 'desktop', 'equipment_brand': '聯想', 
                              'equipment_output': '70.0%',

                              'equipment_type_number': 700,

                              'equipment_brand_number': 700}]
 

HTML如下： 

          <div class="col-xxl-6 col-lg-6  col-md-6" style="margin-bottom: -6px">

                <div class="panel  " style="margin-left: -5px; width: 102%;">

                    <div class="panel-heading">

                        <h3 class="panel-title">訪問裝置品牌分佈</h3>

                    </div>

                    <div class="panel-body  ">

                        <div style="height:360px" id="equipmentbrand"></div>

                    </div>

                </div>

            </div>

       <script type="text/javascript" src="../../static/js/lib/echarts.min.js"></script>
 

js程式碼如下：

     傳送ajax請求 請求成功後 在success裡{
       var brand_distribution = result.device_brand_distribution;//裝置品牌分佈

                var typeData = fnPiedata2(brand_distribution,'equipment_type','equipment_type_number');//name,value,百分比,型別

                var bransData = fnPiedata2(brand_distribution,'equipment_brand','equipment_brand_number');//name,value,百分比,型別

                var data=fnPiedata3(brand_distribution,'equipment_type','equipment_brand','equipment_output');

                fnEquipmentbrand2('equipmentbrand',data,typeData,'裝置品牌分佈圖',bransData);
}




   /*雙餅圖資料格式轉換*/

// fnPiedata2處理內部 裝置型別的資料 name是裝置型別 value是對應的數值

        function fnPiedata2(dt,name,value){

            var arr = [];

            var namrArr=[];

            for(var i=0;i<dt.length;i++){

              if(name=="equipment_type"){

                var name1=dt[i][name];

                var trueOrFalse="false";

                $(namrArr).each(function(index,item){  // 去重操作
                  if(item==name1){

                    // alert(name1)

                    trueOrFalse="true";

                    return false;

                  }

                })



                if(trueOrFalse=="false"){



                  var _json = {

                      value:dt[i][value],

                      name:dt[i][name]

                  }

                  arr.push(_json);

                  namrArr.push(dt[i][name]);

                }





              }else{

                var _json = {

                    value:dt[i][value],

                    name:dt[i][name]

                }

                arr.push(_json);

              }



            }

            return arr;

        }

// fnPiedata3 處理外部 裝置品牌的資料 brand是裝置品牌 value是對應的數值 percent是所佔比

        function fnPiedata3(dt,type,brand,percent){

            var arr = [];

            for(var i=0;i<dt.length;i++){

                var _json = {

                    type:dt[i][type],

                    brand:dt[i][brand],

                    percent:dt[i][percent],

                }

                arr.push(_json);

            }

            return arr;

        }



 // 裝置品牌分佈圖



   function fnEquipmentbrand2(id,dt,typeDate,name,brandData){

       for(var j=0;j<dt.length;j++){

           var otr = $('<tr></tr>');

           otr.html('<td>'+dt[j].type+'</td><td>'+dt[j].brand+'</td><td>'+dt[j].percent+'</td>')

           $('.brandDistribution').append(otr);

       }

 // 圖片左側對應的小提示

       var arrname = [];

       for(var i=0;i<dt.length;i++){

           arrname.push(dt[i].brand);

       }

       var myChart = echarts.init(document.getElementById(id));

   var option = {

       tooltip: { // 滑鼠放入的提示

           trigger: 'item',

           formatter: "{a} <br/>{b}: {c} ({d}%)"

       },

       legend: {

           orient: 'vertical',   //圖片左側對應的小提示  垂直分佈

           x: 'left',           //圖片左側對應的小提示  靠著左側分佈

           data:arrname  // 圖片左側對應的小提示d的資料來源

       },

       color:['#ef7837','#00a9cd','#fec35d','#00ac99','#13a666','#655bc7','#ba62e3','#e773d5','#c0a548','#3b7ec3','#71d2e0','#8ee071','#dce071','#3e4ddd','#278fe0'],

       series: [

           {

               name:name,

               type:'pie',

               selectedMode: 'single',

               radius: [0, '60%'],



               label: {

                   normal: {

                       position: 'inner'

                   }

               },

               labelLine: {

                   normal: {

                       show: false     //內層餅圖的箭頭指示線和指示框  不顯示

                   }

               },

               data:typeDate       // 內層餅圖的資料來源

           },

           {

               name:'訪問來源',

               type:'pie',

               radius: ['50%', '65%'],

               label: {

                   normal: {

                       show:false    // 外層餅圖的箭頭指示線和指示框  不顯示

                   }

               },

               data:brandData   // 外層餅圖的資料來源

           }

       ]

   };

      myChart.setOption(option);

  }