echarts图表第一个案例
1.action中获取到数据
@Override
public String execute() throws Exception {
List<Student> find = echartsService.find();
Gson g = new Gson();
String list = g.toJson(find);
ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
ServletActionContext.getResponse().getWriter().write(list);
System.out.println(list);
return NONE;
}
2.jsp页面应用echarts
<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="<%=path%>/js/echarts.js" /></script>
<script type="text/javascript">
$(function() {
var myChart = echarts.init(document.getElementById("main"));
$("#btn").click(function() {
$.ajax({
url : "echarts",
success : function(data) {
var result = eval("(" + data + ")");
var noe = new Array();
var two = new Array();
$.each(result, function(i, dom) {
noe[i] = dom.name;
two[i] = dom.address;
});
// 指定图表的配置项和数据
var option = ({
title : {
text : 'ECharts图表'
},
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'cross' // 默认为直线，可选为：'line' | 'shadow'|'cross'
}
},
toolbox : {
show : true,
feature : {
dataView : {
show : true,
readOnly : true
},
restore : {
show : true
},
magicType : {
type : [ 'line', 'bar', 'stack', 'tiled' ]
},
saveAsImage : {
show : true
}
}
},
legend : {
data : [ '人数' ]
},
xAxis : {
data : two
},
yAxis : {},
series : [ {
name : '人数',
type : 'bar',
data : noe
} ]
});
myChart.setOption(option);
},
error : function(data) {
alert("请求报表错误");
}
});
});
});
</script>
3.准备一个具有宽高的容器(必须有宽高)
<body>
<input type="button" value="显示图表" id="btn" />
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
4.效果
echarts图表第一个案例的更多相关文章
- echarts入门，5分钟上手写ECharts的第一个图表
1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...
- ECharts学习总结(一):ECharts的第一个图表
在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line，Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- echarts图表初始大小问题及echarts随窗口变化自适应
最近在做一个轮播图,使用的是element的Carousel走马灯,每一个走马灯里是eachrts图,开始页面加载的时候发现echarts图并不能自适应,开始以为是走马灯的问题,后来发现不是 不知道大 ...
- Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）
导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
随机推荐
- eclipse连hadoop2.x运行wordcount 转载
转载地址:http://my.oschina.net/cjun/blog/475576 一.新建java工程,并且导入hadoop相关jar包 此处可以直接创建mapreduce项目就可以,不用下面折 ...
- session详解
什么是Session 对Tomcat而言,Session是一块在服务器开辟的内存空间,其存储结构为ConcurrentHashMap: Session的目的 Http协议是一种无状态协议,即每次服务端 ...
- Handler 、 Looper 、Message
分析: Looper:prepare和loop public static final void prepare() { if (sThreadLocal.get() != null) { throw ...
- cf 710 E Generate a String
题意: 开始你有数字$0$,你可以用代价$x$将该数字加$1$或减$1$(当$x > 0$时),或用代价$y$将该数字变为$2x$,那么问得到数字$n$所需的最少代价是多少. 数据范围$1 \l ...
- Python写一个Windows下的android设备截图工具
界面版 利用python的wx库写个ui界面,用来把android设备的截图输出到电脑屏幕,前提需要安装adb,涉及到的python库也要安装.代码如下: import wx,subprocess,o ...
- [Machine-Learning] 熟悉 Matlab 中的 map
概述 map 的意思是映射,即将一个变量映射到另一个变量. 比如将一个字符串映射为一个数值,那个字符串就是map 的键值(key),数值就是map的数据(value). 由此可以把map理解为一个哈希 ...
- Ubuntu 16.04 安装mysql并设置远程访问
说明: 一个朋友在使用ubuntu-server 16.04安装mysql,设置远程访问的时候出现了问题,请我帮忙.但是,我也没有使用过ubuntu安装mysql,于是乎搜索了很多技术文件,比着葫芦画 ...
- freemaker时间格式转换，精确到毫秒
在开发中,需要将时间以 2016-09-20 12:00:01:723 的形式里用freemaker展示在页面上,找了好久,终于找到了答案. "createTime":" ...
- Hibernate 继承映射
@Entity@Inheritance(strategy=InheritanceType.SINGLE_TABLE)@DiscriminatorColumn()public class Animal ...
- java.net.UnknownHostException: promote.cache-dns.local: unknown error
一.错误 程序启动时提示如下错误: java.net.UnknownHostException: promote.cache-dns.local: unknown error 直译就是: 主机名pro ...