const data = [
{
name: '数据1', value: 259, block: 1, monitor: 58,
},
{
name: '数据2', value: 197, block: 181, monitor: 16
},
{
name: '数据3', value: 193, block: 48, monitor: 45
},
{
name: '数据4', value: 54, block: 53, monitor: 1
}
]
const color2 = ['rgba(240,55,55,.2)', 'rgba(245,110,20,.2)', 'rgba(50,180,255,.2)', 'rgba(60,210,110,.2)']
option = {
backgroundColor: 'rgba(150,200,240,1)',
tooltip: {
extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
padding: [12, 16, 12, 16],
textStyle: {
color: 'rgba(0,0,0,0.65)'
},
formatter: (param) => {
let { marker, name, value, data } = param
let result = `
<div>${marker}${name}</div>
<div>数量：${value} </div>
<div>占比${data.block} %</div>`
return result
},
},
legend: {
orient: 'vertial',
itemWidth: 8,
itemHeight: 8,
right: 20,
bottom: 'center',
data: data,
formatter: (name) => {
for (var i = 0; i < data.length; i++) {
if (name == data[i].name) {
return '{name|' + name + '}{value|' + data[i].monitor + '%}'
}
}
},
textStyle: {
rich: {
name: {
fontSize: 14,
fontWeight: 400,
width: 100,
height: 20,
padding: [0, 0, 0, 5]
},
value: {
fontSize: 14,
fontWeight: 500,
height: 20,
width: 50,
align: 'left'
}
}
},
itemStyle: {
borderWidth: 0
}
},
color: ['rgba(240,55,55,.8)', 'rgba(245,110,20,.8)', 'rgba(50,180,255,.8)', 'rgba(60,210,110,.8)'],
series: [
// 中间总量
{
type: 'pie',
radius: ['0', '30%'],
center: ['30%', '50%'],
minAngle: 0,
label: {
show: true,
position: 'center',
fontSize: 26,
formatter: '{name| {b} }\n\n{value| {c} }',
rich: {
name: {
fontSize: 26,
fontWeight: 600,
color: 'rgba(50,180,255,1)'
},
value: {
fontSize: 14,
fontWeight: 500,
}
}
},
silent: true,
tooltip: {
show: false,
},
itemStyle: { color: 'rgba(0,0,0,0)' },
data: [
{
name: '数据总量',
value: 1000
}
],
},
{
name: '总数',
type: 'pie',
radius: ['42%', '46%'],
center: ['30%', '50%'], // 图形位置
label: { // 鼠标悬浮具体数据显示
show: false
},
silent: true,
data: data
},
{
name: '总数',
type: 'pie',
radius: ['30%', '40%'],
center: ['30%', '50%'], // 图形位置
itemStyle: {
borderWidth: 3, // 设置border宽度
borderColor: 'rgba(250,250,250,1)',
color: (params) => {
console.log(params)
return color2[params.dataIndex]
}
},
label: { // 鼠标悬浮具体数据显示
show: false
},
data: data
}
]
};