echarts饼图定制一

概览 

 如上图所示，最终效果如图所示。

代码

var datas = [
  { value: 1548, name: '≤1周' },
  { value: 775, name: '1~2周' },
  { value: 689, name: '2~3周' },
  { value: 679, name: '≥4周' }
];  //饼图数据内容

option = {
  backgroundColor: '',
  title: {//自定义标题
    text: '30/100',
    subtext: '提前交货', // 副标题
    itemGap: 5, // 主副标题间距
    x: 'center',
    y: 'center',
    // top: '280',
   
    textStyle: {   // 主标题样式
      fontSize: '12',
      color: 'black'
    },
    subtextStyle: {   // 副标题样式
      fontSize: '13',
      fontWeight: '800',
      color: 'black'
    }
  },
  tooltip: {//鼠标悬浮后效果
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: { // 右侧图例
    data: ['≤1周', '1~2周', '2~3周', '≥4周'],//图例内容
    orient: 'vertical', //垂直展示
    left: '70%', //距离左侧位置
    top: '40%',  //距离顶部位置
    align: 'left', //对齐方式
    textStyle: { //字体样式
      color: '#54bef9'
    },
    formatter: function (name) {//格式化图例展示的内容
      var total = 0;
      var tarValue;
      for (var i = 0; i < datas.length; i++) {
        total += datas[i].value;
        if (name === datas[i].name) {
          tarValue = datas[i].value;
        }
      }
      total = total == 0 ? 1 : total;
      var p = Math.round((tarValue / total) * 100);
      return name + '     ' + tarValue + ',' + p + '%';
    }
  },
  series: [
    {//内圈内容
      name: '生产提前完成分析',
      type: 'pie',
      selectedMode: 'single',
      radius: ['20%', '45%'], //这个是控制饼的展示面
      label: {
        position: 'inner',
        fontSize: 12
      },
      
      emphasis: {//鼠标悬浮到对应饼块的效果
        label: {
          show: true,
          fontSize: '12',
          fontWeight: 'bold'
        }
      },
      itemStyle: {//自定义饼块的颜色，可以定义很多，会按照循序取
        normal: {
          color: function (colors) {
            var colorList = [
              '#fc8200',
              '#5470c6',
              '#91cd77',
              '#ef6567',
              '#f9c956',
              '#75bedc'
            ];
            return colorList[colors.dataIndex];
          }
        }
      },
      data: datas//内圈数据
    },
    {
      name: '生产提前完成分析',
      type: 'pie',
      radius: ['56%', '60%'],
      label: {
        show: false
      },
      itemStyle: {
        normal: {
          color: function (colors) {
            var colorList = [
              '#fc8200',
              '#5470c6',
              '#91cd77',
              '#ef6567',
              '#f9c956',
              '#75bedc'
            ];
            return colorList[colors.dataIndex];
          }
        }
      },
      data: [
        { value: 30, name: '提前交货数' },
        { value: 100, name: '生产总数' }
      ]
    }
  ]
};