第17章：ECharts 饼图自定义样式（扇区颜色、轮廓、标签配置 + 空状态兼容）

业务场景：若依后台常用占比统计饼图 / 环形饼图。本节自定义每个扇区颜色、边框轮廓、标签文字位置、字体大小，同时保留之前封装好的点击事件、防抖 resize，兼容空数据场景。echartHelper.js 无需改动。

页面完整 Vue 代码

复制代码

<template>
  <div class="chart-container">
    <el-alert title="饼图自定义样式：扇区颜色、轮廓、标签，点击扇区弹窗" type="info" style="margin-bottom:10px"/>
    <div
      ref="chartRef"
      style="width:100%;height:400px;border:1px solid #eee"
    ></div>

    <el-dialog v-model="dialogVisible" title="饼图点击详情">
      <p>分类名称：{{ clickData.name }}</p>
      <p>占比数值：{{ clickData.value }}</p>
      <p>百分比：{{ clickData.percent }}%</p>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useEcharts } from '@/composables/echartHelper'
const { chartRef, setChartOption, onChartEvent } = useEcharts()

const dialogVisible = ref(false)
const clickData = ref({ name:'', value:0, percent:0 })

const option = {
  title: {
    text: '产品销售占比饼图',
    left: 'center',
    textStyle: {
      fontSize:18,
      color:'#303133'
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'center',
    textStyle: {
      fontSize:14
    }
  },
  series: [
    {
      name: '销售额',
      type: 'pie',
      radius: '60%', // 饼图大小
      center: ['60%', '50%'],
      data: [
        { name: '产品A', value: 1048, itemStyle:{ color:'#409EFF' } },
        { name: '产品B', value: 735, itemStyle:{ color:'#67C23A' } },
        { name: '产品C', value: 580, itemStyle:{ color:'#E6A23C' } },
        { name: '产品D', value: 484, itemStyle:{ color:'#F56C6C' } },
        { name: '产品E', value: 300, itemStyle:{ color:'#909399' } }
      ],
      itemStyle: {
        borderColor: '#fff', // 扇区分割白色轮廓
        borderWidth: 2 // 轮廓宽度
      },
      label: {
        show: true,
        fontSize:13,
        formatter: '{b}: {d}%' // 标签显示名称+百分比
      }
    }
  ]
}

setChartOption(option)

// 饼图点击事件
onChartEvent('click', (params)=>{
  console.log('饼图点击参数', params)
  clickData.value = {
    name: params.name,
    value: params.value,
    percent: params.percent
  }
  dialogVisible.value = true
})
</script>

✅ 测试步骤

保存 vue 文件，刷新页面
饼图正常渲染，每个扇区独立自定义颜色，扇区之间有白色分割轮廓
扇区外部标签展示名称 + 百分比；鼠标悬浮 tooltip 正常
点击任意扇区，弹窗展示名称、数值、百分比
缩放浏览器窗口，防抖 resize 自适应生效
切换路由，图表实例正常销毁，无内存泄漏

拓展小知识点：

把 radius: '60%' 修改为 radius: ['40%','70%']，就会变成环形空心饼图 ，直接可以试。