如何用SpringBoot+Thymeleaf+Echart生成好看的柱状图，折线图，饼状图

最新推荐文章于 2024-06-28 10:33:43 发布

stalin_

最新推荐文章于 2024-06-28 10:33:43 发布

阅读量2.4k

点赞数 1

分类专栏：前端文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/stalin_/article/details/129304161

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、前言

上篇文章我们用POI技术读取Excel并生成了相应的图表。但是实际的效果比较一般，因为本身WPS生成图表就比较简单，如果用程序操作远比人工耗时费力，效果远不如一些付费模板。如下图所示：
在这里插入图片描述
然后我就想到前端不是有一个简单易上手的Echart.js是专门做图表。所以就用它去做图表生成，后台数据解析还是用springBoot+Ajax+POI工具类。这样实现的效果就会好看和实用很多。来看一下效果图。

二、准备数据

1、首先新建一个xls统计表。
在这里插入图片描述
2、数据填充

手机型号	测评分数	销售数量
OPPO Reno9 Pro+ 5G	1210365	7523423
Xiaomi 12 Pro天现版	1187600	343242
ROG游戏手机6 天现至尊版	1187449	535362
一加 Ace Pro	1183234	83234
小米12S Pro	1176850	2346625
Redmi K50 至尊版	1172517	4324324
Xiaomi 12S	1164309	3424234
联想救者 Y90	1164235	234434
小米MIX FOLD 2	1164109	32423432
iQo0 10 Pro	1151258	9403424

在这里插入图片描述

三、前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!--  <script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>-->
    <!-- 引入 echarts.js -->
    <!--  <script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>-->
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery-3.6.1.min.js"></script>

</head>
<body>
<div id="title" style="width:1200px;height:100px"></div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="line" style="width: 1200px;height:800px;"></div>
<div id="pie" style="width: 1200px;height:800px;"></div>
<div id="bak" style="width:200px;height:100px"></div>
<div id="bar" style="width: 1200px;height:800px;"></div>

<script type="text/javascript">
    var title = echarts.init(document.getElementById('title'));
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    var pieChart = echarts.init(document.getElementById('pie'));
    var lineChart = echarts.init(document.getElementById('line'));


    var titleOption = {
        graphic: {
            elements: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '手机性能统计图',
                        fontSize: 50,
                        fontWeight: 'bold',
                        lineDash: [0, 200],
                        lineDashOffset: 0,
                        fill: 'transparent',
                        stroke: '#000',
                        lineWidth: 1
                    },
                    keyframeAnimation: {
                        duration: 3000,
                        loop: true,
                        keyframes: [
                            {
                                percent: 0.7,
                                style: {
                                    fill: 'transparent',
                                    lineDashOffset: 200,
                                    lineDash: [200, 0]
                                }
                            },
                            {
                                // Stop for a while.
                                percent: 0.8,
                                style: {
                                    fill: 'transparent'
                                }
                            },
                            {
                                percent: 1,
                                style: {
                                    fill: 'gray'
                                }
                            }
                        ]
                    }
                }
            ]
        }
    };

$.ajax({
    type:"post",
    async:true,
    url:"/getData",
    dataType:"json",
    success:function (data) {
        if (data) {
            // 指定图表的配置项和数据
            var barOption = {
                title: {
                    text: '手机性能柱状统计图'
                },
                tooltip: {},
                legend: {
                    data: ['手机性能柱状统计图']
                },
                xAxis: {
                    data: data[0].key,
                },
                yAxis: {},
                color: '#fac858',
                series: [
                    {
                        name: '评测分数',
                        type: 'bar',
                        data: data[0].value,
                    }
                ]
            };


            // 指定图表的配置项和数据
            var lineOption = {
                title: {
                    text: '折线柱状统计图'
                },
                tooltip: {},
                legend: {
                    data: ['品牌销量', '品牌评测分数']
                },
                xAxis: {
                    data: data[0].key,
                },
                yAxis: {type: "log",},
                series: [
                    {
                        name: '品牌销量',
                        type: 'line',
                        data: data[1].value
                    }, {
                        name: '品牌评测分数',
                        type: 'line',
                        data: data[0].value
                    }
                ]
            };

            var pieOption = {
                title: {
                    text: '品牌销量占比饼状图'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '85%',
                    left: 'center'
                },
                series: [
                    {
                        name: '品牌销量占比饼状图',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data[2]
                    }
                ]
            };
            title.setOption(titleOption);
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(barOption);
            lineChart.setOption(lineOption);
            pieChart.setOption(pieOption);
        }
    },
    error:function (errorMsg) {
        alert("图表请求数据失败！");
        myChart.hideLoading();
        totalChart.hideLoading();
        lineChart.hideLoading();
        pieChart.hideLoading();
    }
});
</script>
</body>
</html>

