option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: [
'Direct',
'Marketing',
'Search Engine',
'Email',
'Union Ads',
'Video Ads',
'Baidu',
'Google',
'Bing',
'Others'
]
},
title: {
text: '265849',
top: '45%',
textAlign: 'center',
left: '29%',
textStyle: {
color: '#fff',
fontSize: 28,
fontWeight: '400'
},
subtext: '销售额',
subtextStyle: {
color: '#fff',
fontSize: 30,
fontWeight: '400'
}
},
series: [
{
name: 'Access From',
type: 'pie',
center: ['30%', '50%'],
// radius: ['60%', '70%'],
radius: ['45%', '60%'],
labelLine: {
length: 30
},
label: {
normal: {
show: true,
position: 'inside', //标签的位置
formatter: "{d}%",
textStyle: {
color: '#fff'
}
},
emphasis: {
show: true,
textStyle: {
fontWeight: 'bold'
}
}
},
data: [
{ value: 1048, name: 'Baidu' },
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 251, name: 'Google' },
{ value: 234, name: 'Union Ads' },
{ value: 147, name: 'Bing' },
{ value: 135, name: 'Video Ads' },
{ value: 102, name: 'Others' }
]
},
{
// title背景层
name: '背景圆环',
z: 5,
backgroundColor: '#8C8D8E',
type: 'pie',
// left:'30%',
cursor: 'default',
center: ['30%', '50%'],
radius: '35%',
hoverAnimation: false,
legendHoverLink: false,
silent: true, //不响应和触发鼠标事件
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 0,
itemStyle: {
normal: {
color: '#4C505840'
}
}
}
]
}
]
};
echarts 实现圆环图效果配置
该文章展示了2022年某个季度的销售数据,通过饼图形式展示了不同营销渠道(如Baidu、Direct、Email等)对总销售额的贡献比例,有助于了解公司流量来源分布情况。
摘要由CSDN通过智能技术生成