jdc_dkh_jxicustomer
Version:
JDC_dkh_jxicustomer ==== 产品经理：田宇，弥磊 设计：罗婷 交互：张钊
234 lines (229 loc) • 7.52 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=""/>
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" type="text/css" href="//misc.360buyimg.com/jdf/1.0.0/unit/ui-base/1.0.0/ui-base.css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/chart.css" />
<script type="text/javascript" src="http://misc.360buyimg.com/virtuals/popui/2.1.6/??js/lib/jquery-1.11.3.js,js/lib/seajs.js"></script>
<script type="text/javascript" src="../js/core/echarts.js"></script>
</head>
<body>
{%widget name="header"%}
<div class="content wrapper clearfix">
<div class="left fl">
<ul>
<li class="active">
<a href="#">积分仪表台</a>
</li>
<li class="active">
<a href="#">企业积分记录</a>
</li>
<li class="active">
<a href="#">员工积分记录</a>
</li>
</ul>
<div class="download"></div>
</div>
<div class="right fr">
<div class="title clearfix">
<h1 class="fl">成员详情</h1>
<div class="fr">
<input class="cancel" type="button" value="去充值" />
<input class="save" type="button" value="发积分" />
</div>
</div>
<div class="search clearfix">
<div class="cond-item fl clearfix">
<span class="fl">统计时间：</span>
<input id="start-time" class="fl" type="text" />
<span class="hr fl"></span>
<input id="end-time" class="fl" type="text" />
</div>
<input class="search-btn fr" id="search-btn" type="button" value="查询" />
</div>
<div class="spend clearfix">
<div class="company fl">
<div class="chart-title clearfix">
<h1 class="fl">
<i class="fl"></i>
<span class="fl">企业福利开支 ¥421,312.22</span>
</h1>
<span class="fr">单位：元</span>
</div>
<div class="chart"></div>
</div>
<div class="employee fl">
<div class="chart-title clearfix">
<h1 class="fl">
<i class="fl"></i>
<span class="fl">企业福利开支 ¥421,312.22</span>
</h1>
<span class="fr">单位：元</span>
</div>
<div class="chart"></div>
</div>
</div>
<div class="compare">
<div class="compare-title">
<div class="fl title-left">
<i class="fl"></i>
<span class="fl">同级组织对比</span>
<div class="fl area-list">
<ul>
<li></li>
</ul>
<b></b>
</div>
</div>
<div class="fr title-right">
<div class="fr">单位：元</div>
<div class="fr">
<ul>
<li class="fl">
<i class="fl"></i>
<span class="fl">企业开支</span>
</li>
<li class="fl">
<i class="fl"></i>
<span class="fl">员工消费</span>
</li>
</ul>
</div>
</div>
</div>
<div class="chart"></div>
</div>
</div>
</div>
<script>
var myChart1 = echarts.init($('.spend .company .chart')[0]);
var myChart2 = echarts.init($('.spend .employee .chart')[0]);
var myChart3 = echarts.init($('.compare .chart')[0]);
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
xAxis: {
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#68C5FF'
}, {
offset: 1,
color: '#0186DF'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
},
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
}]
};
var compareOption = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
legend: {
data: ['去年', '今年']
},
yAxis: {
data: ["产品部", "xxx分公司", "华北区销售一部"]
},
xAxis: [
{
type: 'value'
}
],
series: [{
name: '去年',
type: 'bar',
barGap: 0,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#68C5FF'
}, {
offset: 1,
color: '#0186DF'
}]),
}
},
data: [5, 20, 36]
}, {
name: '今年',
type: 'bar',
barGap: 0,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#7CF2F8'
}, {
offset: 1,
color: '#31CECC'
}]),
}
},
data: [10, 10, 20]
}]
}
myChart3.setOption(compareOption);
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);
myChart2.setOption(option);
myChart2.setOption({
series: [{
name: '销量',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#7CF2F8'
}, {
offset: 1,
color: '#31CECC'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
},
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
}]
})
</script>
</body>
</html>