代码块
var data = [
{
name: "类别A",
value: 456
},
{
name: "类别B",
value: 231
},
{
name: "类别C",
value: 71
}
];
let a = function (){
let subText = 0
data.forEach(item=>{
subText+=item.value
})
return subText
}()
option = {
//环形图中间文字
title: {
text: a ,
subtext:'信息文字标题',
textStyle: {
fontSize: 52,
color: 'red',
fontWeight: 800,
},
subtextStyle: {
fontSize: 20,
color: 'rgba(0,0,0,0.65)',
fontWeight: 500
},
textAlign: 'center', //图例文字居中显示
x: '38%', //距离左边的距离
y: '40%' //距离上边的距离
},
//数据的颜色设置
color: ['#2BCB95', '#F6BD16', '#FF3B30', '#F2F', '#A9F', '#G2F'],
//鼠标移入显示的文字
tooltip: {
trigger: 'item',
formatter: '{b}<br/> {c}人 ({d}%)'
},
//图例设置
legend: {
orient: 'vertical', //竖直展示,如果横着的话,这个可以直接去掉
right: '10%',
top: 'center',
align: 'left',
itemGap: 10, //数据上下的距离
icon: 'circle', //圆形小点展示,默认为方形,去掉就是方形展示
itemWidth: 10, // 设置宽度
data:data,
},
series: [
{
radius: ['50%', '80%'], //第一个是中间圆的大小,第二个是外边圆的大小
center: ['40%', '50%'], //左边的距离,上边的距离
type: 'pie',
label: {
normal: {
// formatter: "{d}" + "%", //直接百分比,没有去掉小数位,上边是去掉小数位的
formatter: "{b}:{c}人", //正常兼职:456 加个人方便识别添加文字
position: 'inner', //文字显示在内部,如果在外边把这个去掉就好
color: '#fff' ,//文字的颜色
}
},
data: data,
}
]
};
以上代码可在echarts官网复制粘贴查看效果
https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut 官网链接