Vue项目中vue-echarts蜡烛图页面刷新后无法渲染求助

我之前处理过完全类似的问题，你遇到的TypeError: Cannot read property 'get' of undefined错误，大概率是ECharts按需引入不完整或者组件初始化时机不对导致的，结合你用的vue-echarts@4.0.3和echarts@4.2.1版本，咱们一步步来排查解决：

1. 优先检查：是否完整引入蜡烛图所需模块 #

vue-echarts默认不会打包所有ECharts图表类型，蜡烛图（candlestick）属于需要单独引入的模块。如果你的代码里只引入了基础的vue-echarts组件，没加蜡烛图相关模块，首次加载可能因为缓存或者异步加载侥幸成功，但刷新时就会报错。

修复方式： #

在使用蜡烛图的组件（或者全局main.js）里，补充引入必要的模块：

// 引入vue-echarts基础组件
import VueECharts from 'vue-echarts'
// 必须引入蜡烛图图表类型
import 'echarts/lib/chart/candlestick'
// 还要引入蜡烛图依赖的组件（比如提示框、图例、坐标系）
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/grid'

// 全局注册组件（如果是局部注册就写在components里）
Vue.component('v-chart', VueECharts)

如果你的项目用了babel-plugin-component做按需引入，要确保babel配置里包含candlestick：

// babel.config.js
module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'vue-echarts',
        style: false
      },
      'vue-echarts'
    ],
    [
      'component',
      {
        libraryName: 'echarts',
        style: false,
        libraryDirectory: 'lib',
        camel2DashComponentName: false
      },
      'echarts'
    ]
  ]
}

2. 调整组件初始化时机，避免DOM未就绪 #

刷新页面时，组件的mounted钩子执行时，DOM可能还没完全渲染完成，导致echarts实例初始化失败。可以用$nextTick延迟初始化逻辑：

<template>
  <v-chart ref="candleChart" :option="chartOption"></v-chart>
</template>

<script>
import VueECharts from 'vue-echarts'
import 'echarts/lib/chart/candlestick'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'

export default {
  components: {
    'v-chart': VueECharts
  },
  data() {
    return {
      chartOption: {}
    }
  },
  mounted() {
    // 等待DOM完全渲染后再初始化图表
    this.$nextTick(() => {
      this.initCandleChart()
    })
  },
  methods: {
    initCandleChart() {
      this.chartOption = {
        // 你的蜡烛图配置，示例结构：
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: ['2024-01-01', '2024-01-02', '2024-01-03']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'candlestick',
            data: [[10, 12, 8, 11], [11, 14, 9, 13], [12, 15, 10, 14]]
          }
        ]
      }
    }
  }
}
</script>

3. 避免直接操作未就绪的echarts实例 #

如果你需要手动调用echarts实例的方法（比如resize），一定要先判断实例是否存在：

// 在需要操作实例的方法里
const chartInstance = this.$refs.candleChart?.echartsInstance
if (chartInstance) {
  chartInstance.resize()
}

4. 排查依赖兼容性问题 #

如果上面的方法都没用，可以尝试清除依赖缓存重新安装，确保版本匹配：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Sukhpal Singh