<%@ 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. IIS 之 功能详解

    IIS (Internet Information Services)信息服务管理器,本文以Windows10环境下的IIS为例,主要包含:FTP 服务器.Web 管理工具.万维网服务三大部分,如下表 ...

  2. springmvc 入门（1）

    1.1 Springmvc 本套课程基于spring4.X来讲解的 SpringMVC 概述 Spring 为展现层提供的基于 MVC 设计理念的优秀的 Web 框架,是目前最主流的 MVC 框架之一 ...

  3. Sword框架解析——知识采集流程页面初始化

    Sword框架解析——知识采集流程页面初始化 Sword框架解析知识采集流程页面初始化 问题解答流程采集新增页面初始化 1后台t_xt_gnzy表和BLH类 2BLH类的写法前台目录树代码 3登录系统 ...

  4. 【转】如何成为Python高手

    http://www.aqee.net/how-to-become-a-proficient-python-programmer/ 这篇文章主要是对我收集的一些文章的摘要.因为已经有很多比我有才华的人 ...

  5. windows server 2008 安装Microsoft ActiveSync 6.1提示缺少一个Windows Mobile设备中心所须要的Windows组件

    windows server 2008 安装WinCE的同步软件,须要安装Microsoft ActiveSync 6.1版本号的. 而不能安装ActiveSync|Microsoft ActiveS ...

  6. vue mixin使用

    1.概述 将一些公用方法引入到不同的组件中. 2.引入方式 (1)全局引入 // 注册全局Mixin Vue.mixin({ methods: { $touch: function() { // 用以 ...

  7. Android开发牛刀小试之“AA算钱软件”开发（一）

    事实上想去做android开发已经有非常长一段时间了,可是因为还在上课,加上老板那边的项目接连不断.也一直都没有机会抽出身来做.可是,楼主当然也不会闲着,首先我了解到android开发须要java学习 ...

  8. ADexplorer - 用来查看AD的工具

    ADExplorer是一款可以帮助查看和编辑数据库的软件.该数据库查看编辑器使用方便,操作简单,用户可通过该软件进行浏览AD数据库.自定义快速入口.查看对象属性.编辑权限.精确搜索等操作,还可以保存数 ...

  9. Android开发之定位系统

    2013-07-04 定位系统 全球定位系统(Global Positioning System, GPS), 又称全球卫星定位系统. 最少只需其中3颗卫星,就能迅速确定用户组地球所处的位置及海拔高度 ...

  10. WIN10 无法访问2003 server共享

    With Windows 10 v1803 or Spring Creators update released I have decided to do a fresh installation o ...