将Echarts图表导出为图片的3种方法总结

更新时间：2023年06月30日 09:45:35 作者：慢慢manman

这篇文章主要给大家介绍了关于将Echarts图表导出为图片的3种方法,Echarts是一种基于JavaScript的可视化库,用于创建丰富、交互式的图表和地图,而Excel是一种电子表格软件,用于数据处理和分析,需要的朋友可以参考下

第一种使用 html2canvas 对dom元素截图

1.npm安装

npm install html2canvas

yarn安装

yarn add html2canvas

2.组件引入

import html2canvas from "html2canvas"

3.代码

// 导出多张图表为一张图片
// dmo元素里的内容转换为canvas,并将canvas下载为图片
const download = () => {
  // 转换成canvas
  html2canvas(document.getElementById("echarts")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    // 创建a标签，实现下载
    var creatIMg = document.createElement("a");
    creatIMg.download = "图表.png"; // 设置下载的文件名，
    creatIMg.href = img; // 下载url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下载之后把创建的元素删除
  });
};

第二种使用Echarts官方文档中的 getDataURL 方法

// 导出单个图表图片
function Export() {
  var img = new Image();
  // pieMyChart1 要导出的图表
  img.src = pieMyChart1.value.getDataURL({
    type: "png",
    pixelRatio: 1, //放大2倍
    backgroundColor: "#fff",
  });
  img.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    var event = new MouseEvent("click");
    a.download = "图片.png" || "下载图片名称";
    // 将生成的URL设置为a.href属性
    a.href = dataURL;
    // 触发a的单击事件
    a.dispatchEvent(event);
    a.remove();
  };
}

第三种使用Echarts官方文档中的 toolbox

toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        saveAsImage: { show: true },  // 保存图表
      },
},

完整代码

<template>
  <el-scrollbar>
    <div style="padding: 10px 10px 0">
      <el-button type="primary" @click="refresh">刷新</el-button>
      <el-button @click="download">下载</el-button>
      <el-button @click="Export">导出pie</el-button>
    </div>
    <el-divider />
    <div id="echarts">
      <div class="about" id="main"></div>
      <div class="about" id="pie"></div>
    </div>
  </el-scrollbar>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import html2canvas from "html2canvas";
const { appContext } = getCurrentInstance();
const { $echarts } = appContext.config.globalProperties;
onMounted(() => {
  setEcharts();
});
const pieMyChart1 = ref(null);
const setEcharts = () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = $echarts.init(document.getElementById("main"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      axisTick: {
        // 坐标轴刻度标签
        show: false,
      },
    },
    yAxis: {
      type: "value", // 类型数值轴
      min: 0,
      max: 40,
      splitNumber: 8, // 坐标轴的分割段数
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false, // 隐藏刻度
      },
    },
    series: [
      {
        name: "销量",
        type: "bar",
        label: {
          show: true,
          fontSize: 16,
        },
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
          borderRadius: 5,
          borderWidth: 1,
          borderType: "solid",
          borderColor: "#73c0de",
        },
      },
    ],
  });
  // 绘制图表
  const pieMyChart = $echarts.init(document.getElementById("pie"));
  pieMyChart1.value = pieMyChart;
  pieMyChart.setOption({
    title: {
      text: "ECharts 入门示例",
      titleStyle: {
        lineHeight: 18,
      },
      top: "0px",
    },
    tooltip: {},
    legend: {
      orient: "vertical",
      x: "left",
      data: ["A", "B", "C", "D", "E"],
      top: "80px",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        saveAsImage: { show: true }, // 保存图表
      },
    },
    series: [
      {
        type: "pie",
        data: [
          {
            value: 335,
            name: "A",
          },
          {
            value: 234,
            name: "B",
          },
          {
            value: 548,
            name: "C",
          },
          {
            value: 500,
            name: "D",
          },
          {
            value: 500,
            name: "E",
          },
        ],
      },
    ],
  });
};
// 页面刷新
const refresh = () => {
  location.reload();
};
// 导出多张图表为一张图片
// dmo元素里的内容转换为canvas,并将canvas下载为图片
const download = () => {
  // 转换成canvas
  html2canvas(document.getElementById("echarts")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    // 创建a标签，实现下载
    var creatIMg = document.createElement("a");
    creatIMg.download = "图表.png"; // 设置下载的文件名，
    creatIMg.href = img; // 下载url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下载之后把创建的元素删除
  });
};
// 导出单个图表图片
function Export() {
  var img = new Image();
  img.src = pieMyChart1.value.getDataURL({
    type: "png",
    pixelRatio: 1, //放大2倍
    backgroundColor: "#fff",
  });
  img.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    var event = new MouseEvent("click");
    a.download = "图片.png" || "下载图片名称";
    // 将生成的URL设置为a.href属性
    a.href = dataURL;
    // 触发a的单击事件
    a.dispatchEvent(event);
    a.remove();
  };
}
</script>
<style>
.el-scrollbar {
  height: calc(100vh - 59px);
}
.el-divider--horizontal {
  margin: 10px 0;
}
#echarts {
  padding: 20px;
  width: 600px;
}
#main {
  height: 300px;
  width: 600px;
}
#pie {
  height: 300px;
  width: 600px;
}
</style>

总结

到此这篇关于将Echarts图表导出为图片的3种方法的文章就介绍到这了,更多相关Echarts图表导出为图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

echarts图表导出excel示例

JS实现瀑布流布局
这篇文章主要为大家详细介绍了JS实现瀑布流布局效果展示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
使用Nginx部署前端项目的详细步骤记录
在实际开发中我们通常会使用Nginx来部署前端静态页面,以提供快速访问速度和良好的用户体验,这篇文章主要给大家介绍了关于使用Nginx部署前端项目的详细步骤,需要的朋友可以参考下
2024-08-08
uniapp开发微信小程序自定义顶部导航栏功能实例
uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发微信小程序自定义顶部导航栏功能的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Wordpress ThickBox 添加“查看原图”效果代码
上一次修改了点击图片动作，这次添加一个“查看原图”的链接，点击后将在一个新浏览器窗口(或Tab)打开该图片的原始链接地址。
2010-12-12
JavaScript编写开发动态时钟
这篇文章主要为大家详细介绍了JavaScript编写开发动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
JS如何实现手机端输入验证码效果
这篇文章主要介绍了JS如何实现手机端输入验证码效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
javascript简单比较日期大小的方法
这篇文章主要介绍了javascript简单比较日期大小的方法,涉及JavaScript针对日期的转换与判定操作技巧,需要的朋友可以参考下
2016-01-01
JavaScript绘制游戏地图并且操控人物移动
JavaScript开发小游戏,目标是使用JavaScript绘制简单的二维地图,采用二维数组存储地图信息,使用表格绘制地图,每个td单元格存储数据,使用JavaScript keyPress键盘事件监听WASD键,按键触发时人物做出相应操作,人物下一步碰撞到障碍物,终止人物运动
2023-10-10
深入了解JavaScript中的new关键字
手写new是JS面试题高频考点，实现代码也非常简单，但在实现后小编对其为什么要这样设计有着很深的疑惑，今天就来讲一下为什么要这样设计new的实现吧
2023-05-05
JavaScript设计模式之原型模式分析【ES5与ES6】
这篇文章主要介绍了JavaScript设计模式之原型模式,简单描述了原型模式的概念、原理,并结合实例形式分析了ES5与ES6实现原型模式的相关操作技巧,需要的朋友可以参考下
2018-07-07

将Echarts图表导出为图片的3种方法总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具