其中需要注意的是js依赖文件可以本地下载好引用本地。–适用于内网
或者将注释打开，直接从互联网依赖。–适用于外网
在这里插入图片描述
使用div布局，绑定各组件变量

标题组件定义

ajax异步请求及组件定义

绑定组件及ajax请求失败的处理方式。

四、后端代码

还是创建一个springboot功能。

1、配置文件application.yaml

server:
  port: 9999
resources:
  static-locations: classpath:/templates/, classpath:/static/
thymeleaf:
  prefix: classpath:/templates/ #thģ������·��
  suffix: .html
  mode: HTML5
  encoding: UTF-8
  cache: false

2、pom依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.icbc</groupId>
	<artifactId>echartdemo</artifactId>
	<version>1.0-SNAPSHOT</version>

	<name>boottest</name>
	<!-- FIXME change it to the project's website -->
	<url>http://www.example.com</url>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.7.RELEASE</version>
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<maven.compiler.source>1.7</maven.compiler.source>
		<maven.compiler.target>1.7</maven.compiler.target>
		<poi-version>3.11</poi-version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.lucee</groupId>
			<artifactId>jsch</artifactId>
			<version>0.1.53</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>1.7.25</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-log4j12 -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>1.7.25</version>
			<!-- <scope>test</scope> -->
		</dependency>
		<dependency>
			<groupId>org.apache.commons</groupId>
			<artifactId>commons-lang3</artifactId>
			<version>3.11</version>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>1.14</version>
		</dependency>

		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi-ooxml</artifactId>
			<version>4.1.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi-ooxml-schemas</artifactId>
			<version>4.1.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi</artifactId>
			<version>4.1.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi-scratchpad</artifactId>
			<version>4.1.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlbeans</groupId>
			<artifactId>xmlbeans</artifactId>
			<version>3.1.0</version>
		</dependency>
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>ooxml-schemas</artifactId>
			<version>1.4</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.36</version>
		</dependency>

	</dependencies>

	<build>
		<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
			<plugins>
				<!-- clean lifecycle, see https://maven.apache.org/ref/current/maven-core/lifecycles.html#clean_Lifecycle -->
				<plugin>
					<artifactId>maven-clean-plugin</artifactId>
					<version>3.1.0</version>
				</plugin>
				<!-- default lifecycle, jar packaging: see https://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_jar_packaging -->
				<plugin>
					<artifactId>maven-resources-plugin</artifactId>
					<version>3.0.2</version>
				</plugin>
				<plugin>
					<artifactId>maven-compiler-plugin</artifactId>
					<version>3.8.0</version>
				</plugin>
				<plugin>
					<artifactId>maven-surefire-plugin</artifactId>
					<version>2.22.1</version>
				</plugin>
				<plugin>
					<artifactId>maven-jar-plugin</artifactId>
					<version>3.0.2</version>
				</plugin>
				<plugin>
					<artifactId>maven-install-plugin</artifactId>
					<version>2.5.2</version>
				</plugin>
				<plugin>
					<artifactId>maven-deploy-plugin</artifactId>
					<version>2.8.2</version>
				</plugin>
				<!-- site lifecycle, see https://maven.apache.org/ref/current/maven-core/lifecycles.html#site_Lifecycle -->
				<plugin>
					<artifactId>maven-site-plugin</artifactId>
					<version>3.7.1</version>
				</plugin>
				<plugin>
					<artifactId>maven-project-info-reports-plugin</artifactId>
					<version>3.0.0</version>
				</plugin>
			</plugins>
		</pluginManagement>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

3、在resource下创建templates目录，并将html放入

在这里插入图片描述

4、启动类

package com.icbc.echartdemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class EchartdemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(EchartdemoApplication.class, args);
	}

}

5、excel数据处理工具类

package com.icbc.echartdemo;


import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.CellType;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.xddf.usermodel.PresetColor;
import org.apache.poi.xddf.usermodel.XDDFColor;
import org.apache.poi.xddf.usermodel.XDDFSolidFillProperties;
import org.apache.poi.xddf.usermodel.chart.*;
import org.apache.poi.xssf.usermodel.*;
import org.openxmlformats.schemas.drawingml.x2006.chart.CTDLbls;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.*;

