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

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

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

简单来说就是：

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

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

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

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

 

pom文件：

    4.0.0

    com.chen.cn
    springbootchartview
    1.0-SNAPSHOT

    
        UTF-8
        1.8
        1.8
        5.1.38
        1.1.6
    


    
    
        org.springframework.boot
        spring-boot-starter-parent
        2.3.4.RELEASE
    

    
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
        
            mysql
            mysql-connector-java
            ${mysql-connector-java.version}
        

        
        
            com.alibaba
            druid
            ${druid.version}
        

        
            org.springframework.boot
            spring-boot-configuration-processor
            true
        

        
            org.projectlombok
            lombok
            true
        

        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

        
            com.alibaba
            fastjson
            1.2.14
        



    

编写控制层：

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：

绘制一个简单的图标：

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

最后：

其中：

1、'bar' 是图标类型

2、我们可以通过这里修改图表的大小：

 

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

http://localhost:8080/doCharts

即可得到可视化图表：

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

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

运行效果：

 

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

请往下看：

我们需要改写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 data1 = new ArrayList<>();
        data1.add("手机");
        data1.add("电脑");
        data1.add("平板");
        data1.add("耳机");
        data1.add("电视");
        data1.add("洗衣机");
        data1.add("拖孩");

        List 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编写：

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

再次访问：

http://localhost:8080/doCharts

运行结果如下：

 

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

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