ECharts 是中国的，也是世界的！

ECharts官网：

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前

绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，

提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts官网：http://echarts.baidu.com/index.html 对于ECharts的介绍、文档以及教程等都做了比较详细

的说明，下面是一个Springboot下的小demo：

1.下载所需js工具包，官网 http://echarts.baidu.com/download.html提供常用、精简、完成、源代码四种

工具包，可根据自己需求具体下载（此demo用的是源代码工具包）

2.idea上新建一个Springboot项目，结构如下：

3.application.properties

server.port=8082

#视图处理的配置

spring.mvc.view.prefix=/

spring.mvc.view.suffix=.html

4. test.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script type="text/javascript" src="/js/echarts.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 1000px;height:400px;"></div>

<script type="text/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: [30.6, 30.0, 28.2, 27.8, 27.6, 27.0,27.0,26.5,25.5,25.0]

        }]

    };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

//    myChart.setOption({

//        series : [

//            {

//                name: '访问来源',

//                type: 'pie',

//                radius: '55%',

//                data:[

//                    {value:235, name:'视频广告'},

//                    {value:274, name:'联盟广告'},

//                    {value:310, name:'邮件营销'},

//                    {value:335, name:'直接访问'},

//                    {value:400, name:'搜索引擎'}

//                ]

//            }

//        ]

//    })

</script>

</body>

</html>

　　　　　　5.TestController

@Controller

public class TestController {

    @RequestMapping("/testEcharts")

    public String test(){

        return "test";

    }

}                

6.启动项目，访问：http://localhost:8082/testEcharts

7.代码地址：https://github.com/liuchunbo24/Springboor-Echarts-Demo

Springboot集成ECharts的更多相关文章

  1. 【springBoot】springBoot集成redis的key,value序列化的相关问题

    使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...

  2. SpringBoot集成security

    本文就SpringBoot集成Security的使用步骤做出解释说明.

  3. springboot集成Actuator

    Actuator监控端点,主要用来监控与管理. 原生端点主要分为三大类:应用配置类.度量指标类.操作控制类. 应用配置类:获取应用程序中加载的配置.环境变量.自动化配置报告等与SpringBoot应用 ...

  4. SpringBoot集成Shiro并用MongoDB做Session存储

    之前项目鉴权一直使用的Shiro,那是在Spring MVC里面使用的比较多,而且都是用XML来配置,用Shiro来做权限控制相对比较简单而且成熟,而且我一直都把Shiro的session放在mong ...

  5. SpringBoot集成redis的key,value序列化的相关问题

    使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...

  6. springboot集成mybatis（二）

    上篇文章<springboot集成mybatis(一)>介绍了SpringBoot集成MyBatis注解版.本文还是使用上篇中的案例,咱们换个姿势来一遍^_^ 二.MyBatis配置版(X ...

  7. springboot集成mybatis（一）

    MyBatis简介 MyBatis本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation迁移到了google code,并且改名为MyB ...

  8. springboot集成redis（mybatis、分布式session）

    安装Redis请参考:<CentOS快速安装Redis> 一.springboot集成redis并实现DB与缓存同步 1.添加redis及数据库相关依赖(pom.xml) <depe ...

  9. SpringBoot集成jsp

    一.springBoot集成jsp: 1.修改pom文件 <!--集成jsp所需jar包--> <!--jsp页面使用jstl标签--> <dependency> ...

随机推荐

  1. spring javaconfig druidsource

    package dataConfig; import java.sql.SQLException; import org.springframework.context.annotation.Bean ...

  2. APP请求服务器数据-HttpUrlConnection

    1. 实例化URL对象 首先第一步实例化一个URL对象,传入参数为请求的数据的网址. URL url = new URL("http://www.imooc.com/api/teacher? ...

  3. win10的hyper-v共享文件夹

    win10这个奇葩,共享文件夹变得非常困难. 其他不说,关键点在于获取虚拟机的 ip,我的虚拟机系统是winxp,虚拟机本身可以上网.拿到ip,用这个ip还是无法访问\\ip 的共享文件夹,因为win ...

  4. 关于ORACLE数据库名以及数据实例名等几个重要概念

    在Oracle中有关数据库和数据库实例的几个重要概念,有时候如果理解不是很深或者对其疏忽.混淆了,还真容易搞错或弄不清其概念,下面就数据库实例名.数据库名.数据库域名.数据库服务名.全局数据库名几个概 ...

  5. There is already an object named '#xxxx' in the database.

    这个案例是前几天同事遇到的一个案例,在存储过程中"删除"了一个临时表,然后重新创建这个临时表时遇到"There is already an object named 'x ...

  6. Docker-Linux环境安装

    不同服务器操作系统安装命令不同,例如centOS默认用yum,Ubuntu可能默认用apt-get.这里推荐一种安装方式,通过下载shell脚本 https://get.docker.com,会检测操 ...

  7. Oracl 一条sql语句 批量添加、修改数据

    最近一直在用,也一直在学oralc,项目上也用到了批量的添加(读取上传CSV文件信息,把符合条件的信息写入到数据库中),在写的时候想到了可能是数据量大就想该怎么快,(由于本人在.NET开发期间没有做过 ...

  8. android 6.0 Intent 安装apk闪退

    需求描述: 利用android系统自带的DownloadManager下载apk文件,并且打开安装界面. 问题描述: 关于DownloadManager的使用网上有很多例子,在此不啰嗦.下载完成之后在 ...

  9. vim常用命令集

    vim是vi的增强版. 这里记录下使用vim时查过的那些指令. 以备不时之需. 30j 向下移动30行 shitf + g 直接跳到文件的末尾 gg 跳回文件头 ggyG 复制全文 查找字符串 普通模 ...

  10. 把python学的让自己成为智障的day14

    智障的第14天,今天还是装饰器,这也是这个难点,装饰器也是函数的其中一种,所以需要有返回值才能返回到之后要执行的函数中,当然,作为函数可以在其中带上参数,装饰器只是比较特殊,自然也可以带参数,目前来说 ...