餅圖的詳細配置
阿新 • • 發佈：2022-05-18
繪製標準餅圖
var option = {
title: { //配置標題元件
text: '影響健康、壽命的各類因素', //設定主標題
subtext: 'WHO統計調查報告', //設定次標題
left: 'center' //設定主次標題都左右居中
},
tooltip: { //配置提示框元件
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)
繪製圓環圖
圓環圖雨餅圖的區別在於radius這個配置項,radius配置項為單項時是餅圖，雙項時是圓環圖（radiuse:'66%',radiuse:['55%','60%']）
var option = {
title: { //配置標題元件
text: '影響健康、壽命的各類因素', //設定主標題
subtext: 'WHO統計調查報告', //設定次標題
left: 'center' //設定主次標題都左右居中
},
tooltip: { //配置提示框元件
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置圖例元件
orient: 'vertical', //設定垂直排列
left: 62, //設定圖例左邊距
top: 22, //設定圖例頂邊距
data: ['生活方式', '遺傳因素', '社會因素', '醫療條件', '氣候環境']
},
toolbox: { //配置工具箱元件
show: true, //設定工具箱元件是否顯示
left: 444, //設定工具箱左邊距
top: 28, //設定工具箱頂邊距
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [ //配置資料系列元件
{
name: '訪問來源',
type: 'pie',
radius :[ '45%','75%'], //設定半徑
//radius: ['45%', '75%'],
center: ['58%', '55%'], //設定圓心
clockWise: true,
data: [ //設定資料的具體值
{ value: 60, name: '生活方式' },
{ value: 15, name: '遺傳因素' },
{ value: 10, name: '社會因素' },
{ value: 8, name: '醫療條件' },
{ value: 7, name: '氣候環境' }
]
}
]
};
繪製巢狀餅圖
設定兩組數通過控制radiuse[ ' %' , ' %' ]裡面數值的大小實現餅圖的巢狀，兩組數的radiuse可以是radius: ['10%', '30%']和radius: ['40%', '55%'],
var option = {
title: { //配置標題元件
backgroundColor: 'yellow', //設定主標題的背景顏色
text: '某大學三大學院的專業分佈', //設定主標題的文字
textStyle: { //設定主標題文字樣式
color: 'green', //設定主標題文字的顏色
fontFamily: '黑體', //設定主標題文字的字型
fontSize: 28 //設定主標題文字的大小
},
x: 'center' //設定主標題左右居中
},
tooltip: { //配置提示框元件
trigger: 'item', //設定提示框的觸發方式
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置圖例元件
orient: 'vertical', //設定圖例垂直方向
x: 32, //設定圖例的水平方向
y: 74, //設定圖例的垂直方向
data: ['1-軟體技術', '1-移動應用開發', '2-大資料技術與應用', '2-移動互聯應用技術',
'2-雲端計算技術與應用', '3-投資與理財', '3-財務管理']
},
toolbox: { //配置工具箱元件
show: true, //設定工具箱是否顯示
x: 555, //設定工具箱的水平位置
y: 74, //設定工具箱的垂直位置
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: false,
series: [
{
name: '專業名稱',
type: 'pie',
selectedMode: 'single',
radius: ['10%', '30%'],
label: {
position: 'inner'
},
labelLine: {
show: false
},
data: [
{ value: 1200, name: '計算機學院' },
{ value: 900, name: '大資料學院' },
{ value: 600, name: '財金學院', selected: true } //初始時為選中狀態
]
},
{
name: '專業名稱',
type: 'pie',
selectedMode: 'single',
radius: ['40%', '55%'],
data: [
{ value: 800, name: '1-軟體技術' },
{ value: 400, name: '1-移動應用開發' },
{ value: 500, name: '2-大資料技術與應用' },
{ value: 200, name: '2-移動互聯應用技術' },
{ value: 200, name: '2-雲端計算技術與應用' },
{ value: 400, name: '3-投資與理財' },
{ value: 200, name: '3-財務管理' }
]
}
]
};
繪製南丁格爾玫瑰圖
南丁格爾圖的配置需要的餅圖的基礎上新增roseType:'readius'配置項就可以
var pieData = [
{name:"廣東",value:12},
{name:"浙江",value:10},
{name:"廣西",value:9},
{name:"上海",value:8},
{name:"四川",value:6},
{name:"福建",value:5},
{name:"北京",value:4},
{name:"天津",value:1},
{name:"遼寧",value:1},
{name:"黑龍江",value:1},
]
var option = {
legend:{
data:["廣東","浙江","廣西","上海","四川","福建","北京","天津","遼寧","黑龍江"]
},
toolbox:{
show:true,
feature:{
saveAsImage:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:["line","bar"]}
}
},
series:[ {
name:"境外輸入",
type:'pie',
data:pieData,
label:{//顯示文字
show:true,
//formatter:{a}--{b} //格式化文字
formatter:function(arg){
console.log(arg)
return arg.data.name +":"+arg.percent+"%"
},
},
radius:['30%','70%'], // 圓環 設定內邊經和外邊經
roseType:'reaius',//南京格爾圖或玫瑰圖 南丁格爾圖指的是每一個扇形的半徑隨著資料的大小而不同, 數值佔比越大, 扇形的半徑也就越大
selectedMode:'multipe', //選中效果點選相關扇區偏離出來，multipe多選、single單選
selectedOffset:30, //選則扇區偏離距離
}]
};