medicalCharts.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617
  1. var fontSize = 0.0067 * window.screen.width;//字体13(默认)
  2. var fontSize1 = 0.0057 * window.screen.width;//字体11(默认)
  3. var fontSize2 = 0.00625 * window.screen.width;//字体12(默认)
  4. var leftChart1DataFormat = function(options) {
  5. var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
  6. item = parseInt(item.substring(5, 7)) + "月";
  7. return item;
  8. });
  9. var series0data = options.series[0].data || [];
  10. var series1data = options.series[1].data || [];
  11. var option = {
  12. "title": {
  13. "text": "门诊人次月趋势",
  14. "x": "center",
  15. textStyle: {
  16. color: '#b5e1fc',
  17. fontSize: 16,
  18. fontWeight: 'bold'
  19. }
  20. },
  21. tooltip: {
  22. trigger: 'axis',
  23. axisPointer: {
  24. type: 'cross',
  25. crossStyle: {
  26. color: '#fff'
  27. }
  28. },
  29. formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%"
  30. },
  31. "grid": {
  32. top: '70',
  33. left: '75',
  34. bottom: '40'
  35. },
  36. legend: {
  37. data: ['门诊人次', '环比'],
  38. textStyle: {
  39. color: '#b5e1fc'
  40. },
  41. top: '40'
  42. },
  43. xAxis: [{
  44. type: 'category',
  45. data: xAxisData,
  46. axisPointer: {
  47. type: 'shadow'
  48. },
  49. axisTick: {
  50. show: false
  51. },
  52. axisLine: {
  53. lineStyle: {
  54. color: '#095f8e'
  55. }
  56. },
  57. axisLabel: {
  58. color: '#b5e1fc',
  59. fontSize: fontSize
  60. }
  61. }],
  62. yAxis: [{
  63. type: 'value',
  64. name: '门诊人次',
  65. nameTextStyle: {
  66. color: '#b5e1fc' // 坐标轴名称颜色
  67. },
  68. splitLine: {
  69. show: false
  70. },
  71. axisLine: {
  72. lineStyle: {
  73. color: '#095f8e'
  74. }
  75. },
  76. axisLabel: {
  77. color: '#b5e1fc',
  78. fontSize: fontSize
  79. }
  80. },
  81. {
  82. type: 'value',
  83. name: '环比',
  84. nameTextStyle: {
  85. color: '#b5e1fc' // 坐标轴名称颜色
  86. },
  87. splitLine: {
  88. show: false // 不显示坐标轴刻度
  89. },
  90. axisLine: {
  91. lineStyle: {
  92. color: '#095f8e' // 坐标轴轴线颜色
  93. }
  94. },
  95. axisLabel: {
  96. color: '#b5e1fc', // 坐标轴刻度标签文本颜色
  97. fontSize: fontSize
  98. },
  99. show: true
  100. }
  101. ],
  102. series: [{
  103. name: '门诊人次',
  104. type: 'bar',
  105. "data": series0data,
  106. barWidth: 20,
  107. label: {
  108. normal: {
  109. show: true,
  110. position: 'top', // 在柱状图上方显示
  111. color: '#fff' // 柱状图上方显示的数值颜色
  112. }
  113. },
  114. itemStyle: {
  115. barBorderRadius: [8, 8, 0, 0],
  116. color: '#00e6f3'
  117. }
  118. },
  119. {
  120. name: '环比',
  121. type: 'line',
  122. yAxisIndex: 1,
  123. "data": series1data,
  124. itemStyle: {
  125. color: '#03fa6d'
  126. },
  127. markLine:{
  128. data:[
  129. {yAxis: 0, name: '环比'}
  130. ],
  131. label:{
  132. show: true,
  133. position: 'middle'
  134. },
  135. lineStyle:{
  136. color: '#ffffff'
  137. }
  138. }
  139. }
  140. ]
  141. }
  142. return option;
  143. },
  144. leftChart2DataFormat = function(options){
  145. var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
  146. item = parseInt(item.substring(5, 7)) + "月";
  147. return item;
  148. });
  149. var series0data = options.series[0].data || [];;
  150. var series1data = options.series[1].data || [];;
  151. var option = {
  152. "title": {
  153. "text": "住院人次月趋势",
  154. "x": "center",
  155. textStyle: {
  156. color: '#b5e1fc',
  157. fontSize: 16,
  158. fontWeight: 'bold'
  159. }
  160. },
  161. tooltip: {
  162. trigger: 'axis',
  163. axisPointer: {
  164. type: 'cross',
  165. crossStyle: {
  166. color: '#fff'
  167. }
  168. }
  169. },
  170. "grid": {
  171. top: '70',
  172. left: '70',
  173. bottom: '40'
  174. },
  175. legend: {
  176. data: ['住院人次', '环比'],
  177. textStyle: {
  178. color: '#b5e1fc'
  179. },
  180. top: '40'
  181. },
  182. xAxis: [{
  183. type: 'category',
  184. data: xAxisData,
  185. axisPointer: {
  186. type: 'shadow'
  187. },
  188. axisTick: {
  189. show: false
  190. },
  191. axisLine: {
  192. lineStyle: {
  193. color: '#095f8e'
  194. }
  195. },
  196. axisLabel: {
  197. color: '#b5e1fc',
  198. fontSize: fontSize
  199. }
  200. }],
  201. yAxis: [{
  202. type: 'value',
  203. name: '住院人次',
  204. nameTextStyle: {
  205. color: '#b5e1fc' // 坐标轴名称颜色
  206. },
  207. splitLine: {
  208. show: false
  209. },
  210. axisLine: {
  211. lineStyle: {
  212. color: '#095f8e'
  213. }
  214. },
  215. axisLabel: {
  216. color: '#b5e1fc',
  217. fontSize: fontSize
  218. }
  219. },
  220. {
  221. type: 'value',
  222. name: '环比',
  223. nameTextStyle: {
  224. color: '#b5e1fc' // 坐标轴名称颜色
  225. },
  226. splitLine: {
  227. show: false // 不显示坐标轴刻度
  228. },
  229. axisLine: {
  230. lineStyle: {
  231. color: '#095f8e' // 坐标轴轴线颜色
  232. }
  233. },
  234. axisLabel: {
  235. color: '#b5e1fc', // 坐标轴刻度标签文本颜色
  236. fontSize: fontSize
  237. },
  238. show:true
  239. }
  240. ],
  241. series: [{
  242. name: '住院人次',
  243. type: 'bar',
  244. "data": series0data,
  245. barWidth: 20,
  246. label: {
  247. normal: {
  248. show: true,
  249. position: 'top', // 在柱状图上方显示
  250. color: '#fff' // 柱状图上方显示的数值颜色
  251. }
  252. },
  253. itemStyle: {
  254. barBorderRadius: [8, 8, 0, 0],
  255. color: '#ff616f'
  256. }
  257. },
  258. {
  259. name: '环比',
  260. type: 'line',
  261. yAxisIndex: 1,
  262. "data": series1data,
  263. itemStyle: {
  264. color: '#03fa6d'
  265. },
  266. markLine:{
  267. data:[
  268. {yAxis: 0, name: '环比'}
  269. ],
  270. label:{
  271. show: true,
  272. position: 'middle'
  273. },
  274. lineStyle:{
  275. color: '#ffffff'
  276. }
  277. }
  278. }
  279. ]
  280. }
  281. return option;
  282. },
  283. rightChart1DataFormat = function(options){
  284. var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
  285. item = parseInt(item.substring(5, 7)) + "月";
  286. return item;
  287. });
  288. var series0data = options.series[0].data || [];
  289. var series1data = options.series[1].data || [];
  290. var series2data = options.series[2].data || [];
  291. var series3data = options.series[3].data || []
  292. series2data = _.map(series2data,function(item,idx){
  293. return parseFloat(item)
  294. })
  295. console.error(JSON.stringify(series2data))
  296. var option = {
  297. "title": {
  298. "text": "门诊分类别月趋势",
  299. "x": "center",
  300. textStyle: {
  301. color: '#b5e1fc',
  302. fontSize: 16,
  303. fontWeight: 'bold'
  304. }
  305. },
  306. tooltip: {
  307. trigger: 'axis',
  308. axisPointer: {
  309. type: 'cross',
  310. crossStyle: {
  311. color: '#fff'
  312. }
  313. },
  314. formatter: function(value){
  315. var resStr = "";
  316. _.map(value,function(item,idx){
  317. if(idx==0){
  318. resStr+=item.axisValue+" <br /> ";
  319. }
  320. resStr+=item.seriesName+":"+item.data;
  321. if(idx==2 || idx==3){//环比值加%
  322. if(item.data!="--"){
  323. resStr+="%";
  324. }
  325. }
  326. resStr+=" <br /> ";
  327. })
  328. return resStr;
  329. }
  330. },
  331. "grid":{
  332. top: '80',
  333. left: '60',
  334. bottom: '30',
  335. right:'60'
  336. },
  337. legend: {
  338. data: ['普通号', '专家号', '普通号环比', '专家号环比'],
  339. textStyle: {
  340. color: '#b5e1fc'
  341. },
  342. top: '30',
  343. itemWidth: 10
  344. },
  345. xAxis: [{
  346. type: 'category',
  347. data: xAxisData,
  348. axisPointer: {
  349. type: 'shadow'
  350. },
  351. axisTick: {
  352. show: false
  353. },
  354. axisLine: {
  355. lineStyle: {
  356. color: '#095f8e'
  357. }
  358. },
  359. axisLabel: {
  360. color: '#b5e1fc',
  361. fontSize: fontSize
  362. }
  363. }],
  364. yAxis: [{
  365. type: 'value',
  366. name: '人次',
  367. nameTextStyle: {
  368. color: '#b5e1fc' // 坐标轴名称颜色
  369. },
  370. splitLine: {
  371. show: false
  372. },
  373. axisLine: {
  374. lineStyle: {
  375. color: '#095f8e'
  376. }
  377. },
  378. axisLabel: {
  379. color: '#b5e1fc',
  380. fontSize: fontSize2
  381. },
  382. splitNumber: 2
  383. },
  384. {
  385. type: 'value',
  386. name: '环比',
  387. nameTextStyle: {
  388. color: '#b5e1fc' // 坐标轴名称颜色
  389. },
  390. splitLine: {
  391. show: false // 不显示坐标轴刻度
  392. },
  393. axisLine: {
  394. lineStyle: {
  395. color: '#095f8e' // 坐标轴轴线颜色
  396. }
  397. },
  398. axisLabel: {
  399. color: '#b5e1fc', // 坐标轴刻度标签文本颜色
  400. fontSize: fontSize2
  401. },
  402. show:true,
  403. splitNumber: 4
  404. }
  405. ],
  406. series: [{
  407. name: '普通号',
  408. type: 'bar',
  409. "data": series0data,
  410. barWidth: 20,
  411. label: {
  412. normal: {
  413. show: true,
  414. position: 'top', // 在柱状图上方显示
  415. color: '#fff', // 柱状图上方显示的数值颜色
  416. fontSize: fontSize1
  417. }
  418. },
  419. itemStyle: {
  420. barBorderRadius: [8, 8, 0, 0],
  421. color: '#00e6f3'
  422. }
  423. },
  424. {
  425. name: '专家号',
  426. type: 'bar',
  427. "data": series1data,
  428. barWidth: 20,
  429. label: {
  430. normal: {
  431. show: true,
  432. position: 'top', // 在柱状图上方显示
  433. color: '#fff', // 柱状图上方显示的数值颜色
  434. fontSize: fontSize1
  435. }
  436. },
  437. itemStyle: {
  438. barBorderRadius: [8, 8, 0, 0],
  439. color: '#fff71a'
  440. }
  441. },
  442. {
  443. name: '普通号环比',
  444. type: 'line',
  445. yAxisIndex: 1,
  446. "data": series2data,
  447. itemStyle: {
  448. color: '#03fa6d'
  449. }
  450. },
  451. {
  452. name: '专家号环比',
  453. type: 'line',
  454. yAxisIndex: 1,
  455. "data": series3data,
  456. itemStyle: {
  457. color: '#ff616f'
  458. },
  459. markLine:{
  460. data:[
  461. {yAxis: 0, name: '环比'}
  462. ],
  463. label:{
  464. show: true,
  465. position: 'middle'
  466. },
  467. lineStyle:{
  468. color: '#ffffff'
  469. }
  470. }
  471. },
  472. ]
  473. }
  474. return option;
  475. },
  476. rightChart2DataFormat = function(options){
  477. var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
  478. item = parseInt(item.substring(5, 7)) + "月";
  479. return item;
  480. });
  481. var series0data = options.series[0].data || [];;
  482. var series1data = options.series[1].data || [];;
  483. var option = {
  484. "title": {
  485. "text": "住院平均日数月趋势",
  486. "x": "center",
  487. textStyle: {
  488. color: '#b5e1fc',
  489. fontSize: 16,
  490. fontWeight: 'bold'
  491. }
  492. },
  493. tooltip: {
  494. trigger: 'axis',
  495. axisPointer: {
  496. type: 'cross',
  497. crossStyle: {
  498. color: '#fff'
  499. }
  500. },
  501. formatter:'{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%"
  502. },
  503. "grid": {
  504. top: '70',
  505. left: '60',
  506. bottom: '30'
  507. },
  508. legend: {
  509. data: ['住院平均床日数', '环比'],
  510. textStyle: {
  511. color: '#b5e1fc'
  512. },
  513. top: '30'
  514. },
  515. xAxis: [{
  516. type: 'category',
  517. data: xAxisData,
  518. axisPointer: {
  519. type: 'shadow'
  520. },
  521. axisTick: {
  522. show: false
  523. },
  524. axisLine: {
  525. lineStyle: {
  526. color: '#095f8e'
  527. }
  528. },
  529. axisLabel: {
  530. color: '#b5e1fc',
  531. fontSize: fontSize
  532. }
  533. }],
  534. yAxis: [{
  535. type: 'value',
  536. name: '天',
  537. nameTextStyle: {
  538. color: '#b5e1fc' // 坐标轴名称颜色
  539. },
  540. splitLine: {
  541. show: false
  542. },
  543. axisLine: {
  544. lineStyle: {
  545. color: '#095f8e'
  546. }
  547. },
  548. axisLabel: {
  549. color: '#b5e1fc',
  550. fontSize: fontSize2
  551. },
  552. splitNumber: 2
  553. },
  554. {
  555. type: 'value',
  556. name: '环比',
  557. nameTextStyle: {
  558. color: '#b5e1fc' // 坐标轴名称颜色
  559. },
  560. splitLine: {
  561. show: false // 不显示坐标轴刻度
  562. },
  563. axisLine: {
  564. lineStyle: {
  565. color: '#095f8e' // 坐标轴轴线颜色
  566. }
  567. },
  568. axisLabel: {
  569. color: '#b5e1fc', // 坐标轴刻度标签文本颜色
  570. fontSize: fontSize2
  571. },
  572. show:true,
  573. splitNumber: 4
  574. }
  575. ],
  576. series: [{
  577. name: '住院平均床日数',
  578. type: 'bar',
  579. "data": series0data,
  580. barWidth: 20,
  581. label: {
  582. normal: {
  583. show: true,
  584. position: 'top', // 在柱状图上方显示
  585. color: '#fff' // 柱状图上方显示的数值颜色
  586. }
  587. },
  588. itemStyle: {
  589. barBorderRadius: [8, 8, 0, 0],
  590. color: '#00e6f3'
  591. }
  592. },
  593. {
  594. name: '环比',
  595. type: 'line',
  596. yAxisIndex: 1,
  597. "data": series1data,
  598. itemStyle: {
  599. color: '#03fa6d'
  600. },
  601. markLine:{
  602. data:[
  603. {yAxis: 0, name: '环比'}
  604. ],
  605. label:{
  606. show: true,
  607. position: 'middle'
  608. },
  609. lineStyle:{
  610. color: '#ffffff'
  611. }
  612. }
  613. }
  614. ]
  615. }
  616. return option;
  617. }