第一步：首先引用

<link rel="stylesheet" href="css/animsition.min.css" />
		<link rel="stylesheet" href="css/drop-down.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/xsfx.css" />
<script src="js/macarons .js"></script>
		<script src="js/common.js"></script>
		<script src="js/sq_data.js"></script>

在这里我们可以看到强大的echarts图表，为了还看功能多我们增加了功能提醒和时间插件、导入导出搜索等功能。

//联动下拉
				$("#city_1").citySelect({
					url:{"citylist":[
							{"p":"新老客户","c":[{"n":"不限"},{"n":"新客户"},{"n":"老客户"}]},
							{"p":"级别","c":[{"n":"LV-0"},{"n":"LV-1"},{"n":"LV-2"},{"n":"LV-3"},{"n":"LV-4"}]}
						]},
					prov:"新老客户",
					city:"不限"
				});
				$("#city_2").citySelect({
				url:{"citylist":[
						{"p":"全国省份排名","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
						{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
						{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
					]},
				prov:"全国省份排名",
				city:"",
				dist:"",
				nodata:"none"
			});
				
			    //调用日期
			    var start = {
				    format: 'YYYY-MM-DD',
				    //minDate: '2014-01-31', //设定最小日期为当前日期
				    festival:true,
				    //isinitVal:true,
				    maxDate: $.nowDate(0), //最大日期
				    choosefun: function(elem,datas){
				        end.minDate = datas; //开始日选好后，重置结束日的最小日期
				        var iNow_maxDate = parseInt(datas.substring(0,4));
				        end.maxDate = datas.replace(new RegExp(iNow_maxDate,"g"),iNow_maxDate + 1);
				    }
				};
				var end = {
				    format: 'YYYY-MM-DD',
				    //minDate: $.nowDate(0), //设定最小日期为当前日期
				    festival:true,
				    //isinitVal:true,
				    maxDate: $.nowDate(0), //最大日期
				    choosefun: function(elem,datas){
				        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
				        var iNow_minDate = parseInt(datas.substring(0,4));
				        start.minDate = datas.replace(new RegExp(iNow_minDate,"g"),iNow_minDate - 1);
				    }
				};
				$("#inpstart").jeDate(start);
				$("#inpend").jeDate(end);