Springboot集成ECharts
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的更多相关文章
- 【springBoot】springBoot集成redis的key,value序列化的相关问题
使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...
- SpringBoot集成security
本文就SpringBoot集成Security的使用步骤做出解释说明.
- springboot集成Actuator
Actuator监控端点,主要用来监控与管理. 原生端点主要分为三大类:应用配置类.度量指标类.操作控制类. 应用配置类:获取应用程序中加载的配置.环境变量.自动化配置报告等与SpringBoot应用 ...
- SpringBoot集成Shiro并用MongoDB做Session存储
之前项目鉴权一直使用的Shiro,那是在Spring MVC里面使用的比较多,而且都是用XML来配置,用Shiro来做权限控制相对比较简单而且成熟,而且我一直都把Shiro的session放在mong ...
- SpringBoot集成redis的key,value序列化的相关问题
使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...
- springboot集成mybatis(二)
上篇文章<springboot集成mybatis(一)>介绍了SpringBoot集成MyBatis注解版.本文还是使用上篇中的案例,咱们换个姿势来一遍^_^ 二.MyBatis配置版(X ...
- springboot集成mybatis(一)
MyBatis简介 MyBatis本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation迁移到了google code,并且改名为MyB ...
- springboot集成redis(mybatis、分布式session)
安装Redis请参考:<CentOS快速安装Redis> 一.springboot集成redis并实现DB与缓存同步 1.添加redis及数据库相关依赖(pom.xml) <depe ...
- SpringBoot集成jsp
一.springBoot集成jsp: 1.修改pom文件 <!--集成jsp所需jar包--> <!--jsp页面使用jstl标签--> <dependency> ...
随机推荐
- arcgis api 3.x for js 入门开发系列十四最近设施点路径分析(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- AsyncTask机制
AsyncTask可以让我们更容易地使用UI线程.它允许执行后台操作,并把结果发布到UI线程上,而不需要操作线程或Handler.AsyncTask被设计成一个和Thread.Handler相关的一个 ...
- 设计模式系列之观察者模式(Observer Pattern)
意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 主要解决:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作 ...
- java:nextInt()和nextLine()一起使用出错
今天遇到一个很奇怪的事情,日常刷题中,遇到一个很简单的题: (不想看我多逼逼只想知道为什么会出错看最后) 题目: 题目描述 description 现有有N个学生的数据记录,每个记录包括学号.姓名.三 ...
- SQL server 2017使用教程
1.安装: 从https://www.microsoft.com/en-us/sql-server/sql-server-downloads官网下载sql server2017试用版 180天 安装完 ...
- 【心得】Lattice Diamond 后端约束实战小结
[博客导航] [导航]FPGA相关 IOB约束 参考<插入IO寄存器和位置约束---lattice&diamond>,推荐的方法是: 1.在strategy设置[Map Desig ...
- Exception in thread "main" org.I0Itec.zkclient.exception.ZkAuthFailedException: Authentication failure is thrown while creating kafka topic
Exception in thread "main" org.I0Itec.zkclient.exception.ZkAuthFailedException: Authentica ...
- HashMap源码分析(二)
前言:上篇文章,笔者分析了jdk1.7中HashMap的源码,这里将对jdk1.8的HashMap的源码进行分析. 注:jdk版本:jdk1.8.0_172 1.再看put操作 public V pu ...
- 前端架构师 摘自《前端架构设计》-micah godbolt
作为前端架构师,你经常需要制定,或至少能够掌握以上所列的每一项内容.流程中的任何一个环节出现问题,都会迅速演变为开发人员的痛苦,或者导致网站无法持续满足用户要求,甚至崩溃. 前端架构师的用户是开发人 ...
- 服务端返回的json数据,导致前端报错的原因及解决方法
前言 最近在开发的过程中遇到了一个问题:后端传过来的json字符串不是标准的json字符串 导致报错的原因 后端传过来的json字符串中包含一些不标准的字符或错误的引号嵌套 1)\n 2) \r 3) ...