npm install echarts --save
# 或 yarn add echarts

<template>
  <!-- 圖表容器，寬高由父組件傳入 -->
  <div 
    ref="chartRef" 
    class="pie-chart-container"
    :style="{ width: width + 'px', height: height + 'px' }"
  ></div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

// 定義接收的 props
const props = defineProps({
  // 餅圖標(biāo)題
  title: {
    type: String,
    default: '餅圖示例'
  },
  // 圖表寬度（px）
  width: {
    type: Number,
    default: 400
  },
  // 圖表高度（px）
  height: {
    type: Number,
    default: 300
  },
  // 餅圖數(shù)據(jù)（格式：[{ name: '分類1', value: 100 }, ...]）
  chartData: {
    type: Array,
    required: true,
    validator: (val) => {
      // 簡(jiǎn)單校驗(yàn)數(shù)據(jù)格式
      return val.every(item => item.hasOwnProperty('name') && item.hasOwnProperty('value'))
    }
  }
})

// 圖表實(shí)例引用
const chartRef = ref(null)
// ECharts 實(shí)例
let chartInstance = null

// 初始化圖表
const initChart = () => {
  // 確保容器存在
  if (!chartRef.value) return
  
  // 初始化 ECharts 實(shí)例
  chartInstance = echarts.init(chartRef.value)
  
  // 設(shè)置圖表配置項(xiàng)
  const option = {
    title: {
      text: props.title,
      left: 'center' // 標(biāo)題居中
    },
    tooltip: {
      trigger: 'item', // 鼠標(biāo)懸浮提示
      formatter: '{a} 
: {c} (wppm3vysvbp%)' // 提示格式：名稱：數(shù)值（百分比）
    },
    legend: {
      orient: 'vertical', // 圖例垂直排列
      left: 'left' // 圖例居左
    },
    series: [
      {
        name: props.title,
        type: 'pie',
        radius: ['40%', '70%'], // 餅圖內(nèi)外半徑
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: props.chartData // 餅圖數(shù)據(jù)
      }
    ]
  }
  
  // 渲染圖表
  chartInstance.setOption(option)
}

// 更新圖表（數(shù)據(jù)變化時(shí)調(diào)用）
const updateChart = () => {
  if (!chartInstance) return
  
  // 僅更新數(shù)據(jù)相關(guān)配置，避免重復(fù)初始化
  chartInstance.setOption({
    title: { text: props.title },
    series: [{ data: props.chartData }]
  })
}

// 監(jiān)聽(tīng)窗口 resize，自適應(yīng)調(diào)整圖表尺寸
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 生命周期：掛載時(shí)初始化圖表 + 監(jiān)聽(tīng) resize
onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

// 生命周期：卸載時(shí)銷毀實(shí)例 + 移除監(jiān)聽(tīng)
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose() // 銷毀 ECharts 實(shí)例，釋放內(nèi)存
    chartInstance = null
  }
  window.removeEventListener('resize', handleResize)
})

// 監(jiān)聽(tīng) props 變化，更新圖表
watch(
  // 監(jiān)聽(tīng)標(biāo)題、寬高、數(shù)據(jù)的變化
  [() => props.title, () => props.width, () => props.height, () => props.chartData],
  () => {
    // 寬高變化時(shí)先銷毀再重新初始化，數(shù)據(jù)/標(biāo)題變化時(shí)僅更新配置
    if (props.width || props.height) {
      chartInstance?.dispose()
      initChart()
    } else {
      updateChart()
    }
  },
  {
    deep: true // 深度監(jiān)聽(tīng)數(shù)組/對(duì)象變化
  }
)
</script>

<style scoped>
.pie-chart-container {
  /* 防止容器內(nèi)邊距影響尺寸 */
  box-sizing: border-box;
  /* 解決圖表容器閃爍問(wèn)題 */
  transition: all 0.3s ease;
}
</style>

<template>
  <div class="parent-page">
    <h2>餅圖組件使用示例</h2>
    
    <!-- 操作區(qū)：修改數(shù)據(jù)/尺寸 -->
    <div class="control-panel">
      <button @click="changeChartData">切換餅圖數(shù)據(jù)</button>
      <button @click="changeChartSize">修改圖表尺寸</button>
      <button @click="changeChartTitle">修改圖表標(biāo)題</button>
    </div>
    
    <!-- 引入餅圖子組件，傳入配置 -->
    <PieChart 
      :title="chartTitle"
      :width="chartWidth"
      :height="chartHeight"
      :chart-data="chartData"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 導(dǎo)入餅圖子組件
import PieChart from './PieChart.vue'

// 定義餅圖配置數(shù)據(jù)（響應(yīng)式）
const chartTitle = ref('各部門人數(shù)分布')
const chartWidth = ref(500)
const chartHeight = ref(400)

// 初始餅圖數(shù)據(jù)
const chartData = ref([
  { name: '技術(shù)部', value: 30 },
  { name: '產(chǎn)品部', value: 15 },
  { name: '市場(chǎng)部', value: 20 },
  { name: '財(cái)務(wù)部', value: 8 },
  { name: '人事部', value: 7 }
])

// 模擬：切換餅圖數(shù)據(jù)
const changeChartData = () => {
  chartData.value = [
    { name: '技術(shù)部', value: 40 },
    { name: '產(chǎn)品部', value: 10 },
    { name: '市場(chǎng)部', value: 25 },
    { name: '財(cái)務(wù)部', value: 5 },
    { name: '人事部', value: 10 },
    { name: '運(yùn)營(yíng)部', value: 10 } // 新增分類
  ]
}

// 模擬：修改圖表尺寸
const changeChartSize = () => {
  chartWidth.value = 600
  chartHeight.value = 450
}

// 模擬：修改圖表標(biāo)題
const changeChartTitle = () => {
  chartTitle.value = '各部門人數(shù)分布（更新后）'
}
</script>

<style scoped>
.parent-page {
  padding: 20px;
}

.control-panel {
  margin-bottom: 20px;
}

.control-panel button {
  margin-right: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #409eff;
  color: #fff;
  cursor: pointer;
}

.control-panel button:hover {
  background: #66b1ff;
}
</style>