[JavaScript知识库] 那些年踩过的坑 --- echarts

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 那些年踩过的坑 --- echarts -> 正文阅读

[JavaScript知识库]那些年踩过的坑 --- echarts

那些年踩过的坑 — 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图表是不会显示出来的，解决方法就是做监听了
在这里插入图片描述