ECharts实例(1)
ECharts实例(1)
低调的AckMan 发表于2年前
ECharts实例(1)
  • 发表于 2年前
  • 阅读 306
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: ECharts3(bar图)

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(大神莫入)

标签: Echarts
共有 人打赏支持
低调的AckMan
粉丝 45
博文 317
码字总数 134757
×
低调的AckMan
谢谢观众老爷们的赏赐,小弟我会再接再厉的!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: