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. Android应用跳转到微信和支付宝扫一扫

    新版的微信已经把微信功能的schema都禁掉了,意味着我们无法打开微信的扫一扫等功能,目前正常的只能先进入微信(我测试的时候是微信版本7.0.3)已经是很新的版本了 具体调起微信扫一扫代码如下,测试后 ...

  2. Git - git branch - 查看本地仓分支列表

    索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git branch 二.说明: 该命令将列出本地所有存在分支, 包括 本地独有分支与远端在本地签出的分支, 但是没有签出的远端 ...

  3. 轻松学习UML之类图，状态图

    本文主要讲解UML图中的类图与状态图相关内容,如有不足之处,还请指正. 概述 统一建模语言(UML,UnifiedModelingLanguage)是面向对象软件的标准化建模语言,UML因其简单.统一 ...

  4. SQL Server一致性错误修复案例总结

    今天遇到了一个关于数据库一致性错误的案例.海外工厂的一台SQL Server 2005(9.00.5069.00 Standard Edition)数据库在做DBCC CHECKDB的时候出现了一致性 ...

  5. MySQL随笔(1)

    mysql是一种关系型数据库,和SQL ,oracle一样是较为常用的关系型数据库,属于oracle旗下的产品,在web应用方面,MySQL是最好的RDBMS(relational database ...

  6. java笔记----获取电脑上ip（内网ip）

    private static String getHostIP(){ String tempIP = "127.0.0.1"; try { if(isIpv4(InetAddres ...

  7. centos7安装docker并设置开机自启以及常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  8. selenium之元素定位-css

    CSS定位方式和XPATH定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比XPATH定位速度快,且比XPATH稳定的特性.下面详细介绍CSS定位方式的使用方法 被测网页的HT ...

  9. Linux Mint如何添加windows分享的网络打印机？

    1.安装samba sudo apt-get install samba 2.找到系统打印机选项 通过 Menu-->>控制中心-->>系统管理找到 Printers选项,双击 ...

  10. Docker平台的基本使用方法

    1.运行一个 container并加载镜像centos,运行起来这个实例后,在实例中执行 /bin/bash命令 docker常用参数: run  运行 -i  以交互模式运行容器,通常与 -t 同时 ...