<%@ 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. 使用工具将安卓Android apk应用转换成Bar BlackBerry 10格式

    首先要强调的是命令行工具使用起来虽然比较方便,但是对使用者有一定要求.而使用在线的网页进行转换虽然步骤比较多,但是操作比较简单.所以,对于初步接触的同学来讲,建议还是使用上一篇博文的在线转换工具比较好 ...

  2. mysql考试总结

    USE school; -- 班级表 CREATE TABLE class( cid TINYINT PRIMARY KEY AUTO_INCREMENT, caption VARCHAR(20) ) ...

  3. JS性能优化之创建文档碎片(document.createDocumentFragment）

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  4. java学习笔记1--开发环境平台总结

    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note1.html,转载请注明源地址. 1.Java程序设计语言 Java程序设计语言是一种高 ...

  5. Easyui 判断某个Div 里的表单项是否验证通过.

    var isValid = $("#divId").Form("validate"); if( isValid ){ alert("验证通过" ...

  6. python 安装whl文件

    对于安装whl格式的文件,首先要安装wheel包 利用 pip install wheel或下载再安装: 下载地址: https://pypi.python.org/pypi/wheel 解压后安装: ...

  7. windows10 onenote 显示英文 怎么办？

    转自:https://jingyan.baidu.com/article/fdffd1f85d064df3e98ca108.html 原因:首选输入法为英文. 方法:修改,调整首选为中文. 1.右下角 ...

  8. ActiveMQ的环境搭建及使用

    一:环境搭建 ActiveMQ官网下载mq在windows上的安装包:http://activemq.apache.org/,解压到某个磁盘下. 运行要环境条件:jdk安装1.8,(本人这里安装版本) ...

  9. 如何用代码方式获取Web.config中system.serviceModel/client节点的address

    以下代码GetAPIAddress将返回:http://localhost:2555/APITEST.asmx using System.Web.Configuration;using System. ...

  10. Scala数据类型中的Symbol（符号文本）

    1.属于基本类型,被映射成scala.Symbol 2.当两个Symbol值相等时,指向同一个实例 3.Symbol类型存在的意义:作为不可变的字符串,同时不必重复地为相同对象创建实例,节省资源.这类 ...