/**
 * ClassName: ExcelChartUtils <br/>
 * Description: 导出excel中绘制图表<br/>
 * date: 2022/11/17 11:39<br/>
 *
 * @author DELL<br />
 * @since JDK 1.8
 */
public class ExcelChartUtils2 {

    public static final String READ_FILE_PATH = "C:\\Users\\Administrator\\Desktop\\统计.xls";

    public static void main(String[] args) throws IOException {
        ExcelChartUtils2 excelChartUtils=new ExcelChartUtils2();
        XSSFWorkbook wb = new XSSFWorkbook();
//        String sheetName = "当月业务量统计";
//        String sheetName2 = "本周高频报错业务统计";
//        String sheetName3 = "本周高频报错占比统计";
//        excelChartUtils.exportLineDiagram(wb,sheetName2);
//        excelChartUtils.exportPieDirgram(wb,sheetName3);
//        excelChartUtils.exportBarDiagram(wb,sheetName);

    }

    public void exportPieDirgram(XSSFWorkbook wb,String sheetName){
        XSSFSheet sheet = wb.createSheet(sheetName);
        // 创建一个画布
        XSSFDrawing drawing = sheet.createDrawingPatriarch();
        // 前四个默认0，[0,4]：从0列4行开始;[7,20]:到7列20行结束
        // 默认宽度(14-8)*12
        XSSFClientAnchor anchor = drawing.createAnchor(0, 0, 0, 0, 0, 0, 30, 40);
        // 创建一个chart对象
        XSSFChart chart = drawing.createChart(anchor);
        // 标题
        chart.setTitleText("高频报错占比统计");
        // 标题是否覆盖图表
        chart.setTitleOverlay(false);

        // 图例位置
        XDDFChartLegend legend = chart.getOrAddLegend();
        legend.setPosition(LegendPosition.TOP_RIGHT);

        //解析数据
        Map<String, List<String>> dataMap = ExcelChartUtils2.getData(READ_FILE_PATH,3,0,6);;
        List<String> keylist = dataMap.get("key");
        List<String> valueList = dataMap.get("value");
        List<Integer> vList = new ArrayList<>();
        for(int i = 0;i<valueList.size();i++){
            if(valueList.get(i).isEmpty()){
                vList.add(0);
            }else{
                vList.add(Integer.valueOf(valueList.get(i).split("\\.")[0]));
            }
        }
        //XDDFDataSource<String> countries = XDDFDataSourcesFactory.fromStringCellRange(sheet, new CellRangeAddress(0, 0, 0, 6));//从指定表格中的位置上获取对应数据
        XDDFCategoryDataSource countries = XDDFDataSourcesFactory.fromArray(keylist.toArray(new String[keylist.size()]));
        // 数据1，单元格范围位置[1, 0]到[1, 6]
        // XDDFNumericalDataSource<Double> area = XDDFDataSourcesFactory.fromNumericCellRange(sheet, new CellRangeAddress(1, 1, 0, 6));
        XDDFNumericalDataSource<Integer> area = XDDFDataSourcesFactory.fromArray(vList.toArray(new Integer[vList.size()]));
        // XDDFChartData data = chart.createData(ChartTypes.PIE3D, null, null);
        XDDFChartData data = chart.createData(ChartTypes.PIE, null, null);
        // 设置为可变颜色
        data.setVaryColors(true);
        // 图表加载数据
        data.addSeries(countries, area);

        // 绘制
        chart.plot(data);
        CTDLbls dLbls = chart.getCTChart().getPlotArea().getPieChartArray(0).getSerArray(0).addNewDLbls();
        dLbls.addNewShowVal().setVal(false);
        dLbls.addNewShowLegendKey().setVal(false);
        dLbls.addNewShowCatName().setVal(true);// 类别名称
        dLbls.addNewShowSerName().setVal(false);
        dLbls.addNewShowPercent().setVal(true);// 百分比
        dLbls.addNewShowLeaderLines().setVal(true);// 引导线
        dLbls.setSeparator("\n");// 分隔符为分行符
        dLbls.addNewDLblPos().setVal(org.openxmlformats.schemas.drawingml.x2006.chart.STDLblPos.Enum.forString("inEnd"));// 数据标签内

        // 打印图表的xml
        // System.out.println(chart.getCTChart());

    }

