利用Echarts+Springboot实现数据可视化数据可视化 Spring实现简单的数据可视化自定义可视化图表

'一生所爱

已于 2023-05-28 22:00:57 修改

阅读量1.1w

点赞数 36

于 2021-11-26 16:39:17 首次发布

本文链接：https://blog.csdn.net/weixin_45437533/article/details/121562409

版权

最近在做大数据项目，先做了个数据可视化。

简单来说就是：

利用Echarts + Springboot实现数据可视化

Echarts：调用Echarts.js的API实现图标数据展示（echarts网址）

https://echarts.apache.org/zh/index.html

Springboot：编写接口访问（目录结构如下）

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAJ-S4gOeUn-aJgOeIsQ==,size_20,color_FFFFFF,t_70,g_se,x_16

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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.chen.cn</groupId>
    <artifactId>springbootchartview</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <mysql-connector-java.version>5.1.38</mysql-connector-java.version>
        <druid.version>1.1.6</druid.version>
    </properties>


    <!--继承父工程的starter-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
    </parent>

    <dependencies>
        <!--springboot应用支持springmvc功能-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- mysql driver -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql-connector-java.version}</version>
        </dependency>

        <!--数据源连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>${druid.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!--视图组件：thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.14</version>
        </dependency>



    </dependencies>

</project>

编写控制层：

package com.chen.cn.controller;


import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class EchartsController{

    @RequestMapping("/doCharts")
//    @ResponseBody  题外话：如果加入此条注解，下面返回的内容就会被加入响应体中，页面显示：charts
    public String doCharts(ModelMap modelMap){
        return "charts";  //请求转发到charts页面
    }
}

然后是charts.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/js/echarts.js"></script>
  </head>
</html>

绘制一个简单的图标：

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

最后：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" th:inline="javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
</body>
</html>

其中：

1、'bar' 是图标类型

2、我们可以通过这里修改图表的大小： watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAJ-S4gOeUn-aJgOeIsQ==,size_20,color_FFFFFF,t_70,g_se,x_16

编写完成，开始跑程序，点击运行，访问：

http://localhost:8080/doCharts

即可得到可视化图表：

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAJ-S4gOeUn-aJgOeIsQ==,size_20,color_FFFFFF,t_70,g_se,x_16

我们更可以修改图表类型,只需修改一个参数即可（type，pie为饼图）：

series: [
            {
                name: '销量',
                type: 'pie',
                data: JSON.parse(data2)
            }
        ]

运行效果：

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAJ-S4gOeUn-aJgOeIsQ==,size_20,color_FFFFFF,t_70,g_se,x_16

当然这里的数据是写死的，那我们肯定要写我们自己的东西呀!!所以怎样？

请往下看：

我们需要改写controller，charts.html这两个地方。

1、在controller中加入以下代码：

package com.chen.cn.controller;


import com.alibaba.fastjson.JSON;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class EchartsController{

    @RequestMapping("/doCharts")
    public String doCharts(ModelMap modelMap){
        //定义商品名称
        List<String> data1 = new ArrayList<>();
        data1.add("手机");
        data1.add("电脑");
        data1.add("平板");
        data1.add("耳机");
        data1.add("电视");
        data1.add("洗衣机");
        data1.add("拖孩");

        List<Integer> data2 = new ArrayList<>();
        data2.add(2531);
        data2.add(1231);
        data2.add(525);
        data2.add(211);
        data2.add(913);
        data2.add(821);
        data2.add(1121);

        //把数据转换为JSON格式
        String data1Json = JSON.toJSONString(data1);
        String data2Json = JSON.toJSONString(data2);

        //将数据转发为视图组件显示
        modelMap.put("data1Json",data1Json);
        modelMap.put("data2Json",data2Json);

        return "charts";
    }
}

其中我们需要：

1、传入一个参数：ModelMap

2、把数据转换为JSON格式，再转发为视图组件

2、charts.html编写：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" th:inline="javascript">

    //在js读取thymeleaf变量值
    var data1=[[${data1Json}]];
    var data2=[[${data2Json}]];


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: JSON.parse(data1)
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: JSON.parse(data2)
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

其中：我们使用了 JSON.parse() 方法将Json数据转换为 JavaScript 对象。

再次访问：

http://localhost:8080/doCharts

运行结果如下：

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAJ-S4gOeUn-aJgOeIsQ==,size_20,color_FFFFFF,t_70,g_se,x_16

emmm就是感觉好方便，利用一个echarts就可以做出来各种可视化图表啦（撒花撒花撒花）~~~

（写得不好，欢迎大佬指教）

'一生所爱

关注

36
点赞
踩
184

收藏

觉得还不错? 一键收藏
7
评论
利用Echarts+Springboot实现数据可视化数据可视化 Spring实现简单的数据可视化自定义可视化图表

最近老师在带做大数据项目，先做了个数据可视化。简单来说就是：利用Echarts+Springboot实现数据可视化Echarts：调用Echarts.js的API实现图标数据展示（echarts网址）https://echarts.apache.org/zh/index.htmlSpringboot：编写接口访问（目录结构如下）pom文件：<?xml version="1.0" encoding="UTF-8"?><p.........
复制链接

扫一扫