Echarts3之html2canvas下载图表(后续生成PDF)

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();
%>

<html>

<head>
<meta charset="UTF-8">
<title>provincetitle>
<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 + " :
"
+ 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

你可能感兴趣的:(Echarts)