Echarts3之html2canvas下载图表（后续生成PDF）

来源：互联网发布：淘宝上购买森海塞尔编辑：程序博客网时间：2024/06/09 20:53

Echarts提供了下载图表的功能，但是仅仅满足客户端下载到本地，不经过项目本身的后台，对于高度自定义是不能满足的。
首先页面引入html2canvas插件。

<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

然后引入Echarts。对应自己的echarts.js路径

<script src="<%=base %>/js/echart/echarts3.js" type="text/javascript" charset="utf-8"></script>

index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%><%--引入JSTL核心标签库 --%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%String base = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath();%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>province</title><link rel="stylesheet" type="text/css" href="<%=base %>/css/bootstrap/bootstrap.min.css" /></head><body>    <div class="container">        <div id="pie" style="width: 800px; height: 500px; float: center;"></div>    </div>    <form action="uploadimg" method="post" id = "form">                <input type="submit" value=""/>    </form>    <script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>    <script src="<%=base %>/js/echart/echarts3.js" type="text/javascript" charset="utf-8"></script>    <script src="<%=base %>/js/echart/province.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        var Echart_01 = echarts.init(document.getElementById("pie"));        var legend_data = [ '短暂性脑缺血发作', '脑梗死', '脑内出血', '蛛网膜下腔出血', '其他未能分类的卒中' ];        var data = [ {value : 7,name : '脑梗死'}, {value : 4,  name : '短暂性脑缺血发作'}, {value : 35,    name : '脑内出血'}, {value : 53,name : '蛛网膜下腔出血'}, {value : 83, name : '其他未能分类的卒中'} ];              var option = pie(legend_data, data);        Echart_01.setOption(option);        function convertCanvasToImage(canvas) {            var image = new Image();            image.src = canvas.toDataURL("image/jpeg");            return image;        }        setTimeout(function() {            html2canvas(document.getElementById('pie'), {                onrendered : function(canvas) {                    setTimeout(function() {                        var img = convertCanvasToImage(canvas);                        var input = document.createElement('input');                        var form = document.getElementById('form');                        console.log(form);                        input.setAttribute('type', 'hidden');                        input.setAttribute('name', 'data');                        input.setAttribute('value', img.src);                        form.appendChild(input1);                        form.submit();                    }, 2000)                }            });        }, 2000);    </script></body></html>

然后是province.js代码：

function pie(legend_data,data) {    var option = {        tooltip: {            formatter: function(params, ticket, callback) {                return params.name + " :<br/> " + params.value + " (" + params.percent + "%)";            }        },        legend: {            orient: 'vertical',            right: 'right',            data : legend_data        },        series: [{            name: '病例数量',            type: 'pie',            radius: '50%',            center: ['40%', '60%'],            data: data,            itemStyle: {                normal: {                    label: {                        formatter: function(params, ticket, callback) {                            return params.name + ":\r\n" + params.value + " (" + params.percent + "%)";                        }                    },                }            }        }]    };    return option;}

Controller代码：

@RequestMapping(value = "uploadimg", method = RequestMethod.GET)    public String upload1(HttpServletRequest request, HttpServletResponse response) {        System.err.println("test");        return "test";    }    @RequestMapping(value = "uploadimg", method = RequestMethod.POST)    @ResponseBody    public String upload(@RequestParam("data") String data, HttpServletRequest request, HttpServletResponse response) {        System.err.println(data);        PDFUtils.getImgPath(data);        return "success";    }

PDFUtils.java

public class PDFUtils {    public static String getImgPath(String data) {        // 图片输出路径        String imgFilePath = null;        try {            Base64 base64 = new Base64();            // base64编码解码            byte[] k = base64.decode(data.substring("data:image/jpeg;base64,".length()));            InputStream is = new ByteArrayInputStream(k);            String fileName = UUID.randomUUID().toString();            //String pdfFilePath = ShopApplicationResource.shopResource.getString("pdftempfiles.file.root");            String pdfFilePath = "D://test//echarts//";            imgFilePath = pdfFilePath + fileName + ".jpg";            double ratio = 1.0;            BufferedImage image = ImageIO.read(is);            // 设置图片是否缩放            int newWidth = (int) (image.getWidth() * ratio);            int newHeight = (int) (image.getHeight() * ratio);            Image newimage = image.getScaledInstance(newWidth, newHeight, Image.SCALE_SMOOTH);            BufferedImage tag = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);            Graphics g = tag.getGraphics();            g.drawImage(newimage, 0, 0, null);            g.dispose();            // 使用io将图片写入文件中            ImageIO.write(tag, "jpg", new File(imgFilePath));        } catch (IOException e) {            e.printStackTrace();        }        return imgFilePath;    }}

访问uploadimg首先出现应该显示的图表，4秒后跳转’success’
到D盘test文件夹下的echarts文件夹下查看下载好的图片。
OK

0 0