echarts圖表如何導(dǎo)出到excel中

本篇內(nèi)容介紹了“echarts圖表如何導(dǎo)出到excel中”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、頁(yè)面部分

<div>
    <button onclick="export1()"  value="導(dǎo)出">導(dǎo)出</button> </div>
    <div id="app" >
    </div>
</body>

2、js部分

2.1、echarts生成圖表

<!-- 引入組件庫(kù) -->
<script src="../js/echarts.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var myChart = echarts.init(document.getElementById('app'));

    // 指定圖表的配置項(xiàng)和數(shù)據(jù)
    var option = {
        title: {
            text: 'ECharts 入門(mén)示例'
        },
        tooltip: {},
        legend: {
            data:['銷(xiāo)量','銷(xiāo)售額']
        },
        xAxis: {
            data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子"]
        },
        yAxis: {},
        series: [
            {
                name: '銷(xiāo)量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,100]
            },
            {
                name: '銷(xiāo)售額',
                type: 'bar',
                data: [50, 200, 360, 100, 100, 200,1000]
            }]
    };
    // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
    myChart.setOption(option);
</script>

2.2、把echarts生成的圖表獲取圖片base64編碼并提交到后臺(tái)

    /**
     * 導(dǎo)出excel中
     */
    function export1() {
        //獲取echarts圖片的base64編碼字符串 pixelRatio：圖片精度  backgroundColor：背景顏色
       let imgURL=myChart.getDataURL({
            pixelRatio: 2,
            backgroundColor: '#fff'
        });
        //后臺(tái)請(qǐng)求：傳遞圖表base64編碼字符串
        axios.post("/export.do",{'imagesBase64':imgURL}).then((res)=>{
            if(res.data.flag){
                //根據(jù)返回路徑下載文件
                window.location.href=res.data.message;
            }else{
                alert("導(dǎo)出出錯(cuò)")
            }
        })

    }

注：請(qǐng)求也可以轉(zhuǎn)成ajax，此處使用axios

3、后端poi導(dǎo)出部分

注：后端使用springmvc+poi

  @PostMapping("export")
    public Result ex(@RequestBody Map<String,String> map,HttpServletRequest request){
        //創(chuàng)建工作簿
        XSSFWorkbook workbook = new XSSFWorkbook();
        //工作表
        XSSFSheet sheet = workbook.createSheet("echarts圖表");

        //獲取前端圖片base64編碼
        String base64 = map.get("imagesBase64");
        //去掉標(biāo)識(shí)22位，解碼
        byte[] img=decode(base64.substring(22));
        //在工作表中畫(huà)圖
        XSSFDrawing xssfDrawing = sheet.createDrawingPatriarch();
        //畫(huà)圖位置，前四個(gè)參數(shù)： 單元格位置，距離left，top，right，bottom的像素距離，
        //后四個(gè)參數(shù)是: 前兩個(gè)表示 左上角 列號(hào)、行號(hào)，  右下角 列號(hào)、行號(hào)
        XSSFClientAnchor clientAnchor=new XSSFClientAnchor(0,0,0,0,0,0,10,20);
        //根據(jù)指定位置來(lái)畫(huà)圖
        xssfDrawing.createPicture(clientAnchor,workbook.addPicture(img,XSSFWorkbook.PICTURE_TYPE_PNG));
        //獲取模板位置
        String templatesPath = request.getSession().getServletContext().getRealPath("templates")+File.separator+"haha.xlsx";
        File file = new File(templatesPath);
        if(file.exists()){
            file.delete();
        }
        //輸出到模板中
        BufferedOutputStream out=null;
        try {
            out=new BufferedOutputStream(new FileOutputStream(templatesPath));
            workbook.write(out);
            out.flush();
        }catch (Exception e){
            e.printStackTrace();
            return Result.fail("導(dǎo)出失敗");
        }finally {
            //釋放資源
            try {
                if(out!=null){
                   out.close();
                }
                if(workbook!=null){
                    workbook.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        //返回模板位置
        String s = request.getContextPath() + File.separator + "templates" + File.separator + "haha.xlsx";
        return Result.success(s);
    }

“echarts圖表如何導(dǎo)出到excel中”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！