文档章节

ECharts实例(1)

BK灬
 BK灬
发布于 2016/06/17 16:23
字数 215
阅读 890
收藏 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
博文 346
码字总数 144551
作品 0
朝阳
后端工程师
私信 提问
加载中

评论(0)

详解在vue中使用echarts图表实例代码

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

peakedness丶
2018/12/24
803
0
浅析package.json中的devdependencies 和 dependencies

2、devDependencies (1)内容:是一个对象,配置模块依赖的模块列表,key是模块名称,value是版本范围 (2)作用:该模块中所列举的插件属于开发环境的依赖(比如:测试或者文档框架等) (3)部署...

osc_wv1mxwu2
2019/07/11
1
0
【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

文章目录 小哥哥,小姐姐们容我再打一波小广告,我打算用几年时间去做一份关于Java学习、面试、进阶的GitHub项目。 目前刚刚整理好JavaSE基础内容,我将陆续的整理好JavaWeb阶段以及框架知识...

Ziph
05/28
0
0
VUE中使用echarts(网上总结)

//1安装 cnpm install echarts -S //2引入 main.js   import echarts from 'echarts'   Vue.prototype.$echarts = echarts //3使用 vue文件里面 <div id="myChart" :style="{width: '300......

osc_1wt3tlkr
2019/05/21
3
0
Echarts轻松入门,内附踩坑秘籍

首先介绍一下我们的主角ECharts ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。 入门开始 Echarts引入方式 1.npm或者cnpm安装 然后在需要的模...

osc_lfnnqo7g
2019/11/08
8
0

没有更多内容

加载失败,请刷新页面

加载更多

【Flutter组件终结篇】332个组件 658页PDF

老孟导读:历时1年的时间,整理完成了330+组件的详细用法,不仅包含UI组件,还包含了功能性的组件。 虽然整理了 330+的组件基本用法,但并不是让你每一个都学习一遍,任何技术基本都是掌握 ...

老孟Flutter
46分钟前
17
0
三星手机又中招:一张壁纸可引发系统崩溃 附临时解决方法

  前几天国内有大量用户发现三星手机崩溃、黑屏或者无限重启, 这可能是三星手机的日历 APP 的 bug。这件事还没完,三星手机今天又发现了新的问题,换上一张特别的壁纸就会导致系统崩溃,不...

alkcendkljk
58分钟前
13
0
查找当前目录和文件目录[重复] - Find current directory and file's directory [duplicate]

问题: This question already has answers here : 这个问题已经在这里有了答案 : How to properly determine current script directory? 如何正确确定当前脚本目录? (11 answers) (11个答...

技术盛宴
今天
27
0
你不知道的java对象序列化的秘密

简介 你知道序列化可以使用代理吗?你知道序列化的安全性吗?每个java程序员都听说过序列化,要存储对象需要序列化,要在网络上传输对象要序列化,看起来很简单的序列化其实里面还隐藏着很多...

flydean
今天
21
1
线程池

Java通过Executors提供四种线程池,分别为: newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程。 newFixedThreadPool 创...

Joker上上签
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部