将echarts导入到word中

echarts自带保存图表配置

在echarts中有导出echarts图表图片的工具配置项

 // 保存图片配置toolbox: {feature: {saveAsImage: {}}},

具体看下面代码的配置项

Documentation - Apache ECharts

<!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><!-- vue在线引入 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 在线引入echarts --><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
</head><body><div id="app"><div id="main" style="width: 500px; height: 400px;"></div></div><script>var app = new Vue({el: '#app',data: {myChart: null},methods: {// 初始化echartsinitEcharts() {var chartDom = document.getElementById('main');// 将创建的echarts示例放到vue的data中，这样在这个界面就想到于全局配置了this.myChart = echarts.init(chartDom);},// 配置echarts的option，展示数据图表setEchartsOption() {// 这里可以发送axios请求，然后通过响应的数据赋值给对应的x轴和y轴即可，由于这里没有于后端联调，所以简单请求判断一下，// 请求后端大概也是这个过程var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},// 保存图片配置toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}]};option && this.myChart.setOption(option);},},mounted() {// 注意调用顺序，先初始化echarts才给echarts赋值this.initEcharts()this.setEchartsOption()}})</script>
</body></html>

echarts提供了获取图表的api

echarts官网：Documentation - Apache ECharts

代码如下所示

<!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><!-- vue在线引入 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 在线引入echarts --><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
</head><body><div id="app"><el-row><el-button type="primary" @click="daochupng">导出为png</el-button></el-row><div id="main" style="width: 500px; height: 400px;"></div></div><script>var app = new Vue({el: '#app',data: {myChart: null},methods: {// 导出为pngdaochupng() {var image = this.myChart.getDataURL({pixelRatio: 2,backgroundColor: '#fff'});let blob = this.dataURLtoBlob(image);let fileName = 'echarts导出结果.png';let file = new File([blob], fileName, { type: 'image/png' })const downloadElement = document.createElement('a');const href = window.URL.createObjectURL(file);downloadElement.href = href;downloadElement.download = fileName;document.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);},// 将base64转化为blob数据dataURLtoBlob(dataurl) {let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},// 初始化echartsinitEcharts() {var chartDom = document.getElementById('main');// 将创建的echarts示例放到vue的data中，这样在这个界面就想到于全局配置了this.myChart = echarts.init(chartDom);},// 配置echarts的option，展示数据图表setEchartsOption() {// 这里可以发送axios请求，然后通过响应的数据赋值给对应的x轴和y轴即可，由于这里没有于后端联调，所以简单请求判断一下，// 请求后端大概也是这个过程var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},// 保存图片配置toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}]};option && this.myChart.setOption(option);},},mounted() {// 注意调用顺序，先初始化echarts才给echarts赋值this.initEcharts()this.setEchartsOption()}})</script>
</body></html>

echarts通过服务器后端上传echarts图到服务器

前端代码

<!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><!-- vue在线引入 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 在线引入echarts --><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script><!-- axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head><body><div id="app"><el-row><el-button type="primary" @click="shangchuanfuwuqi">echarts上传到服务器</el-button></el-row><div id="main" style="width: 500px; height: 400px;"></div></div><script>var app = new Vue({el: '#app',data: {myChart: null},methods: {// 导出为pngasync shangchuanfuwuqi() {var image = this.myChart.getDataURL({pixelRatio: 2,backgroundColor: '#fff'});let blob = this.dataURLtoBlob(image);let fileName = 'echarts导出结果.png';let file = new File([blob], fileName, { type: 'image/png' })// 因为uploadecharts使用了async修饰，所以这里返回的是promise对象，这里使用await接受，也可以用then的形式const result = await this.uploadecharts(file, fileName)// debuggerconsole.log(result)this.$message.success(result)},// 上传echarts图片给服务器接口async uploadecharts(file, fileName) {const form = new FormData();form.append("file", file)form.append("filename", fileName) // 这个写在这里只是想说明，出来传文件还可以填多个字段const result = await axios.post('http://localhost:8080/upload/echarts', form)// debuggerconsole.log(result)return result.data},// 将base64转化为blob数据dataURLtoBlob(dataurl) {let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},// 初始化echartsinitEcharts() {var chartDom = document.getElementById('main');// 将创建的echarts示例放到vue的data中，这样在这个界面就想到于全局配置了this.myChart = echarts.init(chartDom);},// 配置echarts的option，展示数据图表setEchartsOption() {// 这里可以发送axios请求，然后通过响应的数据赋值给对应的x轴和y轴即可，由于这里没有于后端联调，所以简单请求判断一下，// 请求后端大概也是这个过程var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},// 保存图片配置toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}]};option && this.myChart.setOption(option);},},mounted() {// 注意调用顺序，先初始化echarts才给echarts赋值this.initEcharts()this.setEchartsOption()}})</script>
</body></html>

后端代码

springboot2.5.0+jdk1.8

@RestController
@RequestMapping("/upload")
@CrossOrigin // 允许跨域，前后端分离
public class UploadEchartsController {@RequestMapping("/echarts")public String uploadEcharts(MultipartFile file) throws IOException {String filename = file.getOriginalFilename();// 文件保存路径Path path = Paths.get("D:\\private\\javastudaykeshanchu\\img\\" + filename);file.transferTo(path);/* try {file.transferTo(path);} catch (IOException e) {e.printStackTrace();}*/return "上传图片成功";}
}

结果

到代码中对应的文件夹看，可以看到赌赢的echarts图片已经成功上传到服务器了

查看结果为

这时就可以将echarts图片写入到word中了

前端vue，后端springboot + easypoi

easypoi的maven坐标如下所示：

<dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.4.0</version></dependency>

word模板如下所示

前端代码如下所示

<!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><!-- vue在线引入 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 在线引入echarts --><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script><!-- axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head><body><div id="app"><el-row><el-button type="primary" @click="shangchuanfuwuqi">echarts上传到服务器</el-button></el-row><div id="main" style="width: 500px; height: 400px;"></div></div><script>var app = new Vue({el: '#app',data: {myChart: null},methods: {// 导出为pngasync shangchuanfuwuqi() {var image = this.myChart.getDataURL({pixelRatio: 2,backgroundColor: '#fff'});let blob = this.dataURLtoBlob(image);let fileName = 'echarts导出结果.png';let file = new File([blob], fileName, { type: 'image/png' })// 因为uploadecharts使用了async修饰，所以这里返回的是promise对象，这里使用await接受，也可以用then的形式const result = await this.uploadecharts(file, fileName)// debuggerconsole.log(result)this.$message.success(result)// 这里将图片的名称传给后端，因为后端需要根据图片名加上路径找到上传图片所在的位置，// 这里上传的图片放到了本地，而不是类似于上传到七牛云之类的。// 这里的后端使用了map集合接收，具体看后端代码const params = { echartsimgname: fileName, describe: '这个是一个星期对应的柱形图如下所示' }// 虽然后端是void，但是后端是通过HttpServletResponse 以流的形式返回的，所以这里axios的data就是返回的流数据const res = await axios.post('http://localhost:8080/upload/exportechartstoword', params, { responseType: "blob" })const link = document.createElement("a");let blob2 = new Blob([res.data], { type: "application/msword" });link.style.display = "none";link.href = URL.createObjectURL(blob2);link.setAttribute("download", 'echarts将图片写入到word文档中.docx');document.body.appendChild(link);link.click();document.body.removeChild(link);this.$message.success("将echarts导入到word成功")},// 上传echarts图片给服务器接口async uploadecharts(file, fileName) {const form = new FormData();form.append("file", file)form.append("filename", fileName) // 这个写在这里只是想说明，出来传文件还可以填多个字段const result = await axios.post('http://localhost:8080/upload/echarts', form)// debuggerconsole.log(result)return result.data},// 将base64转化为blob数据dataURLtoBlob(dataurl) {let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},// 初始化echartsinitEcharts() {var chartDom = document.getElementById('main');// 将创建的echarts示例放到vue的data中，这样在这个界面就想到于全局配置了this.myChart = echarts.init(chartDom);},// 配置echarts的option，展示数据图表setEchartsOption() {// 这里可以发送axios请求，然后通过响应的数据赋值给对应的x轴和y轴即可，由于这里没有于后端联调，所以简单请求判断一下，// 请求后端大概也是这个过程var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},// 保存图片配置toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}]};option && this.myChart.setOption(option);},},mounted() {// 注意调用顺序，先初始化echarts才给echarts赋值this.initEcharts()this.setEchartsOption()}})</script>
</body></html>

java后端代码

@RestController
@RequestMapping("/upload")
@CrossOrigin // 允许跨域，前后端分离
public class UploadEchartsController {/*** 将echarts上传只服务器的接口* @param file* @return* @throws IOException*/@RequestMapping("/echarts")public String uploadEcharts(MultipartFile file) throws IOException {String filename = file.getOriginalFilename();// 文件保存路径，D:\private\javastudaykeshanchu\img\这里可以通过application.yml配置文件夹路径，然后在后面拼接文件名即可Path path = Paths.get("D:\\private\\javastudaykeshanchu\\img\\" + filename);file.transferTo(path);/* try {file.transferTo(path);} catch (IOException e) {e.printStackTrace();}*/return "上传图片成功";}/**** @param response* @param maps 这里使用map接收数据是因为这样更加方便，如果使用实体类接收，还要转化为Map<String,Object>这种类型，具体看另外一篇文章* @throws Exception*/@PostMapping("/exportechartstoword")public void exportword(HttpServletResponse response, @RequestBody Map<String,Object> maps) throws Exception {// 读取模板文件所在的位置
//        File filepath = new File("D:\\private\\javastudaykeshanchu\\javaweb\\echarts-demo\\src\\main\\resources\\templates\\wordtemplate.docx");String name = "echarts图表保存到word中";// filepath.getPath()是为了让路径变成string，否则下面的报错
//        XWPFDocument word = WordExportUtil.exportWord07(filepath.getPath(), maps);// 或者直接在这里填写路径也行，就不用创建File了，而且这个路径有条件的话也可以放在application.yml中配置，这样的通用性就会强一点，具体看静态资源配置那篇文章// 创建图像对象ImageEntity imageEntity = new ImageEntity();// 如这里的文件路径就可以设置到applic.yml中，然后通过读取yml的配置项获得路径，放到这里，这里就暂时用这种形式来吧imageEntity.setUrl("D:\\private\\javastudaykeshanchu\\img\\" + maps.get("echartsimgname").toString());// 这里的宽高一定要设置，不然图片出不来，至于设置多少，可以自己到word中A4纸100%的缩放，然后通过Snipaste截图软件大概截图个宽高，然后照着输入就行了imageEntity.setWidth(500);imageEntity.setHeight(300);maps.put("echartsimg", imageEntity);XWPFDocument word = WordExportUtil.exportWord07("D:\\private\\javastudaykeshanchu\\javaweb\\echarts-demo\\src\\main\\resources\\templates\\wordtemplate.docx", maps);String fileName = "echarts通过（" + name + "）详情.docx";response.setHeader("content-disposition", "attachment;filename=" + new String(fileName.getBytes(), "ISO8859-1"));response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");ServletOutputStream outputStream = response.getOutputStream();word.write(outputStream);outputStream.close();word.close();}
}

结果如下图所示

打开word文档得到的结果如下所示

将echarts导入到word中相关推荐

word录入表单数据 java 导入系统,java导入excel | 怎么把excel中的数据批量导入到word中的表格中...
用javascript怎么实现把excel中的数据批量导入到数据库表中这个js不能直接实现吧我们程序用到先读取excel内容转换成数组然后放到页面上再提交表单储存 MySql如何批量添加数 ...
matlab导入txt数据_如何正确的将txt文本数据导入到Word中使用？
在日常办公中,有许多软件保存的文件格式往往都是txt文本格式,那我们应该如何将这些内容导入到Word中并排序好呢? 直接复制?如果你是一些文本内容,直接复制肯定没问题.但如果是数据类型的,那直接复制到 ...
python word保存图_使用python matplotlib 画图导入到word中如何保证分辨率
在写论文时,如果是菜鸟级别,可能不会花太多时间去学latex,直接用word去写,但是这有一个问题,当我们用其他工具画完实验彩色图时,放到word中会有比较模糊,这有两个原因导致的. 原因一:图片导入 ...
matlab如何导出表格图表,如何将matlab绘制的图表导入到Word中 | 我爱分享网
对于论文或是相关文档的标注中,我们常常要将仿真的图像结果导入到Word中,采用常规的截图方法往往无法的得到较好的图像,其实matlab带有该工具,可以直接粘贴. 操作步骤: 1.打开matlab软件: ...
python画图模糊_使用python matplotlib 画图导入到word中如何保证分辨率
在写论文时,如果是菜鸟级别,可能不会花太多时间去学latex,直接用word去写,但是这有一个问题,当我们用其他工具画完实验彩色图时,放到word中会有比较模糊,这有两个原因导致的. 原因一:图片导入 ...
python 中matplotlib 画图导入到word中如何保证分辨率
python 中利用matplotlib 画图导入到word中如何保证分辨率在写论文时,如果是菜鸟级别,可能不会花太多时间去学latex,直接用word去写,但是这有一个问题,当我们用其他工具画完实 ...
matlab如何在word中插入多个表格,怎么把excel中的数据批量导入到word中的表格中《不同表格间的数据导入》...
如何将excel表格中大量数据导入matlab中并作图工具:MATLAB.office excel 将待导入的矩阵结构据录入Excel中,录入时注意行列原矩阵一一对应. 录入完以后保存数据,为了后续 ...
txt内容通过另存为方式导入到word中
之前的程序可以把word内容通过另存为方式导入到txt中直接使用这个程序,txt -> doc ,也可以导入到doc文件中,但是txt->docx , 导入到word2007就有问题这 ...
python 生成矢量图并导入word中
由于论文出图需要,用matplotlib生成的png格式的图像放大后明显模糊,因此可以将其直接保存为pdf格式,之后再经过几次转换就可以导入到word中,具体步骤如下: 1 用matplotlib将图 ...

将echarts导入到word中

将echarts导入到word中

echarts自带保存图表配置

echarts提供了获取图表的api

echarts通过服务器后端上传echarts图到服务器

这时就可以将echarts图片写入到word中了

将echarts导入到word中相关推荐

最新文章

热门文章