导出Echarts图表

桃扇骨 2023-06-07 03:13 27阅读 0赞

在这里插入图片描述
在这里插入图片描述

导出原理：
得到Echarts画出的canvas图片的base64，将其导出
代码：

  1. <el-button type="primary" @click="downLoad">导出</el-button>
  2. <div id="volume"></div>
  4. downLoad(){ 
  5.   var myChart = echarts.init(document.getElementById('volume'))
  6.   var resultBase64 = myChart.getDataURL({ 
  7.     type: 'png',
  8.     pixelRatio: 2,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
  9.     backgroundColor: '#fff' //设置导出图片的背景颜色
  10.   })
  11.   var $a = document.createElement('a');
  12.   $a.setAttribute("href", resultBase64);
  13.   $a.setAttribute("download", "");
  14.   $a.click();
  15. }

Echarts图表如何绘制，看这儿
https://blog.csdn.net/weixin\_40970987/article/details/82457486

发表评论

表情：
评论列表 （有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读