<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var employees = [
{ "hour":"1" , "value":"220" },
{ "hour":"2" , "value":"182" },
{ "hour":"3" , "value":"191" },
{ "hour":"4" , "value":"234" },
{ "hour":"5" , "value":"290" },
{ "hour":"6" , "value":"330" },
{ "hour":"7" , "value":"310" },
{ "hour":"8" , "value":"123" },
{ "hour":"9" , "value":"442" },
{ "hour":"10" , "value":"321" },
{ "hour":"11" , "value":"90" },
{ "hour":"12" , "value": "149" }
];
var dataAxis = [];
var yMax = 500;
var dataShadow = [];

for (var i = 0; i < employees.length; i++) {
dataShadow.push(yMax);
dataAxis.push(employees[i].hour+":00");
}

option = {
title: {
text: '带伸缩的柱状和折线混合图',
subtext: '学习用'
},
tooltip : {
trigger: 'axis',
axisPointer: {//标尺线
type: 'cross',//也可以是shadow和line
label: {
backgroundColor: '#283b56'
}
},
formatter: function (params) {
var tar;
if (params[1].value != '-') {
tar = params[1];
}
else {
tar = params[0];
}
return '申请数量 : ' + tar.value;
}
},
xAxis: {
data: dataAxis
},
yAxis: {
axisLine: {
show: false//显示数据，但不显示竖线
},
axisTick: {
show: false//显示数据，但不显示竖线
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',//隐形的柱形图
itemStyle: {
normal: {color: 'rgba(0,0,0,0.05)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data: dataShadow,
animation: false
},
{
type: 'bar',//显示的柱形图
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
),
label: {//信息显示方式
show: true,
position: 'top',
formatter: '{b}申请数量:{c}'
}
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: functionName(employees)
},
{
name:'折线',
type:'line',
itemStyle : { /*设置折线颜色*/
normal : {
/* color:'#c4cddc'*/
}
},
data:functionName(employees)
}
]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, functionName(employees) - 1)]
});
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}

function functionName(param){

//在这里可以通过ajax动态请求后台数据并填充到employees数组中，ajax最后设置async:false，不然就不是动态请求了

$.ajax({

type:"post",

async:false,

url:url,

data:{},

dataType:"text",

success:function(json){

　　var array = new Array(eval("(")+json+")")[0];

　　for(var i=0,len=array.length;i<len;i++){

　　　　employees[i].value=array[i]["key"];

　　}

},

error(XMLHttpRequest,errorThrown,status){

　　alert("解析报错："+XMLHttpRequest.responseText);

}

});
var serie = [];
for(var i = 0; i < param.length; i++){
var item = {
name:param[i].name,
value:param[i].value
};
serie.push(item );
};
return serie;
}
</script>
</body>
</html>

echarts报表的更多相关文章

  1. 使用ECharts报表统计公司考勤加班，大家加班多吗？

    最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...

  2. vue组件之echarts报表

    vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...

  3. ECharts报表的使用

    知道你们懒得手打网址,给你们贴上:http://echarts.baidu.com/echarts2/ 1.下载并解压之后,找到echarts-2.2.7\build\dist\echarts-all ...

  4. echarts 报表使用

    下载echats后,将下包中的js引入项目,\echarts-2.2.7\echarts-2.2.7\build\dist //在页面中建立宽高的区域,用来显示报表 <div style=&qu ...

  5. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  6. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. ECharts 报表事件联动系列三：柱状图，饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. ECharts 报表事件联动系列二：柱状图，饼状图添加事件

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  9. ECharts 报表事件联动系列一：刷新页面

    本示例实现了以下功能: 1.点击刷新按钮,仅刷新柱状图,而不是整个页面 2.点击柱状内容刷新柱状图,并更新title 3.点击X轴,Y轴更新title,并弹出alert. 源码代码如下: <!D ...

随机推荐

  1. go语言基础之复数类型

    1.复数类型 示例1: package main //必须有一个main包 import "fmt" func main() { var t complex128 //声明 t = ...

  2. JavaScript 你不知道的事 -- 关于函数

    接上篇Javascript 你不知道的事,直接条列了: 每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__ ...

  3. 【SSH三大框架】Hibernate基础第十一篇：对继承映射的操作

    在java中.类之间能够有继承关系.可是在数据库中是没有继承关系的.只是Hibernate是为了把面向对象的关系反映到数据库中.Hibernate为我们提供了3种方案: 第一.一个继承体系放在一张表中 ...

  4. windows8中visual studio 2010 编译boost1.57库

    参考: http://blog.csdn.net/a06062125/article/details/7773976 http://www.cppfans.org/1317.html http://w ...

  5. angularjs中的数据绑定

    这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-i ...

  6. JAVA学习目录

    开发环境以及IDE准备相关: 1.JAVA环境搭建 2.初次使用IntelliJ IDEA 3.IntelliJ IDEA界面设置 4.IntelliJ IDEA快捷键介绍 SprintBoot系列: ...

  7. KineticJS教程（7）

    KineticJS教程(7) 作者: ysm 7.图形变换 7.1.线性变化 Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换,也就是从原始的状态线性变 ...

  8. ExecutorService的execute和submit方法

    三个区别: 1.接收的参数不一样 2.submit有返回值,而execute没有 Method submit extends base method Executor.execute by creat ...

  9. 深入理解Git (三) － 微命令上篇

    1 git hash-object 曾经讲过Git用Hash值作为Git对象的名字,那么详细是哪个命令呢? 我们能够先改动一个文件: echo "hongchangfirst" & ...

  10. Spring 的ioc

    Spring的两个非常重要的功能ioc和aop 依赖反转:依赖对象的获得被反转:很多非凡的应用都是由两个或多个类通过彼此的合作来上线业务逻辑.这使得每一个对象都须要与其它对象合作,也就是说 一个对象获 ...