springboot中echarts图形报表的简单使用

最新推荐文章于 2024-07-26 06:15:00 发布

楚风岸影

最新推荐文章于 2024-07-26 06:15:00 发布

阅读量910

点赞数

文章标签： echarts spring boot

本文链接：https://blog.csdn.net/lcb9354/article/details/120100853

版权

注意：

一、要导入对应的echarts.js文件

①点击https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
或
②点击https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js另存为echarts.js文件
③启动类记得加上@MapperScan(basePackages = “com.cfay.dao”)
④js的路径要注意，不能加上static，因为thymeleaf会自动加上，所以只要…/js/echarts.js这样就可以了

1、项目目录：

在这里插入图片描述

2、效果图

在这里插入图片描述

3、实现

WebConfig

package com.cfay.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    /**
     * 页面跳转映射
     * @param registry
     */
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index").setViewName("index");
    }
}

GoodsController

package com.cfay.controller;

import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.cfay.pojo.Goods;
import com.cfay.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class GoodsController {
    @Autowired private GoodsService goodsService;
    @RequestMapping("/findByCondition")
    public String findByCondition(){
        Goods goods = new Goods();
        goods.setGoodsId(1);
        goods = goodsService.getOne(Wrappers.query(goods));
        System.out.println(goods);
        return "index";
    }

    //查询所有商品信息
    @RequestMapping("/findAll")
    public String findAll(Model model){
        List<Goods> list = goodsService.list();
        String slist = JSON.toJSONString(list);
        model.addAttribute("slist",slist);
        return "main";
    }
}

GoodsDao

package com.cfay.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.cfay.pojo.Goods;

public interface GoodsDao extends BaseMapper<Goods> {
}

Goods

package com.cfay.pojo;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

import java.io.Serializable;

@Data
@ToString
@Getter
@Setter
@TableName("t_goods")
public class Goods implements Serializable {
    @TableId("goodsId")
    private Integer goodsId;
    @TableField("goodsName")
    private String goodsName;
    @TableField("goodsTotal")
    private String goodsTotal;
}

GoodsService

package com.cfay.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.cfay.pojo.Goods;

public interface GoodsService extends IService<Goods>{
}

GoodsServiceImpl

package com.cfay.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.cfay.dao.GoodsDao;
import com.cfay.pojo.Goods;
import org.springframework.stereotype.Service;

@Service
public class GoodsServiceImpl extends ServiceImpl<GoodsDao, Goods> implements GoodsService {
}

main.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript" th:inline="javascript">
    //获取后台传过来的字符串类型的json数据
    var list = [[${slist}]];
    //将string类型的json数组变为json类型的数组
    var jsonArray = JSON.parse(list);
    //商品名称
    var goodsName = [];
    //商品价格
    var goodsPrice = [];
    //商品信息(json类型的数组)
    var goodsObjArray = [];
    for (var i = 0; i < jsonArray.length; i++) {
        var goodsObj = {};
        goodsName.push(jsonArray[i].goodsName);
        goodsPrice.push(jsonArray[i].goodsTotal);
        goodsObj.name = jsonArray[i].goodsName;
        goodsObj.value = jsonArray[i].goodsTotal;
        goodsObjArray.push(goodsObj)
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '商品信息'
        },
        tooltip: {},
        legend: {
            data: ['商品名称']
        },
        xAxis: {
            data: goodsName
        },
        yAxis: {},
        series: [
            {
                name: '商品价格',
                type: 'bar',
                data: goodsPrice
            }
        ]
    };
    option1 = {
        title: {
            text: '商品信息的展示',
            left: 'center',
            top: 'center'
        },
        series: [
            {
                type: 'pie',
                data: goodsObjArray,
                radius: ['20%', '70%'],
                itemStyle: {
                    normal:{
                        label:{
                            show: true,
                            formatter: '{b} : {c} ({d}%)'
                        },
                        labelLine :{show:true}
                    }
                }
            }
        ]

        //南丁格尔图（玫瑰图）
        ,
        roseType: 'area'
    };

    option2 = {
        title: {
            text:"商品信息散点图",
            left: 'left',
            top: 'top'
        },
        xAxis: {
            data: goodsName
        },
        yAxis: {},
        series: [
            {
                type: 'scatter',
                data: goodsPrice
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart1.setOption(option1);
    myChart2.setOption(option2);
</script>
</body>
</html>

application.properties

在这里插入代码片# 应用名称
spring.application.name=springboot-echarts
# 应用服务 WEB 访问端口
server.port=8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.cfay.mybatis.entity
# 数据库驱动：
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据源名称
spring.datasource.name=defaultDataSource
# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/testdemo?serverTimezone=UTC&characterEncoding=utf8
# 数据库用户名&密码：
spring.datasource.username=root
spring.datasource.password=123456
# THYMELEAF (ThymeleafAutoConfiguration)
# 开启模板缓存（默认值： true ）
spring.thymeleaf.cache=false
# 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
# 检查模板位置是否正确（默认值 :true ）
spring.thymeleaf.check-template-location=true
#Content-Type 的值（默认值： text/html ）
spring.thymeleaf.content-type=text/html
# 开启 MVC Thymeleaf 视图解析（默认值： true ）
spring.thymeleaf.enabled=true
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表，⽤逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值： HTML5)
spring.thymeleaf.mode=HTML5
# 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
spring.thymeleaf.suffix=.html
#启用驼峰
mybatis.configuration.map-underscore-to-camel-case=true

#控制台开启sql打印
logging.level.com.cfay.dao=debug

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.cfay</groupId>
    <artifactId>springboot-echarts</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-echarts</name>
    <description>echarts实现商品数据的展示</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.68</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.cfay.SpringbootEchartsApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

建表和表数据

/*
Navicat MySQL Data Transfer

Source Server         : myTest
Source Server Version : 50540
Source Host           : localhost:3306
Source Database       : testdemo

Target Server Type    : MYSQL
Target Server Version : 50540
File Encoding         : 65001

Date: 2021-09-04 16:02:40
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `t_goods`
-- ----------------------------
DROP TABLE IF EXISTS `t_goods`;
CREATE TABLE `t_goods` (
  `goodsId` int(11) NOT NULL AUTO_INCREMENT,
  `goodsName` varchar(100) DEFAULT NULL,
  `goodsTotal` int(11) DEFAULT NULL,
  PRIMARY KEY (`goodsId`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4;

-- ----------------------------
-- Records of t_goods
-- ----------------------------
INSERT INTO `t_goods` VALUES ('1', '三星', '100');
INSERT INTO `t_goods` VALUES ('2', '苹果', '49');
INSERT INTO `t_goods` VALUES ('3', '华为', '250');
INSERT INTO `t_goods` VALUES ('4', '小米', '79');
INSERT INTO `t_goods` VALUES ('5', '魅族', '50');
INSERT INTO `t_goods` VALUES ('6', '锤子', '30');
INSERT INTO `t_goods` VALUES ('7', 'vivo', '163');

楚风岸影

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot中echarts图形报表的简单使用

注意：一、要导入对应的echarts.js文件①点击https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。或②点击https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js另存为echarts.js文件③启动类记得加上@MapperScan(basePackages = “com.cfay.dao”)1、项目目录：2
复制链接

扫一扫