Echarts 环形图

 代码块  

   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 官网链接