<%@ 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. 附1 consul常用命令+常用选项

    之后每用到一个command或options,都会记录在这里. 常用命令command: agent 作用:运行一个consul agent join 作用:将agent加入到consul clust ...

  2. 84. Largest Rectangle in Histogram-hard

    84. Largest Rectangle in Histogram 题目 Given n non-negative integers representing the histogram's bar ...

  3. [Transducer] Make Transducer works for Iteratable collection and Object

    We've seen how we can transduce from arrays or other iterables, but plain objects aren't iterable in ...

  4. [Functional Programming] Working with two functors（Applicative Functors）-- Part2 --liftAN

    Let's examine a pointfree way to write these applicative calls. Since we know map is equal to of/ap, ...

  5. 【Project Euler 1】Multiples of 3 and 5

    题目要求是: If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and ...

  6. poj 3237(树链剖分+线段树)

    题意:给一棵树,三种操作.将第i条边的权值改为v,将a到b的路径上的边的权值全部取反,求a到b路径上边的权值的最大值. 思路:明显的树链剖分,加上线段树的操作.因为有取反的操作所以每个区间要记录最大值 ...

  7. UVALive 4857 Halloween Costumes

    区间dp.对于最左边的点: 1.在该点穿的衣服只有该点用的到,即穿上就脱下.所以dp[ l ][ r ] = min(dp[ l + 1][ r ] + 1, dp[ l ][ r ]). 2.衣服仍 ...

  8. Apple Watch 会再一次改变世界么？

    这一次苹果发布会,苹果推出了Apple Watch.他会像iPhone系列一样,去改变大家对于手表的理解么?会像iPhone一样受到大家的追捧么? 我觉得第一代的产品只可能是试探性的,真正能去引爆市场 ...

  9. centos 6.5安装docker报错（查看报错详细信息--推荐）

    (1)yum安装docker [root@namenode ~]# yum install docker-io (2)启动docker [root@namenode ~]# /etc/init.d/d ...

  10. XMPP协议实现即时通讯底层书写 （二）-- IOS XMPPFramework Demo+分析

    我希望,This is a new day! 在看代码之前,我认为你还是应该先整理一下心情,来听我说几句: 首先,我希望你是在早上边看这篇blog,然后一边開始动手操作,假设你仅仅是看blog而不去自 ...