echarts中间有字饼图Demo2

时间:2023-03-09 22:00:52
echarts中间有字饼图Demo2

echarts链接:http://gallery.echartsjs.com/editor.html?c=xHy2vIPzLQ

完整代码:

option = {
backgroundColor: 'black',
title: {
text: '标题',
x: 'center',
textStyle: {
fontWeight: 'normal',
color: 'white',
fontSize: 18
},
},
color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
'#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
], //饼图颜色 tooltip: { //弹框
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}, legend: {
orient: 'horizontal', //horizontal横向,vertical纵向
x: 'center',
y: 'bottom',
data: ['直接访问', '邮件营销', '联盟广告'],
textStyle: {
color: 'white'
}
},
series: [{
name: '访问总数',
type: 'pie',
selectedMode: 'single',
radius: [0, '50%'], //调整中间字的大小
center: ['50%', '50%'], //调整中间字的位置
avoidLabelOverlap: false,
color: 'black', //调整中间的背景
label: {
normal: {
show: true,
position: 'center',
formatter: function(argument) {
var html;
html = 1000;
return html;
},
textStyle: {
fontSize: 50,
color: '#0FF'
}
} },
data: [{
value: 1000,
name: '总数'
}, ]
}, {
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'], //调整饼图大小
center: ['50%', '50%'], //调整饼图位置
avoidLabelOverlap: true,
label: {
normal: {
show: true, //表示文字是否显示
textStyle: {
fontSize: 18
}
},
emphasis: {
show: true
}
},
labelLine: {
show: true //表示线是否显示
},
data: [{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
]
}]
};

代码:

option = {
backgroundColor: 'black',
color: ['#f69846', '#4777f5', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
'#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
], //饼图颜色
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center', //中间文字居中
formatter: function(argument) {
var html;
html = '50';
return html;
},
textStyle: {
fontSize: 23,
color: '#39CCCC'
}
} },
data: [{
value: 25,
name: '政治风险'
},
{
value: 25,
name: '廉政风险'
},
{
value: 25,
name: '渎职风险'
},
{
value: 25,
name: '绩效风险'
}
]
}]
};