echarts-折线图
效果图：
源码：
<!DOCTYPE html>
<html style="overflow-x:hidden;overflow-y:auto;">
<head>
<title>折线图</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10" />
<script src="static/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="static/jquery/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
<link href="static/bootstrap/2.3.1/css_cerulean/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="static/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="static/js/echarts.js"></script>
<script type="text/javascript" src="static/linq/jquery.linq-vsdoc.js"></script>
<script type="text/javascript" src="static/linq/jquery.linq.js"></script>
<script type="text/javascript" src="static/linq/jquery.linq.min.js"></script>
<script type="text/javascript" src="static/linq/linq.js"></script>
<script type="text/javascript" src="static/linq/linq.min.js"></script></head>
<script type="text/javascript">
var dataset=eval([{"count":2751,"type":"工程建设类","year":"2011"},{"count":2958,"type":"工程建设类","year":"2012"},{"count":1614,"type":"工程建设类","year":"2013"},{"count":1725,"type":"工程建设类","year":"2014"},{"count":62,"type":"工程建设类","year":"2015"},{"count":227,"type":"其他类","year":"2011"},{"count":309,"type":"其他类","year":"2012"},{"count":149,"type":"其他类","year":"2013"},{"count":18,"type":"其他类","year":"2014"},{"count":0,"type":"其他类","year":"2015"},{"count":3,"type":"运输仓储类","year":"2013"},{"count":2,"type":"运输仓储类","year":"2014"},{"count":0,"type":"运输仓储类","year":"2012"},{"count":0,"type":"运输仓储类","year":"2015"},{"count":0,"type":"运输仓储类","year":"2011"},{"count":9,"type":"劳务服务类","year":"2014"},{"count":1,"type":"劳务服务类","year":"2015"},{"count":0,"type":"劳务服务类","year":"2012"},{"count":0,"type":"劳务服务类","year":"2011"},{"count":0,"type":"劳务服务类","year":"2013"},{"count":1,"type":"供用电类","year":"2012"},{"count":4,"type":"供用电类","year":"2013"},{"count":2,"type":"供用电类","year":"2014"},{"count":0,"type":"供用电类","year":"2015"},{"count":0,"type":"供用电类","year":"2011"},{"count":83,"type":"咨询委托类","year":"2011"},{"count":153,"type":"咨询委托类","year":"2012"},{"count":78,"type":"咨询委托类","year":"2013"},{"count":89,"type":"咨询委托类","year":"2014"},{"count":0,"type":"咨询委托类","year":"2015"},{"count":2,"type":"6融资租赁","year":"2011"},{"count":4,"type":"6融资租赁","year":"2012"},{"count":15,"type":"6融资租赁","year":"2014"},{"count":0,"type":"6融资租赁","year":"2015"},{"count":0,"type":"6融资租赁","year":"2013"},{"count":2,"type":"后勤服务类","year":"2011"},{"count":17,"type":"后勤服务类","year":"2013"},{"count":132,"type":"后勤服务类","year":"2014"},{"count":12,"type":"后勤服务类","year":"2015"},{"count":0,"type":"后勤服务类","year":"2012"},{"count":144,"type":"技术服务类","year":"2011"},{"count":183,"type":"技术服务类","year":"2012"},{"count":220,"type":"技术服务类","year":"2013"},{"count":188,"type":"技术服务类","year":"2014"},{"count":1,"type":"技术服务类","year":"2015"},{"count":12,"type":"宣传与公共关系类","year":"2013"},{"count":33,"type":"宣传与公共关系类","year":"2014"},{"count":0,"type":"宣传与公共关系类","year":"2012"},{"count":0,"type":"宣传与公共关系类","year":"2015"},{"count":0,"type":"宣传与公共关系类","year":"2011"},{"count":4,"type":"信息化建设类","year":"2013"},{"count":11,"type":"信息化建设类","year":"2014"},{"count":0,"type":"信息化建设类","year":"2012"},{"count":0,"type":"信息化建设类","year":"2015"},{"count":0,"type":"信息化建设类","year":"2011"},{"count":18,"type":"财务资产金融类","year":"2011"},{"count":52,"type":"财务资产金融类","year":"2012"},{"count":131,"type":"财务资产金融类","year":"2013"},{"count":0,"type":"财务资产金融类","year":"2015"},{"count":0,"type":"财务资产金融类","year":"2014"},{"count":10,"type":"运维检修类","year":"2011"},{"count":5,"type":"运维检修类","year":"2012"},{"count":63,"type":"运维检修类","year":"2013"},{"count":170,"type":"运维检修类","year":"2014"},{"count":2,"type":"运维检修类","year":"2015"},{"count":15,"type":"购售电输电类","year":"2011"},{"count":22,"type":"购售电输电类","year":"2012"},{"count":11,"type":"购售电输电类","year":"2013"},{"count":23,"type":"购售电输电类","year":"2014"},{"count":1,"type":"购售电输电类","year":"2015"},{"count":118,"type":"买卖类","year":"2011"},{"count":906,"type":"买卖类","year":"2012"},{"count":783,"type":"买卖类","year":"2013"},{"count":429,"type":"买卖类","year":"2014"},{"count":11,"type":"买卖类","year":"2015"}]
);
var contract_type=['工程建设类','其他类','运输仓储类','劳务服务类','供用电类','咨询委托类','融资租赁','后勤服务类','技术服务类','宣传与公共关系类','信息化建设类','财务资产金融类','运维检修类','购售电输电类','买卖类'];
var category=[];
//linq.js取数据 http://blog.csdn.net/u013147600/article/details/48518909
for(var i=0 ;i<contract_type.length;i++)
{
var queryResult = Enumerable.From(dataset)
.Where("$.type ==contract_type[i]")
.OrderBy("$.year")
.Select("$.count")
.ToArray();
category.push(queryResult);
}
$(document).ready(function() {
require.config(
{
paths:{
echarts:'static/js'
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
]
, function(ec)
{
var year=['2011','2012','2013','2014','2015'];
option = {
tooltip : {
trigger: 'axis'
},
legend: {
selectedMode:'single',
data:contract_type
},
toolbox: {
show : true,
orient: 'vertical',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data :year
}
],
yAxis : [
{
type : 'value'
}
],
series :
function()
{
var t='line';
var arr=[];
for(var i=0;i<contract_type.length;i++)
{
arr.push({
name:contract_type[i],type:t,data:category[i]
});
}
return arr;
}()
};
var myChart =ec.init(document.getElementById("myChart"));
myChart.setOption(option);
}
);
});
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/sys/user/">折线图</a></li>
</ul>
<div id="myChart" style="height:500px"></div>
</body>
</html>