使用一个Echart显示多个圆环图，中间显示统计总数

option = {
  legend: {
    textStyle: {
      color: '#fff',
    }
  },
  title: [{
    text: '系统1',
    textStyle: {
      color: '#fff',
      // fontWeight: 'bold',
      fontSize: 14
    },
    subtext: '总金额(万):157',
    subtextStyle: {
      color: 'red',
      fontSize: 12,
      // fontWeight: 'bold'
    },
    textAlign: 'center',
    left: '16%',
    top: '57%'
  },{
    text: '系统2',
    textStyle: {
      color: '#333',
      // fontWeight: 'bold',
      fontSize: 14
    },
    subtext: '总金额(万):157',
    subtextStyle: {
      color: 'red',
      fontSize: 12,
      // fontWeight: 'bold'
    },
    textAlign: 'center',
    left: '50%',
    top: '57%'
  },{
    text: '系统3',
    textStyle: {
      color: '#333',
      // fontWeight: 'bold',
      fontSize: 14
    },
    subtext: '总金额(万):157',
    subtextStyle: {
      color: 'red',
      fontSize: 12,
      // fontWeight: 'bold'
    },
    textAlign: 'center',
    left: '83%',
    top: '57%'
  }],
  series: [
    {
      type: 'pie',
      center: ['16%', '60%'],
      avoidLabelOverlap: true,
      data: [
        {
          value: 4.9,
          name: '工具'
        },
        {
          value: 21.7,
          name: '耗材'
        },
        {
          value: 118.9,
          name: '配件'
        },
        {
          value: 3.4,
          name: '化学品'
        },
        {
          value: 1.1,
          name: '杂项'
        },
        {
          value: 6.2,
          name: '治具'
        },
        {
          value: 0.8,
          name: '其它'
        }
      ],
      radius: ['30%', '40%'],
      label: {
        show: true,
        formatter: function(val) {
          //让series 中的文字进行换行
          // return val.name + "\n(" + val.percent + "%)";
          // return val.percent + "%";
          return val.value + "万" + "\n(" + val.percent + "%)";
        }
      }
    },
    {
      type: 'pie',
      center: ['50%', '60%'],
      avoidLabelOverlap: true,
      data: [],  // 系统没有相关数据
      radius: ['30%', '40%'],
      label: {
        show: true,
        formatter: function(val) {
          //让series 中的文字进行换行
          // return val.name + "\n(" + val.percent + "%)";
          return val.value + "万" + "\n(" + val.percent + "%)";
        }
      },
      
    },
    {
      type: 'pie',
      center: ['83%', '60%'],
      avoidLabelOverlap: true,
      data: [
        {
          value: 4.9,
          name: '工具'
        },
        {
          value: 21.7,
          name: '耗材'
        },
        {
          value: 118.9,
          name: '配件'
        },
        {
          value: 3.4,
          name: '化学品'
        },
        {
          value: 1.1,
          name: '杂项'
        },
        {
          value: 6.2,
          name: '治具'
        },
        {
          value: 0.8,
          name: '其它'
        }
      ],
      radius: ['30%', '40%'],
      label: {
        show: true,
        formatter: function(val) {
          //让series 中的文字进行换行
          // return val.name + "\n(" + val.percent + "%)";
          // return val.percent + "%";
          return val.value + "万" + "\n(" + val.percent + "%)";
        }
      }
    }
  ],
  tooltip: {
    trigger: "item",
    formatter: "{b}: {c} ({d}%)"
  },
};

如果一行内要显示的圆环图个数不确定，可以参考下面的位置，一行画1~5个，根据圆环个数确定位置

function getPiePosition(pieCnt, withSubtitle) { // withSubtitle = true，需要返回top小一些
    let positionObj = {
        left: ['50%'],
        top: withSubtitle ? '52%' : '60%',
    }
    switch(pieCnt) {
        case 1:
            break;
        case 2:
            positionObj.left =  ['25%', '75%'];
            break;
        case 3: 
            positionObj.left = ['16%', '50%', '83%'];
            break;
        case 4: 
            positionObj.left = ['13%', '37%', '63%', '84%'];
            break;
        case 5:
            positionObj.left = ['12%', '32%', '50%', '68%', '88%'];
            break;
        default:
            break;
    }
    return positionObj;
}

示例：

pie-borderRadius.png