js动态生成echarts图表，并生成图片保存到本地，自定义图片名。
目录
- 一、js动态生成图表
-
-
- 1. 效果图
- 2. 测试数据
- 3. 实现代码
-
- 二、点击下载按钮生成快照 - 图片路径
-
-
- 1. 效果图
- 2. 实现代码
-
- 三、 保存图片到本地
-
-
- 1. 效果图
- 2. 代码实现
-
一、js动态生成图表
1. 效果图
2. 测试数据
let data = [{
title: '图表1',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [15, 20, 25, 30, 35, 40, 45],
type: 'line'
}
},
className: 'one'
},
{
title: '图表2',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [100, 200, 220, 218, 135, 147, 260],
type: 'line'
}
},
className: 'two'
},
{
title: '图表3',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [50, 30, 24, 18, 35, 17, 60],
type: 'line'
}
},
className: 'three'
}
]
3. 实现代码
1）导入echarts
下载地址 >> 下载完成后导入dist目录下的echarts.js
2）逻辑实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.min.js"></script>
<style>
.box {
width: 500px;
height: 500px;
margin: 10px;
}
.charts {
width: 450px;
height: 450px;
border: 1px solid black;
margin: 10px;
}
.titleBox {
display: flex;
width: 100%;
height: 30px;
}
.title {
width: 80%;
height: 30px;
text-align: center;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<script>
let data = [{
title: '图表1',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [15, 20, 25, 30, 35, 40, 45],
type: 'line'
}
},
className: 'one'
},
{
title: '图表2',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [100, 200, 220, 218, 135, 147, 260],
type: 'line'
}
},
className: 'two'
},
{
title: '图表3',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [50, 30, 24, 18, 35, 17, 60],
type: 'line'
}
},
className: 'three'
}
]
window.onload = function () {
for (let i = 0; i < data.length; i++) {
// 1. 创建div(每个图表)
var Odiv = document.createElement("div");
Odiv.classList.add('box')
// 2. 创建标题的div
var titleBox = document.createElement("div");
Odiv.appendChild(titleBox)
titleBox.classList.add('titleBox')
// 2.1 设置图表标题
var title = document.createElement("div");
title.innerText = data[i].title
titleBox.appendChild(title);
title.classList.add('title')
// 3. 设置图表的div
var charts = document.createElement("div");
Odiv.appendChild(charts);
charts.classList.add('charts')
// 4. 将图表添加到body
document.body.appendChild(Odiv);
// 5. 图表配置
var myChart = echarts.init(charts);
var option;
option = {
xAxis: {
type: 'category',
data: data[i].content.xAxis
},
yAxis: {
type: 'value'
},
series: data[i].content.series
};
option && myChart.setOption(option);
}
}
</script>
</body>
</html>
二、点击下载按钮生成快照 - 图片路径
1. 效果图
2. 实现代码
1）导入html2canvas
① 下载完成后，导入dist文件夹下的html2canvas.js
yarn add html2canvas
② 导入后报错
解决：
打开导入的html2canvas.js
在文件最后一行有//# sourceMappingURL=html2canvas.js.map修改为// /# sourceMappingURL=html2canvas.js.map
2）逻辑实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./html2canvas.js"></script>
<style>
.box {
width: 500px;
height: 500px;
margin: 10px;
}
.charts {
width: 450px;
height: 450px;
border: 1px solid black;
margin: 10px;
}
.titleBox {
display: flex;
width: 100%;
height: 30px;
}
.title {
width: 80%;
height: 30px;
text-align: center;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<script>
let data = [{
title: '图表1',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [15, 20, 25, 30, 35, 40, 45],
type: 'line'
}
},
className: 'one'
},
{
title: '图表2',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [100, 200, 220, 218, 135, 147, 260],
type: 'line'
}
},
className: 'two'
},
{
title: '图表3',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [50, 30, 24, 18, 35, 17, 60],
type: 'line'
}
},
className: 'three'
}
]
window.onload = function () {
for (let i = 0; i < data.length; i++) {
// 1. 创建div(每个图表)
var Odiv = document.createElement("div");
Odiv.classList.add('box')
// 2. 创建标题的div
var titleBox = document.createElement("div");
Odiv.appendChild(titleBox)
titleBox.classList.add('titleBox')
// 2.1 设置图表标题
var title = document.createElement("div");
title.innerText = data[i].title
titleBox.appendChild(title);
title.classList.add('title')
// 2.2 设置按钮
var btnBox = document.createElement("div");
var btn = document.createElement("button");
btn.innerText = '下载'
// 2.3 按钮点击事件
btn.onclick = function (e) {
// 调用函数获取图片路径
convertToImage(e.target.parentNode.nextSibling).then(res => {
console.log(res);
})
}
titleBox.appendChild(btn);
// 3. 设置图表的div
var charts = document.createElement("div");
Odiv.appendChild(charts);
charts.classList.add('charts')
// 4. 将图表添加到body
document.body.appendChild(Odiv);
// 5. 配置图表
var myChart = echarts.init(charts);
var option;
option = {
xAxis: {
type: 'category',
data: data[i].content.xAxis
},
yAxis: {
type: 'value'
},
series: data[i].content.series
};
option && myChart.setOption(option);
}
}
// 功能：生成快照
const convertToImage = (container, options = {}) => {
// 1. 设置放大倍数
const scale = window.devicePixelRatio;
// 2. 传入节点原始宽高
const _width = container.offsetWidth;
const _height = container.offsetHeight;
// 3. html2canvas配置项
const ops = {
_width,
_height,
useCORS: true,
allowTaint: false,
};
return html2canvas(container, ops).then(canvas => {
// 4. 返回图片的二进制数据
return canvas.toDataURL("image/png");
});
}
</script>
</body>
</html>
三、 保存图片到本地
1. 效果图
2. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./html2canvas.js"></script>
<style>
.box {
width: 500px;
height: 500px;
margin: 10px;
}
.charts {
width: 450px;
height: 450px;
border: 1px solid black;
margin: 10px;
}
.titleBox {
display: flex;
width: 100%;
height: 30px;
}
.title {
width: 80%;
height: 30px;
text-align: center;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<script>
let data = [{
title: '图表1',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [15, 20, 25, 30, 35, 40, 45],
type: 'line'
}
},
className: 'one'
},
{
title: '图表2',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [100, 200, 220, 218, 135, 147, 260],
type: 'line'
}
},
className: 'two'
},
{
title: '图表3',
content: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: {
data: [50, 30, 24, 18, 35, 17, 60],
type: 'line'
}
},
className: 'three'
}
]
window.onload = function () {
for (let i = 0; i < data.length; i++) {
// 1. 创建div(每个图表)
var Odiv = document.createElement("div");
Odiv.classList.add('box')
// 2. 创建标题的div
var titleBox = document.createElement("div");
Odiv.appendChild(titleBox)
titleBox.classList.add('titleBox')
// 2.1 设置图表标题
var title = document.createElement("div");
title.innerText = data[i].title
titleBox.appendChild(title);
title.classList.add('title')
// 2.2 设置按钮
var btnBox = document.createElement("div");
var btn = document.createElement("button");
btn.innerText = '下载'
// 2.3 按钮点击事件
btn.onclick = function (e) {
// 调用函数获取图片路径
convertToImage(e.target.parentNode.nextSibling).then(res => {
// 将图片下载到本地
var x = new XMLHttpRequest();
x.open("GET", res, true);
x.responseType = 'blob';
x.onload = function (e) {
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a');
a.href = url
a.download = '自定义图片名'
a.click()
}
x.send();
})
}
titleBox.appendChild(btn);
// 3. 设置图表的div
var charts = document.createElement("div");
Odiv.appendChild(charts);
charts.classList.add('charts')
// 4. 将图表添加到body
document.body.appendChild(Odiv);
// 5. 配置图表
var myChart = echarts.init(charts);
var option;
option = {
xAxis: {
type: 'category',
data: data[i].content.xAxis
},
yAxis: {
type: 'value'
},
series: data[i].content.series
};
option && myChart.setOption(option);
}
}
// 功能：生成快照
const convertToImage = (container, options = {}) => {
// 1. 设置放大倍数
const scale = window.devicePixelRatio;
// 2. 传入节点原始宽高
const _width = container.offsetWidth;
const _height = container.offsetHeight;
// 3. html2canvas配置项
const ops = {
_width,
_height,
useCORS: true,
allowTaint: false,
};
return html2canvas(container, ops).then(canvas => {
// 4. 返回图片的二进制数据
return canvas.toDataURL("image/png");
});
}
</script>
</body>
</html>