    public void exportLineDiagram(XSSFWorkbook wb,String sheetName) throws IOException {
        FileOutputStream fileOut = null;
            XSSFSheet sheet = wb.createSheet(sheetName);
            // 创建一个画布
            XSSFDrawing drawing = sheet.createDrawingPatriarch();
            // 前四个默认0，[0,5]：从0列5行开始;[7,26]:到7列26行结束
            // 默认宽度(14-8)*12
            XSSFClientAnchor anchor = drawing.createAnchor(0, 0, 0, 0, 0, 0, 30, 40);
            // 创建一个chart对象
            XSSFChart chart = drawing.createChart(anchor);
            // 标题
            chart.setTitleText("高频报错业务统计");
            // 标题覆盖
            chart.setTitleOverlay(false);

            // 图例位置
            XDDFChartLegend legend = chart.getOrAddLegend();
            legend.setPosition(LegendPosition.TOP);

            // 分类轴标(X轴),标题位置
            XDDFCategoryAxis bottomAxis = chart.createCategoryAxis(AxisPosition.LEFT);
            //    bottomAxis.setTitle("国家");
            // 值(Y轴)轴,标题位置
            XDDFValueAxis leftAxis = chart.createValueAxis(AxisPosition.BOTTOM);
            //  leftAxis.setTitle("面积大小");
            Map<String, List<String>> dataMap = ExcelChartUtils2.getData(READ_FILE_PATH,3,2,6);
            List<String> keylist = dataMap.get("key");
            List<String> valueList = dataMap.get("value");
            List<Integer> vList = new ArrayList<>();
            for(int i = 0;i<valueList.size();i++){
                if(valueList.get(i).isEmpty()){
                    vList.add(0);
                }else{
                    vList.add(Integer.valueOf(valueList.get(i).split("\\.")[0]));
                }
            }
//            keylist.remove(0);
//            valueList.remove(0);
            // CellRangeAddress(起始行号，终止行号， 起始列号，终止列号）
            // 分类轴标(X轴)数据，单元格范围位置[0, 0]到[0, 6]
            //XDDFDataSource<String> countries = XDDFDataSourcesFactory.fromStringCellRange(sheet, new CellRangeAddress(0, 0, 0, 6));//从指定表格中的位置上获取对应数据
            XDDFCategoryDataSource countries = XDDFDataSourcesFactory.fromArray(keylist.toArray(new String[keylist.size()]));
            // 数据1，单元格范围位置[1, 0]到[1, 6]
            // XDDFNumericalDataSource<Double> area = XDDFDataSourcesFactory.fromNumericCellRange(sheet, new CellRangeAddress(1, 1, 0, 6));
            XDDFNumericalDataSource<Integer> area = XDDFDataSourcesFactory.fromArray(vList.toArray(new Integer[vList.size()]));

            // bar：条形图，
            XDDFLineChartData bar = (XDDFLineChartData) chart.createData(ChartTypes.LINE, bottomAxis, leftAxis);

            leftAxis.setCrossBetween(AxisCrossBetween.BETWEEN);
            // 设置为可变颜色
            bar.setVaryColors(false);// 如果需要设置成自己想要的颜色，这里可变颜色要设置成false

            // 图表加载数据，条形图
            XDDFLineChartData.Series series1 = (XDDFLineChartData.Series) bar.addSeries(countries, area);
            // 条形图例标题
            series1.setTitle("业务量统计", null);
            XDDFSolidFillProperties fill = new XDDFSolidFillProperties(XDDFColor.from(PresetColor.BLUE));
            // 条形图，填充颜色
            series1.setFillProperties(fill);

            // 绘制
            chart.plot(bar);
            // CTBarSer ser = chart.getCTChart().getPlotArea().getBarChartArray(0).getSerArray(0);
            // CTLegend legend2 = chart.getCTChartSpace().getChart().getLegend();//更详细的图例设置

            // 打印图表的xml
            System.out.println(chart.getCTChart());


    }

