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

效果：

效果图

html

 <div class="pie-chart">
    <HomeCharts :options="optionPie" :is-change="isChange" />
  </div>

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}<br/>数量：${params.value}<br/>占比：${percent}%`;
    }
    return '';
  },

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

组件

<template>
  <div
    ref="chartRef"
    className="myChart"
  />
</template>
<script>
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  defineComponent,
  markRaw,
} from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'HomeCharts',
  props: {
    options: {
      type: Object,
      default: () => ({}),
    },
    isChange: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const chartRef = ref();
    const myChart = ref();

    const onResize = () => {
      myChart.value.resize();
    };
    const initChart = () => {
      myChart.value = markRaw(echarts.init(chartRef.value));
      // 绘制图表
      myChart.value.setOption(props.options);
      window.addEventListener('resize', onResize);
    };
    watch(() => props.options, (newVal) => {
      myChart.value.setOption(newVal);
      // initChart();
    });
    watch(() => props.isChange, (newVal) => {
      // myChart.value.setOption(newVal);
      initChart();
    });
    onMounted(() => {
      initChart();
    });
    onBeforeUnmount(() => {
      window.removeEventListener('resize', onResize);
    });

    return {
      chartRef,
      myChart,
      onResize,
      initChart,
    };
  },
});
</script>

<style lang="scss" scoped>
.myChart {
  width: 100%;
  height: 100%;
}
</style>