基于Springboot实现的Echarts图表

概述

ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 它提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

详细

详细

一、运行效果

基于Springboot实现的Echarts图表_第1张图片

二、实现过程

①、创建一个基础Spring Boot应用

②、在pom.xml中引入Web应用需要的web模块和模板引擎thymeleaf模块,比如用Thymeleaf的时候:

org.springframework.bootspring-boot-starter-thymeleaforg.springframework.bootspring-boot-starter-web

③、编写一个Controller,将/路径的请求,映射到index.html页面

@Controller
public class HelloController {
 
    @GetMapping("/")
    public String index(ModelMap map) {
        return "index";
    }
 
}

④、在resources/templates目录下创建index.html页面,具体内容如下

let myChart = echarts.init(document.getElementById('main'));
    // 定义图标的配置项
    let option = {
        title: {
            text: 'Spring Boot中使用ECharts'
        },
        tooltip: {},
        // x轴配置
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        // y轴配置
        yAxis: {},
        series: [{
            // 数据集(也可以从后端的Controller中传入)
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            // 图表类型,这里使用line,为折线图
            type: 'line'
        }]
    };
    myChart.setOption(option);


在页面内容中主要包含三部分:

中通过

你可能感兴趣的:(WEB系列,spring,boot,echarts,后端)