springboot echarts mybatisplus 实现动态数据图（饼状，折线）

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）添加到图标中或计算

	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";
	}

	}

	<!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>