设备类型在里 设备品牌在外
后台返回数据如下格式：
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);
}