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. Java版 人脸识别SDK demo

    虹软人脸识别SDK之Java版,支持SDK 1.1+,以及当前最新版本2.0,滴滴,抓紧上车! 前言 由于业务需求,最近跟人脸识别杠上了,本以为虹软提供的SDK是那种面向开发语言的,结果是一堆dll· ...

  2. C#枚举（Enum）小结

    枚举概念 枚举类型(也称为枚举)提供了一种有效的方式来定义可能分配给变量的一组已命名整数常量.该类型使用enum关键字声明. 示例代码1 enum Day { Sunday, Monday, Tues ...

  3. DataGuard 单实例到RAC搭建

    背景简介: 本文为针对一次windows平台RAC数据库迁移至Linux平台RAC的笔记,基本步骤为: 1.搭建windows RAC到Linux 单实例数据库的DataGuard 2.做switch ...

  4. redis数据库的基础

    redis数据库 redis有以下三个特点 redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用 redis不仅仅支持简单的key-value类型的数据,同时还提 ...

  5. Python入门测试

    1.比如自然数10以下能被3或者5整除的有,3,5,6和9,那么这些数字的和为23. 求能被3或者5整除的1000以内数字的和 multiple_of_threes=[] for multiple_o ...

  6. Install Docker Compose

    https://docs.docker.com/compose/install/ sudo curl -L "https://github.com/docker/compose/releas ...

  7. FB商务管理平台(Business Manager) （2）

    Business Manager 商务管理平台(以下简称BM)API 一站式管理广告帐户.主页及相关的工作人员. BM功能结构(其中:账户下的节点属于市场营销API) API / SDK FB提供了多 ...

  8. 微信h5支付

    分为 微信内H5调起支付 和 非微信浏览器H5支付. 1.H5支付(微信内) 参考链接:https://www.jianshu.com/p/6b9acdd10de6 2.JSAPI支付(非微信) 参考 ...

  9. Appium 服务器初始化参数（Capability）

    键 描述 值 automationName 自动化测试的引擎 Appium (默认)或者 Selendroid platformName 使用的手机操作系统 iOS, Android, 或者 Fire ...

  10. Hyperscan-5.1.0 安装

    安装依赖ragel ragel源码下载地址 编译安装 $ tar -xvf ragel-6.10.tar.gz $ cd ragel-6.10 $ ./configure $ make $ sudo ...