multiRpt.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795
  1. layui.use(['page','layer','myElement','myform','jquery','formula2','laydate','rptEditor2'], function () {
  2. var element =layui.myElement
  3. ,$=layui.jquery
  4. ,page=layui.page
  5. ,layer = layui.layer
  6. ,form=layui.myform
  7. ,formula=layui.formula2
  8. ,laydate = layui.laydate
  9. ,editor=layui.rptEditor2
  10. ;
  11. let nows=(page.getNow()).split("-");
  12. form.val("my-query-form",{year:nows[0],month:parseInt(nows[1])});
  13. laydate.render({
  14. elem: '#year'
  15. ,type: 'year'
  16. });
  17. $("button[lay-filter='savebtn']").on("click",function(){
  18. var data=getSaveData();
  19. data["year"]= $("#year").val();
  20. data["month"]= $("#month").val();
  21. saveSubmit(data);
  22. });
  23. $("button[lay-filter='querybtn']").on("click",function(){
  24. query();
  25. });
  26. $(".my-query-form").on("click",".layui-btn[lay-filter='clearbtn']",function(evn){
  27. form.clear("my-query-form");
  28. });
  29. query();
  30. function query(){
  31. let year=$("#year").val();
  32. if(year==""){
  33. year=(new Date()).getFullYear()+"";
  34. }
  35. let month=$("#month").val();
  36. querySumCompare(year,month);
  37. queryWYRatioCompare(year,month);
  38. loadCoalRatioRpt(year);
  39. loadCoalRatioChart(year);
  40. loadEnergyMthGroup(year);
  41. loadWorkloadRpt(year,month);
  42. loadWorkloadChart(year);
  43. loadCostRatioRpt(year,month);
  44. loadCostRatioChart(year,month);
  45. loadEnergyCompareRpt(year,month);
  46. loadEnergyCompareChart(year,month);
  47. }
  48. function saveSubmit(submitData){
  49. page.ajax({
  50. url:"rpt/saveWYRatioCompare.do",
  51. dataType:"json",
  52. data:submitData
  53. },function(resp){
  54. layer.close(loading);
  55. if(resp.success){
  56. layer.msg("操作成功!");
  57. queryWYRatioCompare(submitData.year,submitData.month);
  58. }
  59. else{
  60. layer.msg(resp.exception);
  61. }
  62. },function(){
  63. layer.close(loading);
  64. layer.msg("网络请求出现错误");
  65. });
  66. loading = layer.msg('正在保存数据', {icon: 16, shade: 0.3, time:0});
  67. }
  68. function getSaveData(){
  69. var data={};
  70. $("#ratioCompareTab").find(".editable").each(function(idx,itm){
  71. data[$(itm).data("field")]=$(itm).find(".rpt-table-cell").text();
  72. });
  73. return data;
  74. }
  75. //占比同比报表
  76. function queryWYRatioCompare(yyyy,mm){
  77. page.ajax({
  78. url:"rpt/yearWYRatioCompare.do",
  79. dataType:"text",
  80. data:{year:yyyy,month:mm}
  81. },function(resp){
  82. layer.close(loading);
  83. if(resp.indexOf("rpt-table-box")>=0){
  84. $("#ratioRpt").html(resp);
  85. formula.start($("#ratioRpt").find(".rpt-table-main>.rpt-table"));
  86. rptSizing($,$("#ratioRpt"));
  87. return;
  88. }
  89. var respObj=JSON.parse(resp);
  90. if(respObj.success!=null&&respObj.success==false){
  91. layer.msg(respObj.exception);
  92. }
  93. },function(){
  94. layer.close(loading);
  95. layer.msg("网络请求出现错误");
  96. });
  97. }
  98. //总量同比
  99. function querySumCompare(yyyy,mm){
  100. page.ajax({
  101. url:"rpt/yearSumCompare.do",
  102. dataType:"text",
  103. data:{year:yyyy,month:mm}
  104. },function(resp){
  105. layer.close(loading);
  106. if(resp.indexOf("rpt-table-box")>=0){
  107. $("#sumRpt").html(resp);
  108. formula.start($("#sumRpt").find(".rpt-table-main>.rpt-table"));
  109. rptSizing($,$("#sumRpt"));
  110. return;
  111. }
  112. var respObj=JSON.parse(resp);
  113. if(respObj.success!=null&&respObj.success==false){
  114. layer.msg(respObj.exception);
  115. }
  116. },function(){
  117. layer.close(loading);
  118. layer.msg("网络请求出现错误");
  119. });
  120. loading = layer.msg('正在加载数据', {icon: 16, shade: 0.3, time:0});
  121. }
  122. //用能用水 耗量同比
  123. function loadEnergyCompareRpt(yyyy,mm){
  124. page.ajax({
  125. dataType:"text",
  126. url:"home/rpt/energyCompareRpt.do",
  127. data:{type:"grid",year:yyyy,month:mm}
  128. },function(resp){
  129. if(resp.indexOf("rpt-table-box")>=0){
  130. $("#energyComparebox").html(resp);
  131. formula.start($("#energyComparebox").find(".rpt-table-main>.rpt-table"));
  132. rptSizing($,$("#energyComparebox"));
  133. return;
  134. }
  135. },function(){
  136. layer.msg("网络请求出现错误");
  137. });
  138. }
  139. function loadEnergyCompareChart(yyyy,mm){
  140. page.ajax({
  141. dataType:"json",
  142. url:"home/rpt/energyCompareRpt.do",
  143. data:{type:"chart",year:yyyy,month:mm}
  144. },function(resp){
  145. if(!resp.success){
  146. layer.msg(resp.exception);
  147. }
  148. else{
  149. var yearData=resp.data.yearSum;
  150. var ary1=[yearData.wpg.ngasCount,yearData.wpg.powerCount,yearData.oilTotal,yearData.coilTotal,yearData.wpg.lgasCount,yearData.coals,yearData.wpg.waterCount];
  151. yearData=resp.data.preYearSum;
  152. var ary2=[yearData.wpg.ngasCount,yearData.wpg.powerCount,yearData.oilTotal,yearData.coilTotal,yearData.wpg.lgasCount,yearData.coals,yearData.wpg.waterCount];
  153. createEnergyCompareChart($,"energyCompareChartbox",ary1,ary2);
  154. }
  155. },function(){
  156. layer.msg("网络请求出现错误");
  157. });
  158. }
  159. //加载工作量统计数据
  160. function loadWorkloadRpt(yyyy,mm){
  161. page.ajax({
  162. dataType:"text",
  163. url:"home/rpt/workloadRpt.do",
  164. data:{year:yyyy,month:mm}
  165. },function(resp){
  166. if(resp.indexOf("rpt-table-box")>=0){
  167. $("#workloadbox").html(resp);
  168. formula.start($("#workloadbox").find(".rpt-table-main>.rpt-table"));
  169. rptSizing($,$("#workloadbox"));
  170. return;
  171. }
  172. },function(){
  173. layer.msg("网络请求出现错误");
  174. });
  175. }
  176. function loadWorkloadChart(yyyy){
  177. page.ajax({
  178. dataType:"json",
  179. url:"home/rpt/workloadRptChart.do",
  180. data:{year:yyyy}
  181. },function(resp){
  182. if(!resp.success){
  183. layer.msg(resp.exception);
  184. }
  185. else{
  186. //createChart($,"workloadChartbox",resp.data.wc,resp.data.prewc);
  187. create2SeriesChart($,"workloadChartbox",resp.data.wc,resp.data.prewc,"井次");
  188. }
  189. },function(){
  190. layer.msg("网络请求出现错误");
  191. });
  192. }
  193. //用能用水费用占比统计
  194. function loadCostRatioRpt(yyyy,mm){
  195. page.ajax({
  196. dataType:"text",
  197. url:"home/rpt/costRatioRpt.do",
  198. data:{type:"grid",year:yyyy,month:mm}
  199. },function(resp){
  200. if(resp.indexOf("rpt-table-box")>=0){
  201. $("#costRatiobox").html(resp);
  202. formula.start($("#costRatiobox").find(".rpt-table-main>.rpt-table"));
  203. rptSizing($,$("#costRatiobox"));
  204. return;
  205. }
  206. },function(){
  207. layer.msg("网络请求出现错误");
  208. });
  209. }
  210. function loadCostRatioChart(yyyy,mm){
  211. page.ajax({
  212. dataType:"json",
  213. url:"home/rpt/costRatioRpt.do",
  214. data:{type:"chart",year:yyyy,month:mm}
  215. },function(resp){
  216. if(!resp.success){
  217. layer.msg(resp.exception);
  218. }
  219. else{
  220. var yearData=resp.data.yearSum;
  221. var ary1=[yearData.wpg.ngasCost,yearData.wpg.powerCost,yearData.erpkl.oilMoney,yearData.erpkl.coilMoney,yearData.wpg.lgasCost];
  222. yearData=resp.data.preYearSum;
  223. var ary2=[yearData.wpg.ngasCost,yearData.wpg.powerCost,yearData.erpkl.oilMoney,yearData.erpkl.coilMoney,yearData.wpg.lgasCost];
  224. createCostRatioChart($,"costRatioChartbox",ary1,ary2);
  225. }
  226. },function(){
  227. layer.msg("网络请求出现错误");
  228. });
  229. }
  230. //用能折算标准煤占比
  231. function loadCoalRatioRpt(yyyy){
  232. page.ajax({
  233. dataType:"text",
  234. url:"home/rpt/coalRatioRpt.do",
  235. data:{type:"grid",year:yyyy}
  236. },function(resp){
  237. if(resp.indexOf("rpt-table-box")>=0){
  238. $("#coalRatiobox").html(resp);
  239. formula.start($("#coalRatiobox").find(".rpt-table-main>.rpt-table"));
  240. rptSizing($,$("#coalRatiobox"));
  241. return;
  242. }
  243. },function(){
  244. layer.msg("网络请求出现错误");
  245. });
  246. }
  247. function loadCoalRatioChart(yyyy){
  248. page.ajax({
  249. dataType:"json",
  250. url:"home/rpt/coalRatioRpt.do",
  251. data:{type:"chart",year:yyyy}
  252. },function(resp){
  253. if(!resp.success){
  254. layer.msg(resp.exception);
  255. }
  256. else{
  257. var yearData=resp.data.yearSum;
  258. var chartData=[];
  259. chartData.push({name:"天然气",value:yearData.wpg.ngasCoal||0});
  260. chartData.push({name:"电",value:yearData.wpg.powerCoal||0});
  261. chartData.push({name:"液化气",value:yearData.wpg.lgasCoal||0});
  262. chartData.push({name:"汽油",value:yearData.erpkl.oilCoal||0});
  263. chartData.push({name:"柴油",value:yearData.erpkl.coilCoal||0});
  264. createCoalRatioChart($,"coalRatioChartbox",chartData);
  265. }
  266. },function(){
  267. layer.msg("网络请求出现错误");
  268. });
  269. }
  270. //用能用水按月统计
  271. function loadEnergyMthGroup(yyyy){
  272. page.ajax({
  273. dataType:"text",
  274. url:"home/rpt/energyMonthCost.do",
  275. data:{year:yyyy}
  276. },function(resp){
  277. if(resp.indexOf("rpt-table-box")>=0){
  278. $("#energyMthGroupbox").html(resp);
  279. formula.start($("#energyMthGroupbox").find(".rpt-table-main>.rpt-table"));
  280. rptSizing($,$("#energyMthGroupbox"));
  281. loadEnergyMthGroupChart(yyyy);
  282. return;
  283. }
  284. },function(){
  285. layer.msg("网络请求出现错误");
  286. });
  287. }
  288. function decimalFormat(data,decimal){
  289. return data==null?null:data.toFixed(decimal);
  290. }
  291. function getDFData(pdata,key1,key2,decimal){
  292. if(!pdata[key1]||!pdata[key1][key2]){
  293. return null;
  294. }
  295. return decimalFormat(pdata[key1][key2],decimal);
  296. }
  297. //用能用水按月统计图,绘制前先获取去年的数据
  298. function loadEnergyMthGroupChart(yyyy){
  299. var preYear=parseInt(yyyy)-1;
  300. page.ajax({
  301. dataType:"json",
  302. url:"home/rpt/energyMonthCost.do",
  303. data:{type:"chart",year:preYear}
  304. },function(resp){
  305. if(!resp.success){
  306. return;
  307. }
  308. var preData=resp.data;
  309. var mths=["01","02","03","04","05","06","07","08","09","10","11","12"];
  310. var ngas=[],power=[],oil=[],coil=[],lgas=[],coal=[],water=[],coil100km=[],coilWellCount=[],oil100km=[],oilWellCount=[],engineWellCount=[],engineCostTon=[];
  311. for(var m=0,len=mths.length;m<len;m++){
  312. ngas.push(decimalFormat(preData[mths[m]].wpg.ngasCount,4));
  313. power.push(decimalFormat(preData[mths[m]].wpg.powerCount,4));
  314. oil.push(decimalFormat(preData[mths[m]].oilTotal,3));
  315. coil.push(decimalFormat(preData[mths[m]].coilTotal,3));
  316. lgas.push(decimalFormat(preData[mths[m]].wpg.lgasCount,3));
  317. coal.push(decimalFormat(preData[mths[m]].coals,3));
  318. water.push(decimalFormat(preData[mths[m]].wpg.waterCount,4));
  319. coil100km.push(getDFData(preData[mths[m]],"indConsume","coilLiter100km",3));
  320. coilWellCount.push(getDFData(preData[mths[m]],"indConsume","coilLiterWellCount",3));
  321. oil100km.push(getDFData(preData[mths[m]],"indConsume","oilLiter100km",3));
  322. oilWellCount.push(getDFData(preData[mths[m]],"indConsume","oilLiterWellCount",3));
  323. engineWellCount.push(getDFData(preData[mths[m]],"indConsume","engineLiterWellCount",3));
  324. engineCostTon.push(getDFData(preData[mths[m]],"indConsume","engineCostTon",3));
  325. }
  326. //下一步从报表中获取当年数据并进行绘制,顺序对应
  327. var dataMap={'coal':coal,'power':power,'oil':oil,'coil':coil,'oil100km':oil100km,'coil100km':coil100km,'oilWellCount':oilWellCount,'coilWellCount':coilWellCount,'lgas':lgas,'engineCostTon':engineCostTon,'water':water,'engineWellCount':engineWellCount,'ngas':ngas};
  328. //var dataAry=[coal,power,oil,coil,oil100km,coil100km,oilWellCount,coilWellCount,lgas,engineCostTon,water,engineWellCount,ngas];
  329. startEnergyMthGroupChart(dataMap);
  330. },function(){
  331. layer.msg("网络请求出现错误");
  332. });
  333. }
  334. //从报表中获取当年数据并进行绘制
  335. function startEnergyMthGroupChart(dataMap){
  336. var $tab=$("#energyMthGroupbox").find(".rpt-table-main>.rpt-table");
  337. var yunit=null,dataSort=null,chartboxId=null;
  338. var datas=null;
  339. $tab.find("tr").each(function(idx,tr){
  340. datas=[];
  341. dataSort=$(tr).data("sort");
  342. $(tr).find("td").each(function(i,td){
  343. if(i==0){
  344. yunit=$(td).find(".rpt-table-cell").text();
  345. }
  346. else{
  347. datas.push($(td).find(".rpt-table-cell").text());
  348. }
  349. });
  350. chartboxId=$("div[data-chart='"+dataSort+"']")[0].id;
  351. if(yunit.indexOf("天然气")>=0){
  352. createMonthGrpNgasChart($,chartboxId,datas,dataMap[dataSort],yunit);
  353. }
  354. else{
  355. create2SeriesChart($,chartboxId,datas,dataMap[dataSort],yunit);
  356. }
  357. });
  358. }
  359. });
  360. function createCoalRatioChart($,id,dataAry){
  361. var myChart = echarts.init($('#'+id)[0],'light');
  362. var option = {
  363. color: ['#003366', '#e5323e','#108f83','#05b90e','#d9b50c'],
  364. tooltip: {
  365. trigger: 'item',
  366. formatter: '{a} <br/>{b} : {c} ({d}%)'
  367. },
  368. series: [
  369. {
  370. name: '能耗折算标准煤',
  371. type: 'pie',
  372. radius: '55%',
  373. center: ['50%', '50%'],
  374. //roseType: 'radius',
  375. data: dataAry.sort(function (a, b) { return a.value - b.value; }),
  376. emphasis: {
  377. itemStyle: {
  378. shadowBlur: 10,
  379. shadowOffsetX: 0,
  380. shadowColor: 'rgba(0, 0, 0, 0.5)'
  381. }
  382. }
  383. }
  384. ]
  385. };
  386. myChart.setOption(option);
  387. }
  388. function createEnergyCompareChart($,id,ary1,ary2){
  389. var myChart = echarts.init($('#'+id)[0],'light');
  390. var option = {
  391. color: ['#003366', '#e5323e'],
  392. legend:{
  393. icon:'circle',
  394. bottom:0,
  395. textStyle:{
  396. color:'#666'
  397. }
  398. },
  399. tooltip: {
  400. trigger: 'axis',
  401. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  402. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  403. }
  404. },
  405. grid: {
  406. left: '3%',
  407. right: '4%',
  408. bottom: '30',
  409. containLabel: true
  410. },
  411. xAxis: [
  412. {
  413. type: 'category',
  414. data: ['天然气', '电', '汽油', '柴油', '液化气','标煤','水'],
  415. axisTick: {
  416. alignWithLabel: true
  417. }
  418. }
  419. ],
  420. yAxis: [
  421. {
  422. type: 'value',
  423. name:'消耗量'
  424. }
  425. ],
  426. series: [
  427. {
  428. name: '本年累计',
  429. type: 'bar',
  430. barGap: 0,
  431. data: ary1
  432. },
  433. {
  434. name: '去年同期累计',
  435. type: 'bar',
  436. data: ary2
  437. }
  438. ]
  439. };
  440. myChart.setOption(option);
  441. }
  442. function createCostRatioChart($,id,ary1,ary2){
  443. var myChart = echarts.init($('#'+id)[0],'light');
  444. var option = {
  445. color: ['#003366', '#e5323e'],
  446. legend:{
  447. icon:'circle',
  448. bottom:0,
  449. textStyle:{
  450. color:'#666'
  451. }
  452. },
  453. tooltip: {
  454. trigger: 'axis',
  455. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  456. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  457. }
  458. },
  459. grid: {
  460. left: '3%',
  461. right: '4%',
  462. bottom: '30',
  463. containLabel: true
  464. },
  465. xAxis: [
  466. {
  467. type: 'category',
  468. data: ['天然气', '电', '汽油', '柴油', '液化气'],
  469. axisTick: {
  470. alignWithLabel: true
  471. }
  472. }
  473. ],
  474. yAxis: [
  475. {
  476. type: 'value',
  477. name:'消耗费用(万元)'
  478. }
  479. ],
  480. series: [
  481. {
  482. name: '本年累计',
  483. type: 'bar',
  484. barGap: 0,
  485. data: ary1
  486. },
  487. {
  488. name: '上年同期累计',
  489. type: 'bar',
  490. data: ary2
  491. }
  492. ]
  493. };
  494. myChart.setOption(option);
  495. }
  496. function createChart($,id,ary1,ary2){
  497. for(var i=0,len=ary1.length;i<len;i++){
  498. if(parseFloat(ary1[i])==0){
  499. ary1[i]='';
  500. }
  501. }
  502. for(var i=0,len=ary2.length;i<len;i++){
  503. if(parseFloat(ary2[i])==0){
  504. ary2[i]='';
  505. }
  506. }
  507. var myChart = echarts.init($('#'+id)[0],'light');
  508. var option = {
  509. legend:{
  510. icon:'circle',
  511. bottom:5,
  512. textStyle:{
  513. color:'#666'
  514. }
  515. },
  516. grid:{
  517. show:true,
  518. borderColor:'#406f9f',
  519. top:35,
  520. right:15
  521. },
  522. tooltip: {
  523. trigger: 'axis',
  524. formatter: function(params) {
  525. var res = "<div><p>" + params[0].name + "月</p></div>";
  526. for (var i = 0; i < params.length; i++) {
  527. if (params[i].data != undefined) {
  528. res +=
  529. "<p>" + params[i].marker + params[i].seriesName + ":" + params[i].data + "</p>";
  530. }
  531. }
  532. return res;
  533. }
  534. },
  535. textStyle: {
  536. color: 'rgba(0, 0, 0, 0.9)'
  537. },
  538. xAxis: {
  539. type: 'category',
  540. boundaryGap: false,
  541. axisLine:{
  542. lineStyle:{
  543. color:'#406f9f'
  544. }
  545. },
  546. data: ['1','2','3','4','5','6', '7', '8', '9', '10', '11', '12']
  547. },
  548. yAxis: {
  549. type: 'value',
  550. name:'井次',
  551. axisLine:{
  552. lineStyle:{
  553. color:'#406f9f'
  554. }
  555. },
  556. splitLine:{
  557. lineStyle:{
  558. color:'#4e8dcc'
  559. }
  560. }
  561. },
  562. series: [
  563. {
  564. name: '本年',
  565. type: 'line',
  566. //stack: '总量',
  567. data:ary1
  568. },
  569. {
  570. name: '上一年',
  571. type: 'line',
  572. //stack: '总量',
  573. data: ary2
  574. }]
  575. };
  576. myChart.setOption(option);
  577. /*setTimeout(function (){
  578. window.onresize = function () {
  579. myChart.resize();
  580. }
  581. },200);*/
  582. // setTimeout(function(){myChart.resize();},200);
  583. }
  584. function createMonthGrpNgasChart($,id,ary1,ary2,yUnit){
  585. var myChart = echarts.init($('#'+id)[0],'light');
  586. var option = {
  587. color: ['#003366', '#e5323e'],
  588. legend:{
  589. icon:'circle',
  590. bottom:0,
  591. textStyle:{
  592. color:'#666'
  593. }
  594. },
  595. tooltip: {
  596. trigger: 'axis',
  597. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  598. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  599. }
  600. },
  601. grid: {
  602. left: '3%',
  603. right: '4%',
  604. bottom: '30',
  605. containLabel: true
  606. },
  607. xAxis: [
  608. {
  609. type: 'category',
  610. data: ['1','2','3','4','5','6', '7', '8', '9', '10', '11', '12'],
  611. axisTick: {
  612. alignWithLabel: true
  613. }
  614. }
  615. ],
  616. yAxis: [
  617. {
  618. type: 'value',
  619. name:yUnit
  620. }
  621. ],
  622. series: [
  623. {
  624. name: '本年',
  625. type: 'bar',
  626. barGap: 0,
  627. data: ary1
  628. },
  629. {
  630. name: '上一年',
  631. type: 'bar',
  632. data: ary2
  633. }
  634. ]
  635. };
  636. myChart.setOption(option);
  637. }
  638. function create2SeriesChart($,id,ary1,ary2,yunit){
  639. ary1=ary1||[];
  640. ary2=ary2||[];
  641. for(var i=0,len=ary1.length;i<len;i++){
  642. if(parseFloat(ary1[i])==0){
  643. ary1[i]='';
  644. }
  645. }
  646. for(var i=0,len=ary2.length;i<len;i++){
  647. if(parseFloat(ary2[i])==0){
  648. ary2[i]='';
  649. }
  650. }
  651. var myChart = echarts.init($('#'+id)[0],'light');
  652. var option = {
  653. legend:{
  654. icon:'circle',
  655. bottom:5,
  656. textStyle:{
  657. color:'#666'
  658. }
  659. },
  660. grid:{
  661. show:true,
  662. borderColor:'#406f9f',
  663. top:35,
  664. right:15
  665. },
  666. tooltip: {
  667. trigger: 'axis',
  668. formatter: function(params) {
  669. var res = "<div><p>" + params[0].name + "月</p></div>";
  670. for (var i = 0; i < params.length; i++) {
  671. if (params[i].data != undefined) {
  672. res +=
  673. "<p>" + params[i].marker + params[i].seriesName + ":" + params[i].data + "</p>";
  674. }
  675. }
  676. return res;
  677. }
  678. },
  679. textStyle: {
  680. color: 'rgba(0, 0, 0, 0.9)'
  681. },
  682. xAxis: {
  683. type: 'category',
  684. boundaryGap: false,
  685. axisLine:{
  686. lineStyle:{
  687. color:'#406f9f'
  688. }
  689. },
  690. data: ['1','2','3','4','5','6', '7', '8', '9', '10', '11', '12']
  691. },
  692. yAxis: {
  693. type: 'value',
  694. name:yunit,
  695. axisLine:{
  696. lineStyle:{
  697. color:'#406f9f'
  698. }
  699. },
  700. splitLine:{
  701. lineStyle:{
  702. color:'#4e8dcc'
  703. }
  704. }
  705. },
  706. series: [
  707. {
  708. name: "本年",
  709. type: 'line',
  710. connectNulls:true,
  711. data:ary1
  712. },
  713. {
  714. name: "上一年",
  715. type: 'line',
  716. connectNulls:true,
  717. data:ary2
  718. }]
  719. };
  720. myChart.setOption(option);
  721. }