文档章节

ECharts实例(3)

BK灬
 BK灬
发布于 2016/06/17 16:29
字数 298
阅读 1018
收藏 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 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(大神莫入)

© 著作权归作者所有

共有 人打赏支持
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 0
朝阳
后端工程师
私信 提问
ECharts整合HT for Web的网络拓扑图应用

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

xhload3d
2015/03/16
0
0
vue之将echart封装为组件

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

四小七
05/21
0
0
Echarts-百度地图省分着色

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

莫显辉
05/04
0
0
使用echarts的Simple Graph 来画任务流程图

一、引入 ECharts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码...

DeronTan
10/24
0
0
echarts力导向图,在react上展示有问题?

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

yesshi-pho
08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小白带你认识netty(三)之NioEventLoop的线程(或者reactor线程)启动(一)

在第一章中,我们看关于NioEventLoopGroup的初始化,我们知道了NioEventLoopGroup对象中有一组EventLoop数组,并且数组中的每个EventLoop对象都对应一个线程FastThreadLocalThread,那么这个...

天空小小
今天
3
0
PHP动态扩展Redis模块

查看已有模块 [root@test-a ~]# /usr/local/php/bin/php -m[PHP Modules]bz2Core...zlib[Zend Modules] 下载包,解压,生成configure文件 [root@test-a ~]# cd /usr/local/src/[ro......

野雪球
今天
4
0
在Ignite中使用线性回归算法

在本系列前面的文章中,简单介绍了一下Ignite的机器学习网格,下面会趁热打铁,结合一些示例,深入介绍Ignite支持的一些机器学习算法。 如果要找合适的数据集,会发现可用的有很多,但是对于...

李玉珏
今天
5
0
Mybatis应用学习——简单使用示例

1. 传统JDBC程序中存在的问题 1. 一个简单的JDBC程序示例: public class JDBCDemo {public static void main(String[] args) {Connection con=null;PreparedStatement statemen...

江左煤郎
今天
5
0
使用JavaScript编写iOS应用业务逻辑

JSAUIKitCocoa使你可以使用JavaScript编写对性能要求不高但可能变动性很大的iOS应用的业务逻辑部分,View组件、需要多线程支持的Model等则直接使用原生对象。 编写方式与React Native相似,但...

neal01
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部