echarts-折线图

最新推荐文章于 2025-05-19 11:38:42 发布
原创最新推荐文章于 2025-05-19 11:38:42 发布 · 2k 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#echarts #linq.js #linq #line #折线图
数据可视化（Echarts&D3js）专栏收录该内容
19 篇文章
订阅专栏
本文展示了如何利用Echarts库创建一个折线图，并提供了实现该效果的源代码。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
效果图：

源码：

<!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.youkuaiyun.com/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>