SpringData-jpa+highcharts绘制柱形图、饼形图
highcharts
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表
SQL
// An highlighted block
/*
Navicat MySQL Data Transfer
Source Server : localhost_3306
Source Server Version : 50536
Source Host : localhost:3306
Source Database : echarts
Target Server Type : MYSQL
Target Server Version : 50536
File Encoding : 65001
Date: 2020-01-03 20:02:22
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for table1
-- ----------------------------
DROP TABLE IF EXISTS `table1`;
CREATE TABLE `table1` (
`id` int(11) NOT NULL,
`name` varchar(255) DEFAULT NULL,
`num` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of table1
-- ----------------------------
INSERT INTO `table1` VALUES ('1', '小强', '100');
INSERT INTO `table1` VALUES ('2', '小光', '200');
INSERT INTO `table1` VALUES ('3', '王狗比', '200');
INSERT INTO `table1` VALUES ('4', '顺顺', '250');
INSERT INTO `table1` VALUES ('5', '避孕套', '90');
-- ----------------------------
-- Table structure for table2
-- ----------------------------
DROP TABLE IF EXISTS `table2`;
CREATE TABLE `table2` (
`id` int(11) NOT NULL,
`name` varchar(255) DEFAULT NULL,
`value` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of table2
-- ----------------------------
INSERT INTO `table2` VALUES ('1', 'LOL', '4200');
INSERT INTO `table2` VALUES ('2', 'QQ飞车', '2100');
INSERT INTO `table2` VALUES ('3', '穿越火线', '3000');
INSERT INTO `table2` VALUES ('4', 'DNF', '5100');
INSERT INTO `table2` VALUES ('5', 'PUBG', '1800');
pom.xml添加导入依赖
// An highlighted block
<?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.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</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</artifactId>
</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>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.40</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</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>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.10</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
配置数据库连接
// An highlighted block
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
cache: false
resources:
chain:
strategy:
content:
enabled: true
paths: /**
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/echarts?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
password: xxxx //密码
username: xxxx //用户名
server:
port: 8080
entity实体类
树状图
package com.example.demo.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "table1")
public class Table1 implements Serializable {
@Id
@GeneratedValue(strategy= GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "name")
private String name;
@Column(name = "num")
private Integer num;
}
饼状图
package com.example.demo.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "table2")
public class Table2 implements Serializable {
@Id
@GeneratedValue(strategy= GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "name")
private String name;
@Column(name = "value")
private Integer value;
}
Dao层
树状图dao
package com.example.demo.dao;
import com.example.demo.entity.Table1;
import org.springframework.data.jpa.repository.JpaRepository;
public interface Table1Dao extends JpaRepository<Table1,Integer> {
}
饼状图dao
package com.example.demo.dao;
import com.example.demo.entity.Table2;
import org.springframework.data.jpa.repository.JpaRepository;
public interface Table2Dao extends JpaRepository<Table2,Integer> {
}
service层
树状图service
package com.example.demo.service;
import com.example.demo.dao.Table1Dao;
import com.example.demo.entity.Table1;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional
public class Table1Service {
@Autowired
Table1Dao table1Dao;
public List<Table1> findAll(){
return table1Dao.findAll();
}
}
饼状图service
package com.example.demo.service;
import com.example.demo.dao.Table2Dao;
import com.example.demo.entity.Table2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional
public class Table2Service {
@Autowired
Table2Dao table2Dao;
public List<Table2> findAll(){
return table2Dao.findAll();
}
}
controller层
HelloSpringBoot
package com.example.demo.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
@RestController
public class HelloSpringBoot {
@RequestMapping(value="/hello",method = RequestMethod.GET)
public String sayHello(){
return "Hello Spring Boot!";
}
@RequestMapping(value="/first",method = RequestMethod.GET)
public ModelAndView firstDemo(){
return new ModelAndView("test");//跟templates文件夹下的test.html名字一样，返回这个界面
}
@RequestMapping(value="/courseClickCount",method = RequestMethod.GET)
public ModelAndView courseClickCountStat(){
return new ModelAndView("demo");//跟templates文件夹下的demo.html名字一样，返回这个界面
}
}
前台
demo.html(饼状图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 引入 ECharts
文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.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>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var option;
var arr1=[]
var arr2=[]
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
// 指定图表的配置项和数据
$.get("lastApi",function(result){
arr1=result;
$.each(result,function (index,item) {
arr2.push(item.name);
})
option={
title : {
text: '网络游戏热度统计',
subtext: '游戏获得的票数',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: arr2
},
series : [
{
name: '票数数',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:arr1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
})
// 使用刚指定的配置项和数据显示图表。
</script>
</body>
</html>
test.html(树状图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.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>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var option;
var arr1=[]
var arr2=[]
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
// 指定图表的配置项和数据
$.get("firstApi",function (result) {
$.each(result,function (index,item) {
arr1.push(item.name);
arr2.push(item.num);
})
option = {
title: {
text: '人口分布图'
},
tooltip: {},
legend: {
data:['人数：万']
},
xAxis: {
data: arr1
},
yAxis: {},
series: [{
name: '人数：万',
type: 'bar',
data: arr2
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
</script>
</body>
</html>
效果图
树状效果图：
饼状效果图
1204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
