option = {
title: { // 圆环中央文字
show: true, // 是否显示
text: ''+ 1000,
subtext: '总分',
textStyle: {
fontSize: 20,
fontWeight: 700,
lineHeight: 12,
color: '#303030'
},
subtextStyle: {
fontSize: 16,
fontWeight: 600,
lineHeight: 20,
color: '#9b9b9b'
},
textAlign: 'center',
left: '49.6%',
top: '41%'
},
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
console.log(params, "bar")
let dom = `<div style="height: 80px;width: 300px">
<div class="color-3 color-8 py-1">第一张 资源与管理</div>
<div class="color-3 f-between-center py-1">
<span>得分</span>
<span>X</span>
</div>
<div class="color-3 f-between-center py-1">
<span>占比</span>
<span>X%</span>
</div>
</div>`
return dom
}
},
legend: {
left: 'center',
bottom: 0,
},
color: ['#5370c5', '#04bf8d', '#fac858', '#e2e2e2'],
series: [
{
name: '访问来源',
type: 'pie',
radius: [80, 100],
avoidLabelOverlap: true,
center: ['50%', '45%'],
data: [// 空集合会展示暗色圆环
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
label: {
formatter: function(params){
return params.value + " ("+params.percent.toFixed(0)+"%)";
},
rich: {
value: {
fontSize: 13,
fontWeight: 'bold'
}
}
},
animationEasing: 'cubicInOut',
animationDuration: 2000
}
]
};