欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

springdatajpa+Echarts或Highcharts 数据统计

程序员文章站 2022-04-15 23:44:17
...

springdatajpa+Echarts 数据统计

注意

模板不一样数据的显示方法也不一样，我这里卡了好久，个多小时都有，
springdatajpa+Echarts或Highcharts 数据统计
springdatajpa+Echarts或Highcharts 数据统计
就这个鬼问题注意一下就行，气死我了，小编我也是有脾气的人！

  • Highcharts
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

Echart ： echarts.min.js 需下载。
下载地址： https://www.7down.com/soft/214165.html
springdatajpa+Echarts或Highcharts 数据统计
springdatajpa+Echarts或Highcharts 数据统计
下载后放入static包下，然后解决静态资源拦截问题，配置config类，下面有些

 <script src="js/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

1 数据库

springdatajpa+Echarts或Highcharts 数据统计

2 新建springboot项目

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>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.1.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.sid.spark</groupId>
	<artifactId>webspark</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>webspark</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</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>

		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.2.1</version>
			<scope>provided</scope>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.47</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/taglibs/standard -->
		<dependency>
			<groupId>taglibs</groupId>
			<artifactId>standard</artifactId>
			<version>1.1.2</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>

		<!--lombook-->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
		<!-- spring-boot-devtools热启动依赖包 start-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
			<scope>true</scope>
		</dependency>
		<!-- spring-boot-devtools热启动依赖包 end-->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>5.1.2</version>
		</dependency>
		<!-- 用于 JSON API 文档的生成-->
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger2</artifactId>
			<version>2.7.0</version>
		</dependency>
		<!--用于文档界面展示-->
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger-ui</artifactId>
			<version>2.7.0</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

yml文件

server:
  port: 8080
spring:
  datasource:
    name: test
    url: jdbc:mysql://localhost:3306/good?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver

结构图

springdatajpa+Echarts或Highcharts 数据统计

实体类

package com.sid.spark.webspark.entity;

import lombok.Data;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;
import java.io.Serializable;

@Data
@Entity
@Table(name = "goods")
public class goods implements Serializable {
    @Id
    @Column(name = "id", unique = true, nullable = false)
    public int id;
    @Column(name = "name", nullable = false)
    public String name;
    @Column(name = "repertory", nullable = false)
    public int repertory;
    @Column(name = "salecount", nullable = false)
    public int salecount;
}

dao层

package com.sid.spark.webspark.dao;

import com.sid.spark.webspark.entity.goods;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface goodsDao extends JpaRepository<goods,Integer>{

}

service层

package com.sid.spark.webspark.service;

import com.sid.spark.webspark.dao.goodsDao;
import com.sid.spark.webspark.entity.goods;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class goodsService {
    @Autowired
    public  goodsDao goodsDao;

    public List<goods> findall(){
       return goodsDao.findAll();
    }
}

controller层

package com.sid.spark.webspark.controller;

import com.sid.spark.webspark.entity.goods;
import com.sid.spark.webspark.service.goodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class goodsController {
@Autowired
public goodsService goodsService;
    /**
     * 查询出数据库数据
     */
    @RequestMapping("/findall")
    @ResponseBody
    public List<goods> findall() {
        return goodsService.findall();
    }

    /**
     * 销量界面
     *
     * @return
     */

    @RequestMapping("/gototest")
    public String gototest() {
        return "test";
    }

    /**
     * 库存界面
     *
     * @return
     */
    @RequestMapping("/gotoindex")
    public String gotoindex() {
        return "index";
    }
}

静态资源访问

Configuration

package com.sid.spark.webspark.config;

import org.springframework.beans.factory.annotation.Configurable;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configurable
public class Configuration implements WebMvcConfigurer {
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

页面

index.html Highcharts 基本饼图

<html>
<head>
    <meta charset="UTF-8" />
    <title>Highcharts 基本饼图</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<a href="/gototest">库存页面</a>
<script language="JavaScript">
    $(document).ready(function() {
        var data = [

        ];    //data是饼图显示数据
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        $.ajax({
            url: "findall",   //调用查询全部接口
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        //插入数据变成[{name:...,value:....},{name:...,value:....}]格式
                        var s=result[i].name;
                        var w=result[i].salecount;
                        data[i] = [s,w]
                    }
                    console.log(data)
                    // 主标题
                    var title = {
                        text: '2014 年各浏览器市场占有比例'
                    };
                    // 提示
                    var tooltip = {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    };
                    var plotOptions = {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    };
                    // 数据
                    var series= [{
                        // 描述数据类型为饼图
                        type: 'pie',
                        name: 'Browser share',
                        data: data
                    }];

                    var json = {};
                    json.chart = chart;
                    json.title = title;
                    json.tooltip = tooltip;
                    json.series = series;
                    json.plotOptions = plotOptions;
                    $('#container').highcharts(json);

                }
            },
        })


    });
</script>
</body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main"
     style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;">
</div>
<a href="/gotoindex">销量页面</a>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));//main是<div id="main">
    $.ajax({
        url: "findall",   //调用查询全部接口
        success: function (data) {
            // 指定图表的配置项和数据
            var name = [];   //商品名称
            var repertoryNum = [];   //库存量
            for (var i = 0; i < data.length; i++) {
                name[i] = data[i].name;
                repertoryNum[i] = data[i].repertory;
            }
            var option = {
                title: {
                    text: 'spark商品库存树状图'
                },
                tooltip: {},
                legend: {
                    data: ["库存"]
                },
                xAxis: {
                    data: name
                },
                yAxis: {},
                series: [{
                    name: '库存',
                    type: 'bar',
                    data: repertoryNum
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    })


</script>
</body>
</html>

springdatajpa+Echarts或Highcharts 数据统计
springdatajpa+Echarts或Highcharts 数据统计

完成

相关标签： springdatajpa Echarts

上一篇： SpringDataJpa——JpaRepository增删改查

下一篇： SpringDataJpa--jpa基础--1

推荐阅读