echarts⽩⾊实⼼环形图（空⼼饼图）的编写// 数据接⼊机构统计
let myDom = ElementById('myChart');
let myWidth = myDom.offsetWidth - 5;            // 获取容器宽度
let myHeight = myDom.offsetHeight - 5;          // 获取容器⾼度
let myRadius = myHeight * 0.44 / 2;            // 根据环形图内圈百分⽐获取内圆半径
let myPX = (0.3 - (myRadius / myWidth)) * 100 + '%';        // 获取⽩⾊填充圆在容器中的x轴位置百分⽐，以便与环形图贴合
let myChart = echarts.ElementById('myChart'));
let option = {
title: {                        // 标题样式
text: '数据接⼊机构统计',
textStyle: {
color: '#cccccc',
fontSize: 14
}
},
tooltip: {                      // 悬浮提⽰
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
textstyle},
legend: {
orient: 'vertical',
top: '20%',
right: 20,                // 与容器距离调节
icon: 'circle',          // 样式调节  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'等
itemWidth: 7,
textStyle: {
color: '#ffffff',
fontSize: 10,
padding: [0, 0, 0, 5]    //字与图形间的边距
},
data:['111','222','333']
},
graphic: {
elements: [
{
type: 'group',
left: myPX,        // 横坐标位置
top: '33%',        // 纵坐标位置      55% - （44% / 2）
children: [
{
type: 'circle',
shape: {
r: myRadius      // ⽩⾊圆半径
},
style: {
fill: '#fff'      // 背景颜⾊
}
},
{
type: 'text',          // 覆盖在圆上的⽂字位置和样式
style: {
text: 12345,
y: -10,
textAlign: 'center',
fontSize: 12,
fill: '#494949'
}
},
{
type: 'text',
style: {
text: '条',
y: 10,
textAlign: 'center',
fontSize: 13,
fill: '#494949'
}
}
]
}
]
},
series: [
{
name:'机构统计',
type:'pie',
radius: ['44%', '70%'],        // 环形图⼤⼩和粗细
avoidLabelOverlap: false,
center: ['30%', '55%'],        // 环形图位置
label: {
normal: {
show: false,            // 设置不显⽰
position: 'center'      // hover时提⽰在圆环内                }
},
data:[
{value:335, name:'111'},
{value:310, name:'222'},
{value:234, name:'333'}
]
}
]
};
myChart.setOption(option);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。