当前位置：首页 > VUE

vue实现echarts懒加载

2026-02-23 20:14:52VUE

实现 Vue 中 ECharts 的懒加载

懒加载的核心思路是当组件进入可视区域时再初始化 ECharts 图表，避免不必要的性能消耗。以下是具体实现方法：

安装依赖 需要安装 echarts 和 vue-lazyload（或类似懒加载库）：

npm install echarts vue-lazyload

全局注册懒加载指令 在 main.js 中注册懒加载插件：

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  attempt: 3
})

组件实现 创建图表组件时，通过 v-lazy 指令控制渲染时机：

<template>
  <div v-lazy="initChart" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  methods: {
    initChart() {
      const chart = echarts.init(this.$el)
      chart.setOption({
        // 你的图表配置
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
        yAxis: { type: 'value' },
        series: [{ data: [820, 932, 901], type: 'line' }]
      })
      window.addEventListener('resize', () => chart.resize())
    }
  }
}
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>

使用 IntersectionObserver API 实现

对于更精细的控制，可以直接使用浏览器原生 API：

<template>
  <div ref="chartEl" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.initChart()
        observer.disconnect()
      }
    })
    observer.observe(this.$refs.chartEl)
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chartEl)
      chart.setOption({
        // 图表配置
      })
    }
  }
}
</script>

动态数据加载

结合异步数据请求实现完整懒加载流程：

methods: {
  async initChart() {
    const data = await fetchChartData() // 你的API请求
    const chart = echarts.init(this.$el)
    chart.setOption({
      dataset: { source: data },
      series: [{ type: 'bar' }]
    })
  }
}