echarts前端导出到word遇到的问题

使用echarts导出图片时，就是调用图表实例的 getConnectedDataURL 的方法，可能会遇到以下问题

1. 如果图表有的是根据条件切换的，在导出时，图表相关的数据没有加载，也就没有显示过，如下图
2. 页面中显示的图表宽高和要导出到word中的不一样
3. 使用echarts的rendered事件中来调用实例方法获取图片，需要关闭animation，否则图片中只有坐标，这样需要关闭页面中图表的动画，影响体验

如果页面只加载了当日的图表数据，没有切换过月累计类型，需要导出怎么处理，如果去获取数据再生成option，然后创建实例获取图片，获取数据和渲染图表都是异步的过程，需要做好控制。

我选择的方法是不使用页面中展示的图表实例，而是动态的创建一个，这样和页面展示没有关系，就可以控制宽高和关闭动画

    getImage(index, option) {
      return new Promise((resolve, reject) => {
        option.animation = false; //关闭动画
        var div = document.createElement("div");
        div.style.cssText =
          "position: fixed;z-index: -100;height: 350px; width: 550px;";//隐藏div
        this.$el.appendChild(div);
        let chart = this.$echarts.init(div);
        chart.on("rendered", () => {
            // 将图片信息放到数组中 
          this.images[index] =
            // ECHARTS图表的图片并转为base64格式
            chart.getConnectedDataURL({
              type: "png",
              pixelRatio: 1.2, // 导出的图片分辨率比例
            });
          chart.off();
          div.remove();
          resolve();
        });
        chart.setOption(option);
      });
    },

调用

async exportWorld(){
    ...
    await this.getImage(0, img1Option);
    await this.getImage(1, img2Option);
    await this.getImage(2, img3Option);
    await this.getImage(3, img4Option);
    await this.getImage(4, img5Option);
    ...
}

关于问题1，需要我们在写代码时用promise处理需要先后执行的代码，使用await让promise按顺序执行