ECharts介绍
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
效果图
1.创建表
2.搭建springboot项目
选择java8
选择要导入的依赖，因为是springboot整合thymeleaf 所以我选择了勾选 thymeleaf 以及 Spring Web,如要使用数据库可在sql里勾选您使用的数据库
这就是springboot创建出来的完整结构
2.1 实体类（pojo）
3.controller层
package com.wjj.echarts.controller;
import com.wjj.echarts.pojo.Goods;
import com.wjj.echarts.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 org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class HelloSpringBoot {
@Autowired
private GoodsService goodsService;
@RequestMapping( "/show")
@ResponseBody
public List<Goods> findById(Model model) {
List<Goods> users =goodsService.list();
System.err.println(users.toString());
return users;
}
//展示柱状图
@RequestMapping( "/showbar")
public String show2() {
return "bar";
}
//展示饼图
@RequestMapping( "/showpie")
public String show3() {
return "pie";
}
}4.application.yml配置文件
数据源的URL记得填写自己数据库的名字
5.引入echarts和jQuery的js文件
6.HTML
bar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:450px;" align="center"></div>
<script type="text/javascript">
$(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
var values=[];
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/show", //请求发送到dataActiont处
data : {},
dataType : "json", //返回数据形式为json
success : function(data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (data) {
for(var i=1;i<data.length;i++){
var test={"value":data[i].count, "name":data[i].name};
values.push(test);
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption(
{
title: {
text: '商品数量占比',
subtext: '纯属虚构',
left: 'center'
},
legend: {
orient: 'vertical',
left: 'left',
data: values
},
series: [
{
name: '物料来源',
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
data:values,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
);
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});//刷新方法结束
</script>
</body>
</html>pie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
$(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
var names=[]; //横坐标数组（实际用来盛放X轴坐标值）
var values=[]; //纵坐标数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/show", //请求发送到dataActiont处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name);
values.push(result[i].count);
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
//加载数据图表
title:{
text: '商品数量'
},
legend: {
data:['商品数量']
},
xAxis: {
data: names,
axisLabel:{
interval: 0
}
},
yAxis: {
type: 'value'
},
series: [{
// 根据名字对应到相应的系列
name: '商品名称',
type: 'line',
data: values
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});
</script>
</body>
</html>总结
springboot+echarts实现动态数据主要是通过前端利用ajax发送请求给后端返回list集合，前端通过返回的数据（data）添加到图标中或计算