将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图表导出为图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
纯JavaScript模仿微信打飞机游戏，做网页小游戏的借鉴下，界面设计是竖长形仿手机屏幕风格，游戏效果流畅，通过本篇文章给大家分享纯js如何实现模仿微信打飞机小游戏，需要的朋友可以参考下2015-08-08
在一些网站我们会见到，当鼠标放在输入框上输入框和图片同时更换样式，那么基于js代码是如何实现的呢？下面小编给大家解答下2016-09-09
今天小编就为大家分享一篇layui 优化button按钮和弹出框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了使用js实现瀑布流效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
web-view是小程序提供的一个可以直连h5页面的组件,只要传递一个h5页面的地址,就可以在小程序里直接打开预览该h5页面,这篇文章主要给大家介绍了微信小程序webView嵌入H5的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了微信小程序实现裁剪图片大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要给大家介绍了关于微信小程序如何监听全局变量的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
这篇文章主要介绍了JavaScript中的索引数组、关联数组和静态数组、动态数组讲解,本文介绍了从数组的下标分为索引数组、关联数组、从对数据的存储分为静态数组、动态数组,并给出了示例,需要的朋友可以参考下2014-11-11
在JavaScript中,我们可以通过多种方法来判断一个数组中是否包含某个特定的值,这篇文章主要给大家介绍了关于如何查找JS对象中是否包含某个变量的6种方法,需要的朋友可以参考下2024-08-08
下面小编就为大家带来一篇浅谈js数组和splice的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
最新评论