php echarts 嵌套饼图,echarts绘制嵌套环形图/ 双饼图

设备类型在里 设备品牌在外

后台返回数据如下格式：

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如下：

访问设备品牌分布

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');

otr.html(''+dt[j].type+''+dt[j].brand+''+dt[j].percent+'')

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

}

// 图片左侧对应的小提示

var arrname = [];

for(var i=0;i{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);

}