话不多说,人狠上来就放代码
const optionData = {
xAxisData: ['12.1', '12.2', '12.3', '12.4', '12.5'],
series: [
{ name: 'a', data: [12, 33, 123, 43, 99] },
{ name: 'b', data: [33, 99, 22, 23, 123] },
{ name: 'c', data: [123, 55, 12, 123, 99] },
{ name: 'd', data: [23, 123, 60, 23, 12] }
]
}
const option = {
title: {
text: '单位:件',
textStyle: {
color: 'rgba(160, 160, 160, 1)',
fontSize: 12
}
},
color: ['#5AA5FA', '#23BEA0', '#5AD750', '#f5d147', '#e75f7b', '#9464e3', '#575ace'],
grid: {
top: '12%',
right: '2%',
left: '0%',
bottom: '8%',
containLabel: true
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
right: '4%',
top: '30%',
// right: '5%',
textStyle: {
color: '#fff',
fontSize: 14
},
icon: 'circle',
data: val
},
series: [
// 主要展示层的
{
radius: ['40%', '65%'],
center: ['45%', '50%'],
type: 'pie',
label: {
show: false,
// formatter: (params: any) => {
// const num = ((params.value / sum) * 100).toFixed()
// return params.name + '\n' + num + '%'
// },
fontSize: 14,
position: 'outside'
},
labelLine: {
show: true,
length: 25
},
itemStyle: {
normal: {
// 饼状图阴影,值越大阴影亮度越高
shadowBlur: 30,
shadowColor: '#2745BE'
}
},
// name: seriesName,
data: val
},
// 内边框的设置
{
radius: ['40%', '45%'],
center: ['45%', '50%'],
type: 'pie',
label: {
show: false
},
labelLine: {
show: false
},
animation: false,
tooltip: {
show: false
},
data: [
{
value: 1,
emphasis: {
disabled: true
},
itemStyle: {
color: 'rgba(250,250,250,0.3)'
}
}
]
},
// 外边框设置
{
name: '外边框',
type: 'pie',
radius: ['85%', '85%'],
center: ['45%', '50%'],
label: {
show: false
},
tooltip: {
show: false
},
data: [
{
value: 1,
name: '',
emphasis: {
disabled: true
},
itemStyle: {
borderWidth: 4,
borderColor: 'rgba(85, 115, 235, 0.30)'
}
}
]
}
]
}
饼形图中间部分,我是使用了div定位上去的,与饼形图没有关系哈,怪我不讲武德