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 记一次解决键盘遮挡问题

    文章链接:https://mp.weixin.qq.com/s/1gkMtLu0BTXOUOj6isDjUw 日常android开发过程中,会遇到编辑框输入内容弹出软键盘,往往会出现键盘遮挡内容,或者 ...

  2. 【Android】用Cubism 2制作自己的Live2D——软件的安装与破解!

    前言- 上文我们简单的了解了Cubism的情况,但是Cubism 2.X安装好以后如果不进行破解只能使用Free版本,这是我们接受不了的,我们是专业的.是来学习的,怎么能不用Pro版本呢?所以话不多说 ...

  3. Android View的重绘过程之Layout

    博客首页:http://www.cnblogs.com/kezhuang/p/ View绘制的三部曲,测量,布局,绘画现在我们分析布局部分测量部分在上篇文章中已经分析过了.不了解的可以去我的博客里找一 ...

  4. mssql sqlserver 将字段null(空值)值替换为指定值的三种方法分享

    摘要: 下文将分享两种将字段中null值替换为指定值的方法分享,如下所示: 实验环境:sqlserver 2008 R2 例: )) go insert into test(info)values(' ...

  5. Mysql创建和删除数据库

    很久没有使用命令行操作Mysql,百度搜罗,重新整理,加强记忆,便于查询. 以下命令均在win7,64位操作系统下,cmd命令行操作: 一.创建1个Mysql 数据库 方法1:1. cmd下输入:my ...

  6. springboot整合shiro应用

    1.Shiro是Apache下的一个开源项目,我们称之为Apache Shiro.它是一个很易用与Java项目的的安全框架,提供了认证.授权.加密.会话管理,与spring Security 一样都是 ...

  7. Django Template(模板)

    一.模板组成 组成:HTML代码 + 逻辑控制代码 二.逻辑控制代码的组成 1.变量 语法格式 : {{ name }} # 使用双大括号来引用变量 1.Template和Context对象(不推荐使 ...

  8. Git使用注意事项

    第一次用git时push时,突然想到我没有设置ssh key,却也可以push代码到自己仓库,那我本地登陆的账号Git是存在哪儿了呢? Git本地账户凭证管理 在第一次push到远程仓库时,git会提 ...

  9. Win7删除右键菜单中“图形属性”和“图形选项”

    完win7操作系统后,打完驱动在桌面右键会出现如下两个选项,平时没啥用又占用空间,那么如何删掉这两个选项呢? 操作步骤: 1.在运行中输入 regedit 确定打开注册表: 2.依次单击展开HKEY_ ...

  10. Centos7安装配置Nginx

    Nginx 安装 系统平台:CentOS 7.4 64位. 一,安装编译工具及文件 yum -y install make zlib zlib-devel gcc-c++ libtool openss ...