common.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647
  1. var indexName = {'index_128': '预约总量', 'index_129': '居民预约量', 'index_130': '代预约量'};
  2. function getSignDate(){ //获取初始化签约年
  3. var nowdate = new Date();
  4. var year = nowdate.getFullYear();
  5. var month = nowdate.getMonth() + 1;
  6. if(year>=2023){
  7. year = year
  8. }else if(month<=6){
  9. year = year - 1
  10. }
  11. return year
  12. }
  13. function getStartDate(chooseYear){
  14. // 按年度来计算的时候,开始时间是该年度7月1号还是到下一个年的6月30号结束
  15. // 2022年及以前开始时间07-01
  16. // 2023及以后开始时间01-01
  17. if(chooseYear == 2016){
  18. return chooseYear + "-08-01";
  19. }else if(chooseYear <= 2022) {
  20. return chooseYear+'-07-01';
  21. }else if(chooseYear >= 2023){
  22. return chooseYear+'-01-01';
  23. }
  24. }
  25. //获取结束时间
  26. function getEndDate(chooseYear){
  27. var nowdate = new Date();
  28. var year = nowdate.getFullYear();
  29. var month = nowdate.getMonth() + 1;
  30. var day = nowdate.getDate();
  31. var endDate = ''
  32. if(chooseYear < '2022') {
  33. endDate = new Date((parseInt(chooseYear)+1) + '-06-30');
  34. }else{
  35. endDate = new Date((parseInt(chooseYear)) + '-12-31');
  36. }
  37. var now = new Date();
  38. if(now <= endDate){
  39. return now.format("yyyy-MM-dd");
  40. }else{
  41. if(chooseYear < '2022') {
  42. return (parseInt(chooseYear)+1) + '-06-30';
  43. }else{
  44. return (parseInt(chooseYear)) + '-12-31';
  45. }
  46. }
  47. }
  48. //获取结束时间29
  49. function getEndDate29(chooseYear){
  50. chooseYear = parseInt(chooseYear);
  51. var endDate = new Date((chooseYear+1) + '-06-29'),
  52. now = new Date();
  53. if(now <= endDate){
  54. return now.format("yyyy-MM-dd");
  55. }else{
  56. return (chooseYear+1) + '-06-29';
  57. }
  58. }
  59. /**
  60. * 获取多少天前的日期
  61. */
  62. function getDateBefore(days) {
  63. var now = new Date();
  64. var date = new Date(now.getTime() - days * 24 * 3600 * 1000);
  65. var year = date.getFullYear();
  66. var month = date.getMonth() + 1;
  67. var day = date.getDate();
  68. var hour = date.getHours();
  69. var minute = date.getMinutes();
  70. var second = date.getSeconds();
  71. return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
  72. }
  73. /*
  74. * 获取用来排序的字段值,返回数组
  75. * 参数: list - 列表, key - 字段的名称
  76. */
  77. function getKeyValueArr(list, key){
  78. var arr = [];
  79. for(var k in list){
  80. arr.push(list[k][key]);
  81. }
  82. return arr;
  83. }
  84. /*
  85. * 排名
  86. */
  87. function soreRank(arr){
  88. var temp = [];
  89. var lis = [];
  90. for(var i=0;i<arr.length;i++){
  91. lis.push(arr[i]);
  92. }
  93. lis = _.uniq(lis);
  94. for(var i=0;i<arr.length;i++){
  95. temp[i] = lis.indexOf(arr[i])+1;
  96. }
  97. return temp;
  98. }
  99. /*
  100. * 绘制饼图数据处理 // elId, arry, title, hasNum,colors,radius,noLedend,param
  101. */
  102. function handlePieData(arg){
  103. var legend = {
  104. orient: 'vertical',
  105. right: arg.legendRight||'15%',
  106. y:'center',
  107. };
  108. var colorList=[]
  109. legendNames = [];
  110. var arr1 = _.map(arg.arry, function(o,i){
  111. var count = 0
  112. if(arg.param){
  113. count = parseFloat(o[arg.param])
  114. }else{
  115. count = parseFloat(o.amount)
  116. }
  117. var obj = {
  118. name: o[arg.nameparam]||o.name,
  119. count: count
  120. };
  121. legendNames.push(obj);
  122. if(o.code){
  123. colorList.push(arg.colors[o.code])
  124. }else{
  125. colorList.push(arg.colors[i])
  126. }
  127. return {
  128. value: count,
  129. name: o[arg.nameparam]||o.name
  130. }
  131. });
  132. legend.formatter = function(name){
  133. if(arg.hasNum){
  134. var target;
  135. for (var i = 0, l = legendNames.length; i < l; i++) {
  136. if (legendNames[i].name == name) {
  137. target = parseInt(legendNames[i].count);
  138. }
  139. }
  140. return name+": "+target
  141. }else{
  142. return name
  143. }
  144. }
  145. if(arg.noLedend){ //true时无注释
  146. drawPie(arg.elId, arr1, colorList, null, arg.position||['50%', '51%'], arg.radius||['70%', '90%'], arg.title)
  147. }else{
  148. drawPie(arg.elId, arr1, colorList, legend, arg.position||['30%', '51%'], arg.radius||['70%', '90%'], arg.title)
  149. }
  150. }
  151. /*
  152. * 绘制饼图
  153. */
  154. function drawPie(elId, arry, color, legend, center, radius, title){
  155. var pieChart = echarts.init(document.getElementById(elId));
  156. var options = {
  157. tooltip: {
  158. trigger: 'item',
  159. formatter: "{b} : {c} ({d}%)",
  160. // position: ['50%', '50%']
  161. },
  162. color: color,
  163. series: [
  164. {
  165. type:'pie',
  166. radius: ['80%', '99%'],
  167. startAngle: 270,
  168. legendHoverLink: false,
  169. hoverAnimation: false,
  170. avoidLabelOverlap: false,
  171. label: {
  172. normal: {
  173. show: false,
  174. textStyle: {
  175. color: "#000",
  176. }
  177. }
  178. },
  179. labelLine: {
  180. normal: {
  181. show: false
  182. }
  183. },
  184. data:arry,
  185. }]
  186. };
  187. if(legend){
  188. options.legend = legend;
  189. }
  190. if(center){
  191. options.series[0].center = center;
  192. }
  193. if(radius){
  194. options.series[0].radius = radius;
  195. }
  196. if(title){
  197. options.title = title
  198. }
  199. pieChart.clear();
  200. pieChart.setOption(options);
  201. }
  202. /*
  203. * 绘制饼图
  204. * arry [{name: '', value: ''}]
  205. * color ['#ffc800', '#17b3ec']
  206. * silent 图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件
  207. */
  208. function drawPieChart(elId, arry, color, silent){
  209. var myChart = echarts.init(document.getElementById(elId));
  210. var option = {
  211. tooltip: {
  212. trigger: 'item',
  213. formatter: "{b} : {c} ({d}%)",
  214. position: ['50%', '50%']
  215. },
  216. color: color,
  217. series: [
  218. {
  219. type:'pie',
  220. radius: ['80%', '99%'],
  221. startAngle: 270,
  222. legendHoverLink: false,
  223. hoverAnimation: false,
  224. avoidLabelOverlap: false,
  225. silent: silent,
  226. label: {
  227. normal: {
  228. show: false,
  229. textStyle: {
  230. color: "#000"
  231. }
  232. }
  233. },
  234. labelLine: {
  235. normal: {
  236. show: false
  237. }
  238. },
  239. data:arry
  240. }]
  241. };
  242. $("#"+elId).removeAttr("_echarts_instance_");
  243. myChart.setOption(option);
  244. return myChart;
  245. }
  246. /**
  247. * 绘制柱状图
  248. */
  249. function drawBarChart(el, xData, yData, color, name){
  250. var myChart = echarts.init(document.getElementById(el));
  251. // 指定图表的配置项和数据
  252. var option = {
  253. tooltip: {
  254. trigger: 'item'
  255. },
  256. toolbox: {
  257. dataZoom: true,
  258. show: true,
  259. orient: 'vertical',
  260. x: 'right',
  261. y: 'center'
  262. },
  263. grid: {
  264. left: '20px',
  265. right: '20px',
  266. bottom: '20px',
  267. top: '20px',
  268. containLabel: true
  269. },
  270. xAxis: [{
  271. type: 'category',
  272. data: xData,
  273. axisLabel: {
  274. interval:0,//横轴信息全部显示
  275. },
  276. splitLine: {
  277. show: false
  278. }
  279. }],
  280. yAxis: [{
  281. type: 'value',
  282. splitLine: {show:false}
  283. }],
  284. series: [{
  285. clickable: true,
  286. name: name,
  287. itemStyle : {
  288. normal: {
  289. label : {
  290. show: true, position: 'top'
  291. },
  292. color: color
  293. }
  294. },
  295. barWidth: 20,
  296. type: 'bar',
  297. data: yData
  298. }]
  299. };
  300. // 使用刚指定的配置项和数据显示图表。
  301. myChart.setOption(option);
  302. return myChart;
  303. }
  304. /**
  305. * 绘制折线图数据处理
  306. * @param {Object} elId div的id值
  307. * @param {Object} data 数据值
  308. * @param {Object} selectedDateType true的时候x轴值年-月-日 1-日,2-周, 3-月
  309. */
  310. function getChartData(elId, data, selectedDateType,hasLegend,title,unit){
  311. var dataZoom_end,
  312. xDatas = [],
  313. yDatas = [],
  314. names = [],
  315. colors = ['#12b7f5', '#cd67fd','#FF9526'];
  316. for(var p in data){
  317. if(hasLegend){
  318. names.push(indexName[p]);
  319. }
  320. var xData = _.map(data[p], function(o){
  321. return o.range;
  322. });
  323. var yData = _.map(data[p], function(o){
  324. return o.amount;
  325. });
  326. xDatas.push(xData);
  327. yDatas.push(yData);
  328. var lastIndex = yData.length % 10;
  329. if(yData.length >10 ){
  330. dataZoom_end = 100-(9/yData.length)*100;
  331. }else{
  332. dataZoom_end = 0;
  333. }
  334. }
  335. setTimeout(function(){
  336. EventBus.$emit("draw-line-chart", {
  337. panelName : title,
  338. quotaNames : names,
  339. xData : xDatas[0],
  340. yDatas : yDatas,
  341. colors : colors,
  342. selectedDateType: selectedDateType,
  343. nowlineid : elId,
  344. unit:unit
  345. });
  346. },10)
  347. }
  348. /**
  349. * 绘制柱状图数据处理
  350. * @param {Object} elId div的id值
  351. * @param {Object} data 数据值
  352. */
  353. function getBarData(arg){
  354. var dataZoom_end,
  355. xDatas = [],
  356. yDatas = [],
  357. names = [],
  358. colors = ['#12b7f5', '#cd67fd','#FF9526'];
  359. if(arg.colors){
  360. colors = arg.colors
  361. }
  362. for(var p in arg.data){
  363. if(arg.hasLegend){
  364. names.push(arg.indexNames[p]);
  365. }
  366. var xData = _.map(arg.data[p].data||arg.data[p], function(o){
  367. return o[arg.rangeParams]||o.range;
  368. });
  369. var yData = _.map(arg.data[p].data||arg.data[p], function(o){
  370. return o[arg.amountParams]||o.amount;
  371. });
  372. xDatas.push(xData);
  373. yDatas.push(yData);
  374. var lastIndex = yData.length % 10;
  375. if(yData.length >10 ){
  376. dataZoom_end = 100-(9/yData.length)*100;
  377. }else{
  378. dataZoom_end = 0;
  379. }
  380. }
  381. if(arg.typeV){
  382. drawBarV({elId:arg.elId, name:names, dataZoom_end:dataZoom_end,
  383. xData:xDatas[0], yDatas:yDatas, colors:colors,barCategoryGap:arg.barCategoryGap,argInit:arg})
  384. }else{
  385. drawBarH({elId:arg.elId, name:names, dataZoom_end:dataZoom_end,
  386. xData:xDatas[0], yDatas:yDatas, colors:colors,barCategoryGap:arg.barCategoryGap,argInit:arg})
  387. }
  388. }
  389. function drawBarH(arg){
  390. var barCharts = echarts.init(document.getElementById(arg.elId));
  391. var options = {
  392. tooltip: {
  393. trigger: 'axis',
  394. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  395. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  396. },
  397. textStyle:{
  398. align:'left'
  399. },
  400. formatter:function(datas){
  401. var res = datas[0].name + '<br/>'
  402. for (var i = 0, length = datas.length; i < length; i++) {
  403. var unit = ""
  404. if(arg.argInit.units){
  405. unit = arg.argInit.units[datas[i].seriesName]
  406. }
  407. res += datas[i].seriesName + ':'
  408. + datas[i].value + unit +'<br/>'
  409. }
  410. return res
  411. }
  412. },
  413. calculable: false,
  414. grid: {
  415. borderWidth: 0,
  416. top:'20px',
  417. left: '20px',
  418. right: '20px',
  419. bottom: '20px',
  420. containLabel: true
  421. },
  422. xAxis: [{
  423. type: 'category',
  424. axisLine: {
  425. lineStyle: {
  426. type: 'solid',
  427. color: '#333333', //左边线的颜色
  428. width: '1' //坐标线的宽度
  429. }
  430. },
  431. axisTick: {
  432. show: false
  433. },
  434. splitArea: {
  435. show: false
  436. },
  437. splitLine: {
  438. show: false
  439. },
  440. data: arg.xData
  441. }],
  442. yAxis: [{
  443. type: 'value',
  444. axisTick: {
  445. show: false
  446. },
  447. splitArea: {
  448. show: false
  449. },
  450. splitLine: {
  451. show: false
  452. },
  453. axisLine: {
  454. lineStyle: {
  455. type: 'solid',
  456. color: '#333333', //左边线的颜色
  457. width: '1' //坐标线的宽度
  458. }
  459. },
  460. }],
  461. }
  462. var series = [];
  463. for(var i=0; i<arg.yDatas.length; i++){
  464. var obj = {
  465. name: arg.name[i],
  466. data: arg.yDatas[i],
  467. type: 'bar',
  468. barGap: 0,
  469. barWidth: 30, //柱图宽度
  470. itemStyle:{
  471. normal:{
  472. barBorderRadius: [50, 50, 0, 0],
  473. color: arg.colors[i],
  474. label: {
  475. show: true,
  476. position: 'top',
  477. textStyle: {
  478. color: "#333333",
  479. fontSize: 12
  480. }
  481. }
  482. }
  483. },
  484. };
  485. series.push(obj);
  486. }
  487. options.series = series;
  488. $("#"+arg.elId).removeAttr('_echarts_instance_')
  489. barCharts.setOption(options);
  490. }
  491. function drawBarV(arg){
  492. var barCharts = echarts.init(document.getElementById(arg.elId));
  493. var options = {
  494. tooltip: {
  495. trigger: 'axis',
  496. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  497. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  498. },
  499. textStyle:{
  500. align:'left'
  501. },
  502. formatter:function(datas){
  503. var res = datas[0].name + '<br/>'
  504. for (var i = 0, length = datas.length; i < length; i++) {
  505. var unit = ""
  506. if(arg.argInit.units){
  507. unit = arg.argInit.units[datas[i].seriesName]
  508. }
  509. res += datas[i].seriesName + ':'
  510. + datas[i].value + unit +'<br/>'
  511. }
  512. return res
  513. }
  514. },
  515. calculable: false,
  516. grid: {
  517. borderWidth: 0,
  518. top:'5%',
  519. left: '3%',
  520. right: '10%',
  521. bottom: '5%',
  522. containLabel: true
  523. },
  524. yAxis: [{
  525. type: 'category',
  526. axisLine: {
  527. lineStyle: {
  528. type: 'solid',
  529. color: '#333333', //左边线的颜色
  530. width: '1' //坐标线的宽度
  531. }
  532. },
  533. axisTick: {
  534. show: false
  535. },
  536. splitArea: {
  537. show: false
  538. },
  539. splitLine: {
  540. show: false
  541. },
  542. data: arg.xData
  543. }],
  544. xAxis: [{
  545. type: 'value',
  546. axisTick: {
  547. show: false
  548. },
  549. splitArea: {
  550. show: false
  551. },
  552. splitLine: {
  553. show: false
  554. },
  555. axisLine: {
  556. lineStyle: {
  557. type: 'solid',
  558. color: '#333333', //左边线的颜色
  559. width: '1' //坐标线的宽度
  560. }
  561. },
  562. }],
  563. }
  564. var series = [];
  565. for(var i=0; i<arg.yDatas.length; i++){
  566. var obj = {
  567. name: arg.name[i],
  568. data: arg.yDatas[i],
  569. type: 'bar',
  570. barGap: 0,
  571. barWidth: 12, //柱图宽度
  572. itemStyle:{
  573. normal:{
  574. barBorderRadius: [0, 50, 50, 0],
  575. color: arg.colors[i],
  576. label: {
  577. show: true,
  578. position: 'right',
  579. textStyle: {
  580. color: "#333333",
  581. fontSize: 12
  582. }
  583. }
  584. }
  585. },
  586. };
  587. series.push(obj);
  588. }
  589. options = newline(options, 4, 'yAxis')
  590. options.series = series;
  591. $("#"+arg.elId).removeAttr('_echarts_instance_')
  592. barCharts.setOption(options);
  593. }
  594. function newline(option, number, axis){
  595. /* 此处注意你的json是数组还是对象 */
  596. option[axis][0]['axisLabel']={
  597. interval: 0,
  598. formatter: function(params){
  599. var newParamsName = "";
  600. var paramsNameNumber = params.length;
  601. var provideNumber = number;
  602. var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
  603. if (paramsNameNumber > provideNumber) {
  604. for (var p = 0; p < rowNumber; p++) {
  605. var tempStr = "";
  606. var start = p * provideNumber;
  607. var end = start + provideNumber;
  608. if (p == rowNumber - 1) {
  609. tempStr = params.substring(start, paramsNameNumber);
  610. } else {
  611. tempStr = params.substring(start, end) + "\n";
  612. }
  613. newParamsName += tempStr;
  614. }
  615. } else {
  616. newParamsName = params;
  617. }
  618. return newParamsName
  619. }
  620. }
  621. return option;
  622. }