那些年踩过的坑 --- echarts_echarts mounted-CSDN博客

本文链接：https://blog.csdn.net/MFline/article/details/123845515

本文分享了ECharts在项目中的一些实用技巧，包括按需引入的方法、常见错误的解决策略及特殊场景下的图表初始化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

那些年踩过的坑 — echarts

1、针对echarts，首先第一个是按需引入的方式，记录个自己做项目的时候的常用吧：
（先下载echarts的依赖，我相信你没忘这一步）
在这里插入图片描述

  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')			//饼图
  //下面的是需要的提示框
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/toolbox')
  require('echarts/lib/component/grid')
  require('echarts/lib/component/legend')

2、是关于echarts常见的一个报错：dom还没有加载出来,就进行了echart.init(dom);
在这里插入图片描述
通常针对这种情况有三种解决方法：
1、放在mounted里面（在生命周期mounted中，完成了实例的挂载）
关于生命周期，推一波这个作者大大！
2、是使用this.$nextTick(当数据被修改后，回调获取更新后的dom，然后渲染出来）

this.$nextTick(()=>{
    //DOM更新
    ...
})

3、异步

initEcharts () {
    // 新建一个promise对象
    let newPromise = new Promise((resolve) => {
        resolve()
    })
    //然后异步执行echarts的初始化函数
    newPromise.then(() => {
        //  此dom为echarts图标展示dom
        echarts.init(DOm)
    })
}

说一下，我在项目中遇到的场景吧
父子组件中，子组件中初始化了echarts，父组件调用接口获取子组件echarts需要的数据，在这个时候mounted里面受接口的影响，获取不到echarts的初始化的值，所以在这里echarts图表是不会显示出来的，解决方法就是做监听了
在这里插入图片描述