个人喜欢的饼图样式-自留

效果：

效果图

html

js

/*
* 饼图
* */
const scaleData = ref([
  {
    name: '多依树片区',
    value: 28,
  },
  {
    name: '老虎嘴片区',
    value: 25,
  },
  {
    name: '坝达片区',
    value: 29,
  },

]);
const rich = {
  white: {
    borderColor: 'RGBA(31, 95, 255, 0.7)',
    width: fontSize(4),
    height: fontSize(4),
    borderWidth: fontSize(4),
    borderRadius: fontSize(5),
    backgroundColor: '#FFFFFF',
  },
  d: {
    fontSize: fontSize(20),
    color: '#FDBF46',
    align: 'center',
    padding: fontSize(4),
  },
  c: {

    fontSize: fontSize(16),
    color: '#fff',
    align: 'left',
    padding: fontSize(0),
  },
};
const placeHolderStyle = {
  // normal: {
  label: {
    show: false,
  },
  labelLine: {
    show: false,
  },
  color: 'rgba(0, 0, 0, 0)',
  borderColor: 'rgba(0, 0, 0, 0)',
  borderWidth: 0,
  // },
};
const dataPie = [];
const color = ['#FFE18FAF', '#34ECFFAA', '#00FF9CAA'];
for (let i = 0; i < scaleData.value.length; i += 1) {
  dataPie.push({
    value: scaleData.value[i].value,
    name: scaleData.value[i].name,
    itemStyle: {
      fontSize: fontSize(20),
      borderWidth: 2,
      shadowBlur: 100,
      borderColor: color[i],
      shadowColor: color[i],
    },
  }, {
    value: 2,
    name: '',
    itemStyle: placeHolderStyle,
  });
}
const seriesObj = ref([
  {
    color: 'rgba(52,236,255,0.2)',
    name: '总数',
    type: 'pie',
    clockWise: false,
    emphasis: {
      scale: false,
    },
    // selectedMode: 'single',
    radius: [0, '35%'],
    label: {
      fontSize: fontSize(38),
      position: 'center',
      color: '#FFFFFF',
      formatter: '{c} ',
    },
    data: [
      { value: 82, name: '总数量' },
    ],
    itemStyle: {
      borderColor: '#34ECFF',
      borderWidth: 2,
      shadowColor: 'rgba(255, 255, 255, 0.5)',
      shadowBlur: 6,
    },
  },
  {
    name: '',
    type: 'pie',
    clockWise: false,
    radius: ['43%', '55%'],
    emphasis: {
      scale: false,
    },
    label: {
      show: true,
      position: 'outside',
      color: '#ddd',
      fontSize: fontSize(38),
      formatter(params) {
        let percent = 0;
        let total = 0;
        for (let i = 0; i < scaleData.value.length; i += 1) {
          total += scaleData.value[i].value;
        }
        percent = ((params.value / total) * 100).toFixed(2);
        if (params.name !== '') {
          return `{d|${params.value}}\n{white|}\n{c|${params.name}}`;
        }
        return '';
      },
      rich,
    },
    labelLine: {
      length: 10,
      length2: 10,
      show: true,
      color: '#00ffff',
    },
    itemStyle: {
    },
    data: dataPie,
  }]);
const tooltipObj = {
  trigger: 'item',
  formatter(params) {
    let percent = 0;
    let total = 0;
    for (let i = 0; i < scaleData.value.length; i += 1) {
      total += scaleData.value[i].value;
    }
    percent = ((params.value / total) * 100).toFixed(2);
    if (params.name !== '') {
      return `${params.name}
数量：${params.value}
占比：${percent}%`;
    }
    return '';
  },

  backgroundColor: '#FFFFFF',
};
const optionPie = ref({
  color: ['#FFE18F99', '#34ECFF99', '#00FF9C99'],
  tooltip: tooltipObj,
  legend: {
    show: false,
  },
  toolbox: {
    show: false,
  },
  series: seriesObj.value,
});

组件