导出Echarts图表

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][2019101214123387.png]

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

<el-button type="primary" @click="downLoad">导出</el-button>
    <div id="volume"></div>

downLoad(){ 
      var myChart = echarts.init(document.getElementById('volume'))
      var resultBase64 = myChart.getDataURL({ 
        type: 'png',
        pixelRatio: 2,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
        backgroundColor: '#fff' //设置导出图片的背景颜色
      })
      var $a = document.createElement('a');
      $a.setAttribute("href", resultBase64);
      $a.setAttribute("download", "");
      $a.click();
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20230601/1c719a29e2314fccbce929b119184f00.png
[2019101214123387.png]: /images/20230601/78e2778fc5bb49b0a171035083ac830d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

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

相关阅读

相关 echarts统计图表

1、简介 ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地

雨点打透心脏的1/2处/ 2024年04月06日 11:13/ 0 赞/ 158 阅读

相关 ECharts 自定义图表导出图片

1 前言在项目过程中，碰到一个这样的需求，页面显示时如下图所示ECharts图表背景是深色，文字是白色的。 ![watermark_type_ZmFuZ3poZW5n

妖狐艹你老母/ 2023年10月05日 11:41/ 0 赞/ 112 阅读

相关 echarts图表演示图表演示

eCharts图表演示比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。郑州的大数据产

怼烎@/ 2023年09月29日 18:25/ 0 赞/ 64 阅读

相关导出Echarts图表

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

桃扇骨/ 2023年06月07日 03:13/ 0 赞/ 4 阅读

相关 echarts数据传输图表

echarts数据传输图表样式如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

古城微笑少年丶/ 2022年10月01日 13:51/ 0 赞/ 579 阅读

相关 echarts 图表渐变色

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAaHp4T25saW5lT2s_size_20

Bertha 。/ 2022年09月11日 09:25/ 0 赞/ 337 阅读

相关 echarts图表导出excel示例

前台 <form id="exportForm" action="/foodBreak/statistical/importData" method="post">

灰太狼/ 2022年06月14日 08:40/ 0 赞/ 1333 阅读

相关前端报表导出成word文档（含echarts图表）

前端报表导出成word文档（含echarts图表）一、问题背景：前端vue做的各种维度的报表，原来是通过前端整体截屏导出成PDF，但部分报表在遇到跨页时会被截断

以你之姓@/ 2022年05月22日 11:44/ 0 赞/ 863 阅读

相关 Echarts图表制作

<1>常用到的参数 `1)-i`：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。 `2)-o`：生成的 bundle 文件，可以是绝对路径或者基于当前命

雨点打透心脏的1/2处/ 2022年04月02日 03:02/ 0 赞/ 459 阅读

相关 mpvue - 使用Echarts图表

安装依赖包 npm install echarts vue-echarts --save yarn add echarts mpvue-echarts

蔚落/ 2021年07月26日 12:33/ 0 赞/ 838 阅读