在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...

问题描述：

echarts图表的toolbox里面本身有下载的功能，但有的时候，我们需要在echarts图表外添加一个按钮来实现下载，以下是基于vue，echarts版本4的一个解决方案记录：

解决方法：
1.借助a标签的download属性

<a :href="chartImgUrl" download="echart.png">下载</a>

href属性 => 需要下载的内容的url地址
download属性 => 下载文件重命名
注意：
href链接为同源时，download属性才起作用，否则，只是打开链接内容。

2.借助echarts实例的getDataURL方法

链接：http://echarts.baidu.com/api.html#echartsInstance.getDataURL

chart.setOption(option);//在此之后，可以调用getDataURL来获取图表url
//this => vue实例
//chartImgUrl => a的href链接的值
this.chartImgUrl = chart.getDataURL({
    pixelRatio: 2,
    backgroundColor: '#fff'
});

3.通过上面的方式，下载下来的图片只有底图，而没有数据的图表，此时，还需要对echarts实例的配置项中的series进行如下设置来关闭动画，然后就OK了。如果是希望保留动画效果的，则可以通过setTimeout进行一下延时处理，道理是一样的

animation: false

setTimeout(function() {
    this.chartImgUrl = chart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
        });
}, 1000)                                

参考链接1：https://blog.csdn.net/zuoyiran520081/article/details/77877355
参考链接2：https://www.jianshu.com/p/12257cd84098

转载于:https://www.cnblogs.com/chaoyueqi/p/10108565.html