ECharts饼图自定义标签颜色与中心数据显示实现

label: {
  formatter: '{name|{b}}\n{time|{c} 小时}',
  rich: {
    time: {
      fontSize: 10,
      color: '#999'
    }
  }
}

label: {
  formatter: params => {
    // console.log(params)
    return `{name|${params.name}}\n{time|${params.value} 小时}`
  },
  rich: {
    time: {
      fontSize: 10,
      color: '#999'
    }
  }
}

let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) => {
  richColor[`color${idx}`] = { 
    fontSize: 28,
    color: item
  }
})

option = {
  color: pieColors,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['36%', '56%'],
      avoidLabelOverlap: false,
      label: {
        formatter: params => {
          // console.log(params)
          return `{color${params.dataIndex}|${params.name}(${params.value})}`
        },
        rich: richColor
      },
      labelLine: {
        lineStyle: {
          width: 3
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) => {
  richColor[`color${idx}`] = { 
    fontSize: 28,
    color: item
  }
})

let chartData = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]

option = {
  color: pieColors,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['36%', '56%'],
      avoidLabelOverlap: false,
      label: {
        formatter: params => {
          // console.log(params)
          return `{color${params.dataIndex}|${params.name}(${params.value})}`
        },
        rich: richColor
      },
      labelLine: {
        lineStyle: {
          width: 3
        }
      },
      data: chartData
    },
    {
      name: '数据总数',
      type: 'pie',
      radius: ['0%', '0%'],
      itemStyle: { // 防止鼠标悬浮到标签时出现放大的点
        color: 'transparent'
      },
      label: {
        position: 'inside',
        formatter: `{data|{c}}\n{serie|{a}}`,
        rich: {
          data: {
            fontWeight: 'bold',
            fontSize: 64,
            color: `#202020`,
            lineHeight: 68,
            textBorderColor: `transparent`,
            textBorderWidth: 0
          },
          serie: {
            fontSize: 24,
            color: `#acbac6`,
            lineHeight: 28,
            textBorderColor: `transparent`,
            textBorderWidth: 0
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [ // 计算表格数据value总和
        chartData.reduce((prev, cur) => prev + cur.value, 0)
      ]
    }
  ]
};

//首先建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历
  var chartPie = echarts.init(document.getElementById("charPie"));
  var option = {
    backgroundColor: "#ffffff",//背景色
    legend: {//图例配置
      selectedMode: false,//取消图例上的点击事件
      show: true,//是否显示图例
      orient: 'vertical',
      x: '55%',
      y: '0px',
      right: '0px',
      top: 'center',
      data: pieData,//饼图数据
      icon: "circle",
      itemHeight: 9,//图例圆点的高度
      formatter: function (name) {
        console.log(name, "打印一下name")
        // let arr = ["{a|" + n + "}", "{b|" + target + "%}"]
        //return arr.join("")
      },
      textStyle: {
        rich: {
          a: {
            fontSize: 12,
            color: "#333",
            padding: 1//图例上下的间距
          }
        }
      }
    },
    series: [{
      name: '圆环图系列名称',         // 系列名称
      type: 'pie',                    // 系列类型 
      center: ['20%', '50%'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
      radius: [34, 58],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
      hoverAnimation: false,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
      label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
        normal: {
          show: false             // 是否显示标签[ default: false ]
        }
      },
      color: ['#16B6F3', '#DB3764', '#B482CE', '#F9C03D', "#44A22E", "#F39716", "#E54EB5", "#82E2D2", "#3DD5F9", "#A39D0E"], // 圆环图各环节的颜色（顺时针）
      data: pieData                      // 系列中的数据内容数组。
    }]
  };
   // 使用刚指定的配置项和数据显示图表
  chartPie.setOption(option)
  window.addEventListener("resize", function () {
    chartPie.resize()//图表自适应大小
  })