文档章节

ECharts实例(1)

BK灬
 BK灬
发布于 2016/06/17 16:23
字数 215
阅读 428
收藏 1

JS代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>Yearly Visit</title>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="resource/dist/echarts.min.js"></script>
<script src="static/js/jquery-1.11.2.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
	<div id="main" style="width: 1400px;height:800px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom,初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		var option = {
			title : {
				text : []
			},
			tooltip : {},
			legend : {
				data : [ 'Visit' ]
			},
			xAxis : {
				data : []
			},
			yAxis : {},
			series : [ {
				name : 'Visit',
				type : 'bar',
				data : []
			} ]
		};
		var year='2016';
		myChart.showLoading();
		// 异步加载数据
		$.get('admin/charts/yearlyClick?year='+year).done(function(data) {
					myChart.hideLoading();
					// 填入数据
					myChart.setOption({
						title : {
							text : 'Number of visits per month('+ data.totalCount + ')',
						},
						xAxis : {
							data : data.x
						},
						series : [ {
							// 根据名字对应到相应的系列
							name : 'Visit',
							data : data.y
						} ]
					});
				});
		// 填充数据
		myChart.setOption(option);
	</script>
</body>
</html>

运行效果图:

 

菜鸟交流群:260052172(大神莫入)

© 著作权归作者所有

共有 人打赏支持
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 0
朝阳
后端工程师
私信 提问
.net图表之ECharts随笔01-最简单的使用步骤

找了几种绘制图表的办法,后面选定了ECharts 首先,从NuGet管理中添加ECharts包,然后就可以调用绘制图表啦! 基本步骤: 1.为ECharts准备一个具备大小(宽高)的Dom 2.ECharts的js文件引入 ...

DoKey713
11/26
0
0
echarts力导向图,在react上展示有问题?

我最近用echarts4.1.0画力导向图,同样的代码,用官方用例一切正常 但用react引入echarts4.1.0,执行就发现引力图的分类头部不见了 react引力图 用官方样例执行的引力图 代码如下 import Rea...

yesshi-pho
08/15
156
2
零云技术分享之:ECharts可视化图表开发

欢迎交流:零云,互联网产品快速开发框架 百度有几个开源项目值得称赞的,比如blend2、UEditor、ECharts 等,这里我们聊一聊ECharts3 可视化图表库。 有了ECharts 3,我们可以非常方便的构建...

CoreThink
2017/03/06
258
0
echarts的路径问题

@Kener-林峰 你好,想跟你请教个问题: 我想弄一个地图扩展的echarts例子,但是总是报错 我的html文件的路径是:F:\study\web\echarts-2.2.0\echarts-2.2.0\projects\test2.html svg文件在:...

ma_sk
2015/02/14
3.4K
1
ECharts GL 1.0 alpha 发布

距离 ECharts-X 最近一个版本已经过去了两年多时间,期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本,是不是不再维护了等等,对于这些问题我们只能回答我们还没准备好。...

ECharts
2017/04/17
8.1K
29

没有更多内容

加载失败,请刷新页面

加载更多

[LintCode] Serialize and Deserialize Binary Tree(二叉树的序列化和反序列化)

描述 设计一个算法,并编写代码来序列化和反序列化二叉树。将树写入一个文件被称为“序列化”,读取文件后重建同样的二叉树被称为“反序列化”。 如何反序列化或序列化二叉树是没有限制的,你...

honeymose
今天
5
0
java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
23
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
18
0
my.ini

1

architect刘源源
今天
16
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部