关于echarts导出图片不显示数据问题

需求是使用echarts的图表功能先生成图片，通过浏览发现  每次生成的都是只有  底图没有数据。就是下面这种效果

首先  我们先了解一下 echarts提供个生成图片的api

网址：https://www.echartsjs.com/zh/api.html#echartsInstance.getDataURL

在这个文档中

也就是说生成 图片 我们只需要 写如下代码 就可以将 我们的  echarts图表生成图片。

function getManage () {
    let img = new Image()
    img.src = myChart.getDataURL(
      {
        type: 'png'
      }
    )
    return img
  }
// 调用
let mySrc = getManage()
let img = document.getElementById('myImg')
    img.src = mySrc.src

因为需求没有说需要 配置分辨率或者背景等问题 使用我就只设置了这个参数。

到这一步 就回到了开头所说的那个问题。为什么会出现这个问题呢？

如果你把getDataURL这个方法理解成为是一个相机，而你的 展示的图表是一个人在摆姿态。也就是  当照相机  按下快门的一瞬间，你这个人  姿态还没有摆好就已经被拍照了  那么自然 洗出来的 图片就没有效果了

解决这个问题的 办法 有两个

1，就是  延迟 相机的 拍照时间  

setTimeout(function () {
    let mySrc = getManage()
    let img = document.getElementById('myImg')
    img.src = mySrc.src
  }, 1000)

2 就是 取消 图表里面动画效果，就是在 option 中添加一个  animation: false 属性 就可以解决这个问题

到这里  问题就基本解决  了  剩下就是  什么时候生成图片 或者 如何调图片发  问题。

总结一下，首先遇见自己之前没有把握的问题时 先百度一下，先大概了解一下 然后在去相应的官网去看具体的 API，毕竟别人只是写了这个api一小部分  我们不能只知道其一不知其二  直接看官网api能了解到更多。

如果大家喜欢我的 文章 可以给一个小赞。鼓励我继续写下去