vue3+vite+JS使用Echarts封装一个饼图完整代码(父子组件联动)

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({
  // 饼图标题
  title: {
    type: String,
    default: '饼图示例'
  },
  // 图表宽度（px）
  width: {
    type: Number,
    default: 400
  },
  // 图表高度（px）
  height: {
    type: Number,
    default: 300
  },
  // 饼图数据（格式：[{ name: '分类1', value: 100 }, ...]）
  chartData: {
    type: Array,
    required: true,
    validator: (val) => {
      // 简单校验数据格式
      return val.every(item => item.hasOwnProperty('name') && item.hasOwnProperty('value'))
    }
  }
})

// 图表实例引用
const chartRef = ref(null)
// ECharts 实例
let chartInstance = null

// 初始化图表
const initChart = () => {
  // 确保容器存在
  if (!chartRef.value) return
  
  // 初始化 ECharts 实例
  chartInstance = echarts.init(chartRef.value)
  
  // 设置图表配置项
  const option = {
    title: {
      text: props.title,
      left: 'center' // 标题居中
    },
    tooltip: {
      trigger: 'item', // 鼠标悬浮提示
      formatter: '{a} 
{b}: {c} ({d}%)' // 提示格式：名称：数值（百分比）
    },
    legend: {
      orient: 'vertical', // 图例垂直排列
      left: 'left' // 图例居左
    },
    series: [
      {
        name: props.title,
        type: 'pie',
        radius: ['40%', '70%'], // 饼图内外半径
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: props.chartData // 饼图数据
      }
    ]
  }
  
  // 渲染图表
  chartInstance.setOption(option)
}

// 更新图表（数据变化时调用）
const updateChart = () => {
  if (!chartInstance) return
  
  // 仅更新数据相关配置，避免重复初始化
  chartInstance.setOption({
    title: { text: props.title },
    series: [{ data: props.chartData }]
  })
}

// 监听窗口 resize，自适应调整图表尺寸
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 生命周期：挂载时初始化图表 + 监听 resize
onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

// 生命周期：卸载时销毁实例 + 移除监听
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose() // 销毁 ECharts 实例，释放内存
    chartInstance = null
  }
  window.removeEventListener('resize', handleResize)
})

// 监听 props 变化，更新图表
watch(
  // 监听标题、宽高、数据的变化
  [() => props.title, () => props.width, () => props.height, () => props.chartData],
  () => {
    // 宽高变化时先销毁再重新初始化，数据/标题变化时仅更新配置
    if (props.width || props.height) {
      chartInstance?.dispose()
      initChart()
    } else {
      updateChart()
    }
  },
  {
    deep: true // 深度监听数组/对象变化
  }
)
</script>

<style scoped>
.pie-chart-container {
  /* 防止容器内边距影响尺寸 */
  box-sizing: border-box;
  /* 解决图表容器闪烁问题 */
  transition: all 0.3s ease;
}
</style>

<template>
  <div class="parent-page">
    <h2>饼图组件使用示例</h2>
    
    <!-- 操作区：修改数据/尺寸 -->
    <div class="control-panel">
      <button @click="changeChartData">切换饼图数据</button>
      <button @click="changeChartSize">修改图表尺寸</button>
      <button @click="changeChartTitle">修改图表标题</button>
    </div>
    
    <!-- 引入饼图子组件，传入配置 -->
    <PieChart 
      :title="chartTitle"
      :width="chartWidth"
      :height="chartHeight"
      :chart-data="chartData"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 导入饼图子组件
import PieChart from './PieChart.vue'

// 定义饼图配置数据（响应式）
const chartTitle = ref('各部门人数分布')
const chartWidth = ref(500)
const chartHeight = ref(400)

// 初始饼图数据
const chartData = ref([
  { name: '技术部', value: 30 },
  { name: '产品部', value: 15 },
  { name: '市场部', value: 20 },
  { name: '财务部', value: 8 },
  { name: '人事部', value: 7 }
])

// 模拟：切换饼图数据
const changeChartData = () => {
  chartData.value = [
    { name: '技术部', value: 40 },
    { name: '产品部', value: 10 },
    { name: '市场部', value: 25 },
    { name: '财务部', value: 5 },
    { name: '人事部', value: 10 },
    { name: '运营部', value: 10 } // 新增分类
  ]
}

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

// 模拟：修改图表标题
const changeChartTitle = () => {
  chartTitle.value = '各部门人数分布（更新后）'
}
</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>