    public String exportBarDiagram(XSSFWorkbook wb,String sheetName) throws IOException {

        FileOutputStream fileOut = null;
        try {
            XSSFSheet sheet = wb.createSheet(sheetName);
            // 创建一个画布
            XSSFDrawing drawing = sheet.createDrawingPatriarch();
            // 前四个默认0，[0,5]：从0列5行开始;[7,26]:到7列26行结束
            // 默认宽度(14-8)*12
            XSSFClientAnchor anchor = drawing.createAnchor(0, 0, 0, 0, 0, 0, 30, 40);
            // 创建一个chart对象
            XSSFChart chart = drawing.createChart(anchor);
            // 标题
            chart.setTitleText("业务量统计");
            // 标题覆盖
            chart.setTitleOverlay(false);

            // 图例位置
            XDDFChartLegend legend = chart.getOrAddLegend();
            legend.setPosition(LegendPosition.TOP);

            // 分类轴标(X轴),标题位置
            XDDFCategoryAxis bottomAxis = chart.createCategoryAxis(AxisPosition.BOTTOM);
        //    bottomAxis.setTitle("国家");
            // 值(Y轴)轴,标题位置
            XDDFValueAxis leftAxis = chart.createValueAxis(AxisPosition.LEFT);
          //  leftAxis.setTitle("面积大小");
            Map<String, List<String>> dataMap = ExcelChartUtils2.getData(READ_FILE_PATH,4,2,6);
            List<String> keylist = dataMap.get("key");
            List<String> valueList = dataMap.get("value");
            List<Integer> vList = new ArrayList<>();
            for(int i = 0;i<valueList.size();i++){
                if(valueList.get(i).isEmpty()){
                    vList.add(0);
                }else{
                    vList.add(Integer.valueOf(valueList.get(i).split("\\.")[0]));
                }
            }
//            keylist.remove(0);
//            valueList.remove(0);
            // CellRangeAddress(起始行号，终止行号， 起始列号，终止列号）
            // 分类轴标(X轴)数据，单元格范围位置[0, 0]到[0, 6]
            //XDDFDataSource<String> countries = XDDFDataSourcesFactory.fromStringCellRange(sheet, new CellRangeAddress(0, 0, 0, 6));//从指定表格中的位置上获取对应数据
             XDDFCategoryDataSource countries = XDDFDataSourcesFactory.fromArray(keylist.toArray(new String[keylist.size()]));
            // 数据1，单元格范围位置[1, 0]到[1, 6]
           // XDDFNumericalDataSource<Double> area = XDDFDataSourcesFactory.fromNumericCellRange(sheet, new CellRangeAddress(1, 1, 0, 6));
            XDDFNumericalDataSource<Integer> area = XDDFDataSourcesFactory.fromArray(vList.toArray(new Integer[vList.size()]));

            // bar：条形图，
            XDDFBarChartData bar = (XDDFBarChartData) chart.createData(ChartTypes.BAR, bottomAxis, leftAxis);

            leftAxis.setCrossBetween(AxisCrossBetween.BETWEEN);
            // 设置为可变颜色
            bar.setVaryColors(false);// 如果需要设置成自己想要的颜色，这里可变颜色要设置成false
            // 条形图方向，纵向/横向：纵向
            bar.setBarDirection(BarDirection.COL);

            // 图表加载数据，条形图1
            XDDFBarChartData.Series series1 = (XDDFBarChartData.Series) bar.addSeries(countries, area);
            // 条形图例标题
            series1.setTitle("业务量统计", null);
            XDDFSolidFillProperties fill = new XDDFSolidFillProperties(XDDFColor.from(PresetColor.BLUE));
            // 条形图，填充颜色
            series1.setFillProperties(fill);
            // 绘制
            chart.plot(bar);
            // CTBarSer ser = chart.getCTChart().getPlotArea().getBarChartArray(0).getSerArray(0);
            // CTLegend legend2 = chart.getCTChartSpace().getChart().getLegend();//更详细的图例设置

            // 打印图表的xml
            System.out.println(chart.getCTChart());

            // 将输出写入excel文件
           // String filename = "排行榜前七的国家.xlsx";
            //  out = new FileOutputStream(getAbsoluteFile(filename));
            String filename = encodingFilename();
            fileOut = new FileOutputStream("E:\\"+File.separator+filename);
            wb.write(fileOut);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            wb.close();
            if (fileOut != null) {
                fileOut.close();
            }
        }

      return "success";
    }

