文档章节

ECharts实例(2)

BK灬
 BK灬
发布于 2016/06/17 16:26
字数 237
阅读 726
收藏 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
朝阳
后端工程师
私信 提问
echarts力导向图,在react上展示有问题?

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

yesshi-pho
08/15
0
0
ECharts整合HT for Web的网络拓扑图应用

ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的...

xhload3d
2015/03/16
0
0
Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉
05/04
0
0
vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七
05/21
0
0
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

给女朋友讲解什么是Optional【JDK 8特性】

前言 只有光头才能变强 前两天带女朋友去图书馆了,随手就给她来了一本《与孩子一起学编程》的书,于是今天就给女朋友讲解一下什么是Optional类。 至于她能不能看懂,那肯定是看不懂的。(学到...

Java3y
10分钟前
0
0
2019年六大新兴信息安全方向

导读 黑客攻击和网络犯罪的威胁正在不断升级,相应的技术“军备竞赛”正愈演愈烈,对于信息安全从业人员来说,掌握最新的信息安全工具,是在信息安全战争中生存下来的关键所在。 从特朗普的手...

问题终结者
16分钟前
0
0
redis扩展-自定义PropertyPlaceholderConfigurer,在spring属性注入之前,手动将properteis合并到spring容器中

背景:spring容器启动过程中,通过PropertyPlaceholderConfigurer读取properties配置文件,并将properties配置文件中的值注入spring bean的属性中, PropertyPlaceholderConfigurer使用方式多...

燃犀
18分钟前
0
0
PostgreSQL SPI 中的错误处理

PostgreSQL SPI 用于在 C 或是其他编程语言编写的扩展函数(存储过程)中调用数据库本身的解析器、规划器和执行器的功能,以及对 SQL 语句进行执行。 在最重要的一个函数 SPI_execute 的文档...

helloclia
19分钟前
0
0
深入理解Java内存模型

1 内存模型产生背景 在介绍Java内存模型之前,我们先了解一下物理计算机中的并发问题,理解这些问题可以搞清楚内存模型产生的背景。物理机遇到的并发问题与虚拟机中的情况有不少相似之处,物...

小刀爱编程
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部