文档章节

ECharts实例(2)

BK灬
 BK灬
发布于 2016/06/17 16:26
字数 237
阅读 728
收藏 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 : {
				trigger : 'axis'
			},
			legend : {
				data : [ 'Visit' ]
			},
			grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
			    containLabel: true
			},
			toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
			xAxis : {
				type: 'category',
			   	boundaryGap: false,
				data : []
			},
			yAxis : {
				type : 'value'
			},
			series : [ {
				name : 'Visit',
				type : 'line',
				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(大神莫入)

© 著作权归作者所有

共有 人打赏支持
上一篇: ECharts实例(3)
下一篇: ECharts实例(1)
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 0
朝阳
后端工程师
私信 提问
详解在vue中使用echarts图表实例代码

安装vue依赖 使用npm 使用yarn 使用国内的淘宝镜像: 引入ECharts 安装好的ECharts会放在node_modules目录下。 全部引入 1.直接在项目代码引入 可以直接在项目代码中 得到 ECharts。声明一个...

peakedness丶
2018/12/24
0
0
.net图表之ECharts随笔01-最简单的使用步骤

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

DoKey713
2018/11/26
0
0
ECharts 3 测试版发布,焕然一新的面貌

ECharts 3 测试版发布 注:由于直接转载内容,文章中实例效果无法查看,如需查看详情请往 ECharts3 带来了什么 ECharts 在 github 上沉寂了数个月,想必很多小伙伴充满了各种疑问,ECharts是...

pissang
2015/12/04
70.7K
66
ECharts GL 1.0 alpha 发布

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

ECharts
2017/04/17
8.1K
29
零云技术分享之:ECharts可视化图表开发

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

CoreThink
2017/03/06
258
0

没有更多内容

加载失败,请刷新页面

加载更多

全面理解Java内存模型(JMM)及volatile关键字

理解Java内存区域与Java内存模型 Java内存区域 Java虚拟机在运行程序时会把其自动管理的内存划分为以上几个区域,每个区域都有的用途以及创建销毁的时机,其中蓝色部分代表的是所有线程共享的...

亭子happy
6分钟前
0
0
Prometheus监控mysql实例--centos7安装mysql_exporter

目录 概述 环境准备 普罗米修斯简介 mysql安装 mysqld_exporter安装 启动参数列表 概述 prometheus(普罗米修斯) 是一个开源系统监控和报警工具包,许多公司和组织都采用了Prometheus,该项目...

java_龙
11分钟前
3
0
拥有2000家门店,他如何晋升为服装界的新宠?

摘要: —— iwarm3.0加热组件、碳纳米管膜炎、管状石墨结构体...你看到并不是一款高科技电子产品,这是快鱼服饰在这个冬天推出的黑科技产品 - 智能温控羽绒服。 在竞争激烈的服装行业,快鱼...

阿里云云栖社区
13分钟前
0
0
不忘初心 砥砺前行-智和信通2018年年会报道

1月18日,智和信通以“不忘初心 砥砺前行”为主题的2018总结会议暨2019年年会在京召开。年会以总经理李少龙的讲话为开场,充分肯定了全体员工2018年的工作和成绩,并表达了公司产品智和网管平...

智和网管平台
22分钟前
0
0
NGINX api网关

以谁为师
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部