700字范文 > js动态生成echarts图表并生成图片保存到本地自定义图片名。

js动态生成echarts图表并生成图片保存到本地自定义图片名。

时间：2021-06-26 14:22:40

一、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）逻辑实现

二、点击下载按钮生成快照 - 图片路径

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="/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. 创建标题的divvar titleBox = document.createElement("div");Odiv.appendChild(titleBox)titleBox.classList.add('titleBox')// 2.1 设置图表标题var title = document.createElement("div");title.innerText = data[i].titletitleBox.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. 将图表添加到bodydocument.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="/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. 创建标题的divvar titleBox = document.createElement("div");Odiv.appendChild(titleBox)titleBox.classList.add('titleBox')// 2.1 设置图表标题var title = document.createElement("div");title.innerText = data[i].titletitleBox.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 = urla.download = '自定义图片名'a.click()}x.send();})}titleBox.appendChild(btn);// 3. 设置图表的div var charts = document.createElement("div");Odiv.appendChild(charts);charts.classList.add('charts')// 4. 将图表添加到bodydocument.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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。