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. linux添加crontab定时任务

    1.crontab -e命令进入linux定时任务编辑界面,举个简单的例子,比如我要定时往txt文件写入 */ * * * * .txt */1就是每隔一分钟像文件写入,其他一些详细的操作大家可以去网 ...

  2. MongoDB 中数据的替换方法实现 --类Replace()函数功能

    关键字: MongoDB,Replace,forEach 近日接到一个开发需求,因业务调整,需要DBA协助,将MongoDB数据库中某集合的进行替换.例如我们需要将集合A中B字段中,有关<美好& ...

  3. Git源代码管理

    一. 分支管理 使用 git 进行源代码管理,一般将某个项目的所有分支分为以下几条主线 1. Master 顾名思义,既然名字叫 Master ,那么该分支就是主分支的意思. master 分支永远是 ...

  4. JS直接调用C#后台方法（ajax调用）

    1. 先手动引用DLL或者通过NuGet查找引用,这里提供一个AjaxPro.2.dll的下载: 2. 之后的的过程不想写了,网上都大同小异的,直接参考以前大佬写的: AjaxPro2完整入门教程 总 ...

  5. iOS 类方法 、野指针与空指针

    一.类方法: 不依赖于对象,执行效率更高; 能用类方法解决的问题,尽量使用类方法; 类方法中不能直接访问实例变量(成员变量) 二.野指针和空指针是什么?什么时候产生?怎么避免? 只要一个对象被释放了, ...

  6. U盘启动盘安装Windows10操作系统详解

    没有装过系统的同学,总以为装系统很神秘?是专业技术人员干的事情.今天我们来看看怎么借助常用的U盘装上全新的win10系统. 准备材料: 软件软碟通,可上官网下载:https://cn.ultraiso ...

  7. C# -- 使用FileInfo获取文件信息

    C# -- 使用FileInfo获取文件信息 1. 代码实现 static void Main(string[] args) { GetFileInfo(@"D:\Test.xlsx&quo ...

  8. 浅析CompareAndSet(CAS)

    最近无意接触了AtomicInteger类compareAndSet(从JDK5开始),搜了搜相关资料,整理了一下 首先要说一下,AtomicInteger类compareAndSet通过原子操作实现 ...

  9. 如何配置jenkins 与代理服务器吗?

    0       我们面临一些问题使用代理服务器(即缓存服务器)和詹金斯是希望有人可以提供如果他们有类似的设置.    Herea€™年代简要描述的设置: 在主站点反向代理,JTS & CCM服 ...

  10. 编译安装redis-5.0.4

    编译安装为redis官方推荐安装方式. 本例中使用linux版本为:CentOS Linux release 7.0.1406 (Core),Basic Web Server 一.安装依赖包 yum ...