ECharts实例(3)
ECharts实例(3)
低调的AckMan 发表于2年前
ECharts实例(3)
  • 发表于 2年前
  • 阅读 918
  • 收藏 1
  • 点赞 0
  • 评论 0
摘要: ECharts3(pie图)

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 Click</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 : [],
				subtext : [],
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : []
			},
			series : [ {
				name : 'Visit',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : [],

				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			} ]
		};
		var year='2016';
		myChart.showLoading();
		$.get('admin/charts/yearlyClickCallable?year='+year).done(function(data) {
			myChart.hideLoading();
			myChart.setOption({
				title:{
					text:'Number of visits per month('+data.totalCount+')'
				},
				legend:{
					data:data.x
				},
				series:{
					data:[
			               {value:data.y[0], name:data.x[0]},
			               {value:data.y[1], name:data.x[1]},
			               {value:data.y[2], name:data.x[2]},
			               {value:data.y[3], name:data.x[3]},
			               {value:data.y[4], name:data.x[4]},
			               {value:data.y[5], name:data.x[5]},
			               {value:data.y[6], name:data.x[6]},
			               {value:data.y[7], name:data.x[7]},
			               {value:data.y[8], name:data.x[8]},
			               {value:data.y[9], name:data.x[9]},
			               {value:data.y[10], name:data.x[10]},
			               {value:data.y[11], name:data.x[11]},
			               {value:data.y[12], name:data.x[12]}
			             ]
				}
			});
		});
		// 填充数据
		myChart.setOption(option);
	</script>
</body>
</html>

运行效果图如下:

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

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