echarts-折线图

来源：互联网发布：数据统计权威网站编辑：程序博客网时间：2024/04/30 00:34
效果图：

源码：

<!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/48518909for(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>
0 0