    public static Map<String,List<String>> getData(String filePath, int sheetIndex,int keyNum,int valueNum){
        Map<String, List<String>> resMap = new HashMap<>();
        FileInputStream fis = null;
        HSSFWorkbook workbook = null;
        List<String> keylist = new ArrayList();
        List<String> valueList = new ArrayList<>();
        try {
            fis = new FileInputStream(filePath);
            workbook = new HSSFWorkbook(fis);
            Sheet sheet = workbook.getSheetAt(sheetIndex);
            Row row;
            Cell cell;
            for (int i = 1; i < sheet.getLastRowNum(); i++) {
                row = sheet.getRow(i);
                cell = row.getCell(keyNum); // 0 is the column index
                System.out.println(cell.getStringCellValue());
                keylist.add(cell.getStringCellValue());
                cell = row.getCell(valueNum); // 0 is the column index
                double numericCellValue;
                if(cell.getCellType().equals(CellType.NUMERIC)){
                    numericCellValue = cell.getNumericCellValue();
                }else {
                     numericCellValue = Double.valueOf(cell.getStringCellValue());
                }
                valueList.add( String.valueOf(numericCellValue) );
            }
            System.out.println("name:"+keylist);
            System.out.println("value:"+valueList);
            workbook.close();
            fis.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
//        resMap.put("key",keylist.toArray(new String[keylist.size()]));
//        resMap.put("value",valueList.toArray(new String[valueList.size()]));
        resMap.put("key",keylist);
        resMap.put("value",valueList);
        return resMap;
    }




    /**
     * 编码文件名
     */
    public String encodingFilename()
    {
        String filename = UUID.randomUUID().toString() + ".xlsx";
        //String filename = "20230222.xlsx";
        return filename;
    }

    /**
     * 获取下载路径
     *
     * @param filename 文件名称
     */
    public  String getAbsoluteFile(String filename)
    {
        String downloadPath = "d://";
        File desc = new File(downloadPath);
        if (!desc.getParentFile().exists())
        {
            desc.getParentFile().mkdirs();
        }
        return downloadPath;
    }
}

6、controller处理类

package com.icbc.echartdemo;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import static com.icbc.echartdemo.ExcelChartUtils2.READ_FILE_PATH;

/**
 * @Author stalin
 * @Desc Echarts入门案例
 */
@RestController
public class EchartController {
    @RequestMapping(value = "/echarts", method = RequestMethod.GET)
    @ResponseBody
    public ModelAndView echarts() {
        //test为在为你的html文件名字,SpringBoot会自动找到这个html文件
        return new ModelAndView("echart");
    }


    @RequestMapping("/getData")
    @ResponseBody
    public JSONArray getData() {
        List<ReportData> dataList = new ArrayList<>();
        Map<java.lang.String, List<java.lang.String>> dataMap = ExcelChartUtils2.getData(READ_FILE_PATH, 0, 0, 1);
        JSONArray arr = new JSONArray();
        JSONObject obj = new JSONObject();
        obj.put("key", dataMap.get("key"));
        obj.put("value", dataMap.get("value"));
        Map<java.lang.String, List<java.lang.String>> dataMap2 = ExcelChartUtils2.getData(READ_FILE_PATH, 0, 0, 2);
        arr.clear();
        arr.add(obj);
        JSONObject obj2 = new JSONObject();
        obj2.put("key", dataMap2.get("key"));
        obj2.put("value", dataMap2.get("value"));
        arr.add(obj2);
        JSONArray array = new JSONArray();
        List<String> key = dataMap.get("key");
        List<String> value = dataMap.get("value");
        for (int i = 0; i < key.size(); i++) {
            JSONObject o = new JSONObject();
            o.put("name", key.get(i));
            o.put("value", value.get(i));
            array.add(o);
        }
        arr.add(array);
        return arr;
    }

//    @RequestMapping(value = "/index", method = RequestMethod.GET)
//    @ResponseBody
//    public ModelAndView index() {
//        //test为在为你的html文件名字,SpringBoot会自动找到这个html文件
//        return new ModelAndView("index");
//    }
}

注意：html名字与要返回的ModelAndView名字要一致。否则后端程序会找不到对应的页面。
在这里插入图片描述
然后启动项目即可。

stalin_

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何用SpringBoot+Thymeleaf+Echart生成好看的柱状图，折线图，饼状图

上篇文章我们用POI技术读取Excel并生成了相应的图表。但是实际的效果比较一般，因为本身WPS生成图表就比较简单，如果用程序操作远比人工耗时费力，效果远不如一些付费模板。如下图所示：然后我就想到前端不是有一个简单易上手的Echart.js是专门做图表。所以就用它去做图表生成，后台数据解析还是用springBoot+Ajax+POI工具类。这样实现的效果就会好看和实用很多。来看一下效果图。1、首先新建一个xls统计表。2、数据填充其中需要注意的是js依赖文件可以本地下载好引用本地。–适用于内
复制链接

扫一扫