http://gallery.echartsjs.com/...
請問下有人知道怎么把這echarts里的6個(gè)餅圖放一行嗎
先看下文檔吧
radius代表半徑
center代表中心坐標(biāo)點(diǎn)
我隨便改了下實(shí)現(xiàn)了6個(gè)在一行，具體的你看完文檔再自己探索
pieFormat=function (obj) {
if(obj.name=="別人家的孩子"){
return obj.seriesName+"："+(obj.percent)+"%";
}
return obj.name+"："+(obj.percent)+"%";
};
formatValue=function (obj) {
return formatNumber(obj.value);
};
formatNameValue=function (obj) {
return obj.name+"："+formatNumber(obj.value);
};
userFormFormat=function (obj) {
if(obj.name=="干兒子"||obj.name=="親兒子"){
return obj.seriesName+"："+(obj.percent)+"%";
}
return (obj.percent)+"%";
};
formatNumber=function(n){
var b=parseInt(n).toString();
var len=b.length;
if(len<=3){return b;}
var r=len%3;
return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
};
option ={
"title" : {
"text" : "\n67373觀眾來源：20170212-20170218"
},
"legend" : {
"data" : [ "親兒子", "干兒子", "別人家的孩子", null, null, null, null, null, null, null, null, null, null, null, null ]
},
"series" : [ {
"color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
"name" : "女流66",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "9297"
}, {
"name" : "別人家的孩子",
"value" : "53057"
}, {
"name" : "親兒子",
"value" : "119032"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : pieFormat,
"textStyle" : { }
}
},
"radius" : "10%",
"center" : [ "10%", "30%" ]
}, {
"name" : "",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "9297"
}, {
"name" : "別人家的孩子",
"value" : "53057"
}, {
"name" : "親兒子",
"value" : "119032"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : formatValue,
"textStyle" : {
"fontSize" : 14,
"color" : "#777777"
}
}
},
"radius" : [ "10%", "20%" ],
"center" : [ "10%", "30%" ],
"itemStyle" : {
"normal" : {
"color" : "#F2F2F2"
},
"emphasis" : {
"color" : "#ADADAD"
}
}
}, {
"color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
"name" : "馮提莫",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "8814"
}, {
"name" : "別人家的孩子",
"value" : "113171"
}, {
"name" : "親兒子",
"value" : "119515"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : pieFormat,
"textStyle" : { }
}
},
"radius" : "10%",
"center" : [ "25%", "30%" ]
}, {
"name" : "",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "8814"
}, {
"name" : "別人家的孩子",
"value" : "113171"
}, {
"name" : "親兒子",
"value" : "119515"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : formatValue,
"textStyle" : {
"fontSize" : 14,
"color" : "#777777"
}
}
},
"radius" : [ "10%", "20%" ],
"center" : [ "25%", "30%" ],
"itemStyle" : {
"normal" : {
"color" : "#F2F2F2"
},
"emphasis" : {
"color" : "#ADADAD"
}
}
}, {
"color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
"name" : "劉飛兒faye",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "4460"
}, {
"name" : "別人家的孩子",
"value" : "44476"
}, {
"name" : "親兒子",
"value" : "123869"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : pieFormat,
"textStyle" : { }
}
},
"radius" : "10%",
"center" : [ "40%", "30%" ]
}, {
"name" : "",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "4460"
}, {
"name" : "別人家的孩子",
"value" : "44476"
}, {
"name" : "親兒子",
"value" : "123869"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : formatValue,
"textStyle" : {
"fontSize" : 14,
"color" : "#777777"
}
}
},
"radius" : [ "10%", "20%" ],
"center" : [ "40%", "30%" ],
"itemStyle" : {
"normal" : {
"color" : "#F2F2F2"
},
"emphasis" : {
"color" : "#ADADAD"
}
}
}, {
"color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
"name" : "趙小臭",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "3061"
}, {
"name" : "別人家的孩子",
"value" : "29294"
}, {
"name" : "親兒子",
"value" : "125268"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : pieFormat,
"textStyle" : { }
}
},
"radius" : "10%",
"center" : [ "55%", "30%" ]
}, {
"name" : "",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "3061"
}, {
"name" : "別人家的孩子",
"value" : "29294"
}, {
"name" : "親兒子",
"value" : "125268"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : formatValue,
"textStyle" : {
"fontSize" : 14,
"color" : "#777777"
}
}
},
"radius" : [ "10%", "20%" ],
"center" : [ "55%", "30%" ],
"itemStyle" : {
"normal" : {
"color" : "#F2F2F2"
},
"emphasis" : {
"color" : "#ADADAD"
}
}
}, {
"color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
"name" : "萌面酥",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "2064"
}, {
"name" : "別人家的孩子",
"value" : "45268"
}, {
"name" : "親兒子",
"value" : "126265"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : pieFormat,
"textStyle" : { }
}
},
"radius" : "10%",
"center" : [ "70%", "30%" ]
}, {
"name" : "",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "2064"
}, {
"name" : "別人家的孩子",
"value" : "45268"
}, {
"name" : "親兒子",
"value" : "126265"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : formatValue,
"textStyle" : {
"fontSize" : 14,
"color" : "#777777"
}
}
},
"radius" : [ "10%", "20%" ],
"center" : [ "70%", "30%" ],
"itemStyle" : {
"normal" : {
"color" : "#F2F2F2"
},
"emphasis" : {
"color" : "#ADADAD"
}
}
}, {
"color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
"name" : "丸子喲",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "1790"
}, {
"name" : "別人家的孩子",
"value" : "29243"
}, {
"name" : "親兒子",
"value" : "126539"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : pieFormat,
"textStyle" : { }
}
},
"radius" : "10%",
"center" : [ "85%", "30%" ]
}, {
"name" : "",
"type" : "pie",
"data" : [ {
"name" : "干兒子",
"value" : "1790"
}, {
"name" : "別人家的孩子",
"value" : "29243"
}, {
"name" : "親兒子",
"value" : "126539"
} ],
"label" : {
"normal" : {
"position" : "inner",
"formatter" : formatValue,
"textStyle" : {
"fontSize" : 14,
"color" : "#777777"
}
}
},
"radius" : [ "10%", "20%" ],
"center" : [ "85%", "30%" ],
"itemStyle" : {
"normal" : {
"color" : "#F2F2F2"
},
"emphasis" : {
"color" : "#ADADAD"
}
}
} ],
"tooltip" : {
"trigger" : ""
},
"toolbox" : { },
"color" : [ "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3" ]
}
這個(gè)問題我先在群里問到了，第一種解決方案就是調(diào)center的值，還有一種就是做六個(gè)div，一個(gè)div對應(yīng)一個(gè)餅圖，個(gè)人覺得第二種更靈活，但是還沒實(shí)現(xiàn)的思路
通過修改option的配置項(xiàng)的參數(shù)：如下
改變他們的半徑和中心點(diǎn)的位置可以實(shí)現(xiàn)你想要的布局！
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
北大課工場是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國家深化產(chǎn)教融合／校企合作的政策，積極推進(jìn)“中國制造2025”，實(shí)現(xiàn)中華民族偉大復(fù)興的升級產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰，中國職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗(yàn)，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多