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

最新推荐文章于 2023-07-12 14:28:36 发布

日本程序员

最新推荐文章于 2023-07-12 14:28:36 发布

阅读量2.2k

点赞数

文章标签： echarts 前端 javascript html5 spring boot

本文链接：https://blog.csdn.net/m0_73843176/article/details/128098383

版权

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>