const options = (data) => {
return {
// 标题
title: {
text: data.title,
x: 'left', // 标题位置
textStyle: {
color: '#333333',
fontWeight: 500,
fontSize: 14 // 主题文字字体大小,默认为18px
}
},
tooltip: {
trigger: 'item',
backgroundColor: '#fff',
borderColor: 'transparent',
padding: [0, 0, 0, 0],
formatter: (params) => {
return `<div class="pie-tooltip-div"><p class="name">${params.name}:${params.value}<p><p class="value">${params.data.rate}</p></div>`
}
},
// // 图例
legend: {
orient: 'vertical',
right: '10%',
top: 'middle',
icon: 'circle',
itemHeight: 8, // 改变圆圈大小
itemWidth: 8, // 改变圆圈大小
data: data.data,
type: 'scroll',
pageIcons: {
vertical: [
'path://M512 56.889c251.364 0 455.111 203.747 455.111 455.111S763.364 967.111 512 967.111 56.889 763.364 56.889 512 260.636 56.889 512 56.889z m-179 532.11l179-179 179 179a28.444 28.444 0 0 0 40.221-40.22l-199.11-199.111a28.444 28.444 0 0 0-40.221 0l-199.111 199.11A28.444 28.444 0 0 0 332.999 589z',
'path://M512 32C246.4 32 32 246.4 32 512s214.4 480 480 480 480-214.4 480-480S777.6 32 512 32z m272 371.2l-249.6 249.6c-12.8 12.8-32 12.8-44.8 0l-249.6-249.6c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l227.2 227.2 227.2-227.2c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8z'
]
},
pageIconColor: '#509bfd', // 可以点击的翻页按钮颜色
pageIconInactiveColor: '#a8cdfe', // 禁用的按钮颜色
formatter: function(name) {
const list = data.data
var arr = []
var index = 0
for (var i = 0; i < list.length; i++) {
if (list[i].name === name) {
index = i
}
}
arr.push(
`{name|${name} ${list[index].rate}}`,
'{value|' + list[index].value + '}'
)
return arr.join('')
},
textStyle: {
color: '#333333',
rich: {
name: {
align: 'left',
fontSize: 12,
width: 160
},
value: {
align: 'right',
fontSize: 12,
fontWeight: 500
}
}
}
},
graphic:
data.data.length === 0
? [
{
type: 'text',
left: 'center',
top: 'middle',
style: {
fill: '#999999',
fontSize: '14',
text: '无数据',
textAlign: 'center'
}
}
]
: [
{
type: 'group',
left: '30%',
top: '44%',
bounding: 'raw',
children: [
{
type: 'text',
style: {
text: '总数',
textAlign: 'center',
fill: '#666666',
fontSize: 12,
fontWeight: 400
}
}
]
},
{
type: 'group',
left: '30%',
top: '50%',
bounding: 'raw',
children: [
{
type: 'text',
style: {
text: data.total,
textAlign: 'center',
fill: '#333',
fontSize: 20,
fontWeight: 500
}
}
]
}
],
// 饼图中各模块的颜色
color: data.color,
series: {
type: 'pie',
radius: ['60%', '80%'],
center: data.data.length === 0 ? 'center' : ['30%', '50%'], // 整个饼图在整个父元素中的位置
// data:'' //饼图数据
data: data.data,
itemStyle: {
normal: {
label: {
show: false
}
}
}
}
}
}