<%@ 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. 切线空间（Tangent Space）法线映射（Normal Mapping）【转】

    // 请注明出处:http://blog.csdn.net/BonChoix,谢谢~) 切线空间(Tangent Space) 切换空间,同局部空间.世界空间等一样,是3D图形学中众多的坐标系之一.切 ...

  2. 数据库 DB MySQL 基本操作 CRUD 多表 MD

    操作数据库 创建数据库:create 创建一个名称为mydb1的数据库 create database mydb1; 创建一个使用gbk字符集的mydb2数据库 create database myd ...

  3. 高性能WEB开发：DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用 ...

  4. java学习笔记9--内部类总结

    java学习笔记系列: java学习笔记8--接口总结 java学习笔记7--抽象类与抽象方法 java学习笔记6--类的继承.Object类 java学习笔记5--类的方法 java学习笔记4--对 ...

  5. PlSQL Oracle 中的 对应 SQL server 中的 IsNull(Expr1,Expr2)

    NVL(Expr1,Expr2)如果Expr1为NULL,返回Expr2的值,否则返回Expr1的值NVL2(Expr1,Expr2,Expr3)如果Expr1为NULL,返回Expr2的值,否则返回 ...

  6. wkhtmltoimage(网页剪切功能)

    1.wkhtmltoimage使用wkhtmltoimage-0.10.0_rc2-static-amd64.tar.bz2版本,最新版本为wkhtmltoimage-0.11.0_rc1-stati ...

  7. Jenkins 安装与使用--实例

    參考了博客Jenkins master在windows上安装 Jenkins的主要功能是监视反复工作的运行,比如软件project的构建详细地: *软件的持续构建和測试 本质上提供了一个易于使用的持续 ...

  8. sed 命令编辑文本

    1.sed 概述 sed 是一个非交互式文本编辑器.它能够对文本文件和标准输入进行编辑,标准输入能够是来自键盘输入.文件重定向.字符串.变量.甚至来自于管道文本. 2.sed工作流程简述 sed在处理 ...

  9. git gui :Updating the Git index failed. A rescan will be automatically started to res

    这个是由于unix系统的换行符和windows的换行符不一致造成的结果.你在安装git的时候,设置了成使用LF,即unix换行符,可是你是在windows下进行文件编辑的,所以会出现上面的警告.其实这 ...

  10. 转载：【Linux+windows】PHP5.5安装PHPRedis扩展

    首先,你必须安装了 Redis服务器,然后才能安装php-redis扩展,就像先安装mysql,然后再将php-mysql扩展安装并引入(区别是:php-redis扩展插件php没有自带,php-my ...