const chartData = [
{
value: 12,
name: '重大危险源企业'
},
{
value: 121,
name: '危险化学品生产经营单位'
},
{
value: 20,
name: '加油站'
},
{
value: 41,
name: '规上企业'
},
{
value: 328,
name: '粉尘涉爆企业'
},
{
value: 142,
name: '易制毒企业'
},
{
value: 95,
name: '锂电池企业'
}
]
const colorList = ['#115FEA', '#10EBE3', '#10A9EB', '#EB9C10', '#2E10EB', '#9B10EB']
const sum = chartData.reduce((per, cur) => per + cur.value, 0)
const gap = (1 * sum) / 100
const pieData1 = []
const pieData2 = []
const gapData = {
name: '',
value: gap,
itemStyle: {
color: 'transparent'
}
}
for (let i = 0; i < chartData.length; i++) {
// 第一圈数据
pieData1.push({
...chartData[i],
itemStyle: {
borderRadius: 10
}
})
pieData1.push(gapData)
// 第二圈数据
pieData2.push({
...chartData[i],
itemStyle: {
color: colorList[i],
opacity: 0.21
}
})
pieData2.push(gapData)
}
console.log(pieData2)
option = {
backgroundColor: '#0F141B',
tooltip: {
show: true,
backgroundColor: 'rgba(0, 0, 0,.8)',
textStyle: {
color: '#fff'
}
},
legend: {
show: true,
right: '2%',
top: 'center',
align: 'left',
itemGap: 18,
// icon: 'rect',
itemWidth: 13,
itemHeight: 7,
// symbolKeepAspect: false,
textStyle: {
color: '#D8DDE3',
rich: {
name: {
verticalAlign: 'right',
align: 'left',
width: 150,
fontSize: 14,
color: '#D8DDE3'
},
percent: {
padding: [0, 0, 0, 8],
color: '#D8DDE3'
}
},
borderWidth: 53 // 间距的宽度
},
formatter: name => {
console.log(name)
console.log(chartData)
const item = chartData.find(i => {
return i.name === name
})
const p = ((item.value / sum) * 100).toFixed(0)
return '{name|' + name + '}' + '{percent|' + p + '}' + '个'
}
},
grid: {
top: 35,
right: 30,
bottom: 20,
left: 30
},
color: colorList,
series: [
{
name: '',
type: 'pie',
roundCap: true,
radius: ['66%', '70%'],
center: ['36%', '45%'],
label: {
show: false
},
labelLine: {
show: false
},
data: pieData1
},
{
type: 'pie',
radius: ['66%', '54%'],
center: ['36%', '45%'],
gap: 1.71,
label: {
show: false
},
labelLine: {
show: false
},
silent: true,
data: pieData2
},
{
type: 'pie',
center: ['36%', '45%'],
radius: [0, '45.6%'],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: 'rgba(75, 126, 203,.1)'
},
silent: true,
data: [
{
value: 100,
name: ''
}
]
}
]
}