第 2 章：封装 ECharts 通用 Composable（echartHelper.js）

第 2 章：封装 ECharts 通用 Composable（echartHelper.js）

本章目标：把图表初始化、resize 自适应、实例销毁、更新 option 方法 全部抽离封装，后续页面直接复用，不用重复写 onMounted/onUnmounted。

文件路径：src/composables/echartHelper.js（遵循你偏好的 xxxHelper 命名规范）

// src/composables/echartHelper.js
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

export function useEcharts() {
  // 图表DOM容器ref
  const chartRef = ref(null)
  // 图表实例对象
  let chartInstance = null

  // ✅ 更新图表配置/数据的方法（重点，补上之前缺失的更新能力）
  const setChartOption = (option) => {
    // 实例存在才执行更新，防止页面没渲染完成报错
    if (!chartInstance) return
    chartInstance.setOption(option)
  }

  // 窗口自适应处理函数
  const handleResize = () => {
    chartInstance && chartInstance.resize()
  }

  onMounted(() => {
    // DOM挂载完成，初始化echarts实例
    chartInstance = echarts.init(chartRef.value)
    // 监听窗口缩放
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    // 页面销毁：释放实例，移除监听（若依多标签页必备，防止内存泄漏）
    if (chartInstance) {
      chartInstance.dispose()
      chartInstance = null
    }
    window.removeEventListener('resize', handleResize)
  })

  // 返回对象：暴露DOM引用和更新方法
  return {
    chartRef,
    setChartOption
  }
}

改造页面 chartDemo.vue，使用封装好的 useEcharts

<template>
  <div class="chart-container">
    <el-button
      type="primary"
      @click="changeChartData"
    >切换图表数据</el-button>
    <div
      ref="chartRef"
      style="
        width: 100%;
        height: 400px;
        border: 1px solid #eee;
        margin-top: 15px;
      "
    ></div>
  </div>
</template>

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

const optionA = {
  title: {
    text: '基础柱状图-版本A',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [10, 22, 18, 25, 16]
    }
  ]
}

const optionB = {
  title: {
    text: '基础柱状图-版本B',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [28, 12, 24, 15, 21]
    }
  ]
}

let currentOption = optionA

onMounted(() => {
  // DOM挂载、echart实例初始化完成后，再渲染图表
  setChartOption(currentOption)
})

const changeChartData = () => {
  currentOption = currentOption === optionA ? optionB : optionA
  setChartOption(currentOption)
}
</script>

第 2 章 测试清单

1. 创建src/composables/echartHelper.js，粘贴上面 helper 代码
2. 替换chartDemo.vue全部代码，保存文件
3. 刷新页面，逐项测试：
   • ✅ 页面正常渲染柱状图
   • ✅ 点击【切换图表数据】按钮，柱子数据和标题切换
   • ✅ 拉伸浏览器窗口，图表自动缩放
   • ✅ 若依菜单来回切换进出页面，控制台无报错，实例正常销毁