key-service-population.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. (function() {
  2. Vue.component('key-service-population', {
  3. template: '<div style="height: 100%;">\
  4. <h4 class="c-b5e1fc c-f16 c-t-center div-common-title">重点服务人群增加趋势</h4>\
  5. <div data-toggle="buttons" class="btn-group fr mr40 mt0" style="position: absolute;right: 0.208rem;top: 0.05rem;z-index: 99999;">\
  6. <label class="btn btn-default" :class="{active: activeIndex == 0}" @click="btnClick(0)">\
  7. <input type="radio">月\
  8. </label>\
  9. <label class="btn btn-default" :class="{active: activeIndex == 1}" @click="btnClick(1)">\
  10. <input type="radio">季\
  11. </label>\
  12. <label class="btn btn-default" :class="{active: activeIndex == 2}" @click="btnClick(2)">\
  13. <input type="radio">年\
  14. </label>\
  15. </div>\
  16. <div id="div-zhongidan-echart" class="ml30"></div>\
  17. </div>',
  18. props: ["data"],
  19. data: function() {
  20. return {
  21. keyServiceData:null,
  22. activeIndex:0,
  23. fontSize: 0.007 * window.screen.width,
  24. }
  25. },
  26. mounted: function() {
  27. var vm = this;
  28. setTimeout(function(){
  29. vm.initData();
  30. },50)
  31. },
  32. watch:{
  33. data:function(data){
  34. this.data = data;
  35. this.initData();
  36. }
  37. },
  38. methods: {
  39. initData:function(){//重点人群
  40. this.activeIndex = 0;
  41. this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
  42. this.chartMainFun();
  43. },
  44. btnClick:function(type){
  45. this.activeIndex = type;
  46. if(type==0){//本月
  47. this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
  48. }
  49. if(type==1){//本季
  50. this.keyServiceData = this.data["重点服务人群增加趋势"].本季;
  51. }
  52. if(type==2){//本年
  53. this.keyServiceData = this.data["重点服务人群增加趋势"].本年;
  54. }
  55. this.chartMainFun();
  56. },
  57. chartMainFun:function(){
  58. var vm = this;
  59. var xAxisData = this.keyServiceData.xAxis[0].data;
  60. var pjcrsData = this.keyServiceData.series[0].data;
  61. var huanbiData = this.keyServiceData.series[1].data;
  62. var zhongdianChart = echarts.init(document.getElementById('div-zhongidan-echart'));
  63. var zhongdianOption = {
  64. tooltip: {
  65. trigger: 'axis',
  66. axisPointer: {
  67. type : 'shadow'
  68. },
  69. formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%"
  70. },
  71. grid: {top: 50, bottom: 30, left: 30,right:80},
  72. legend: {
  73. data:['平均床日数','环比'],
  74. textStyle: {
  75. color: '#b5e1fc'
  76. }
  77. },
  78. xAxis: [
  79. {
  80. type: 'category',
  81. data: xAxisData,
  82. axisPointer: {
  83. type: 'shadow'
  84. },
  85. axisTick: {
  86. show: false
  87. },
  88. axisLine: {
  89. lineStyle: {
  90. color: '#095f8e'
  91. }
  92. },
  93. axisLabel: {
  94. color: '#b5e1fc',
  95. fontSize:vm.fontSize
  96. }
  97. }
  98. ],
  99. yAxis: [
  100. {
  101. type: 'value',
  102. name: '平均床日数',
  103. nameTextStyle: {
  104. color: '#b5e1fc' // 坐标轴名称颜色
  105. },
  106. splitLine: {
  107. show: false
  108. },
  109. axisLine: {
  110. lineStyle: {
  111. color: '#095f8e'
  112. }
  113. },
  114. axisLabel: {
  115. color: '#b5e1fc',
  116. fontSize:vm.fontSize
  117. }
  118. },
  119. {
  120. type: 'value',
  121. name: '环比',
  122. nameTextStyle: {
  123. color: '#b5e1fc' // 坐标轴名称颜色
  124. },
  125. splitLine: {
  126. show: false // 不显示坐标轴刻度
  127. },
  128. axisLine: {
  129. lineStyle: {
  130. color: '#095f8e' // 坐标轴轴线颜色
  131. }
  132. },
  133. axisLabel: {
  134. color: '#b5e1fc' ,// 坐标轴刻度标签文本颜色
  135. fontSize:vm.fontSize
  136. },
  137. show: true
  138. }
  139. ],
  140. series: [
  141. {
  142. name:'平均床日数',
  143. type:'bar',
  144. data:pjcrsData,
  145. barWidth: 20,
  146. label: {
  147. normal: {
  148. show: true,
  149. position: 'top', // 在柱状图上方显示
  150. color: '#fff',// 柱状图上方显示的数值颜色
  151. }
  152. },
  153. itemStyle: {
  154. barBorderRadius: [8,8,0,0],
  155. color: '#00e6f3'
  156. }
  157. },
  158. {
  159. name:'环比',
  160. type:'line',
  161. yAxisIndex: 1,
  162. data:huanbiData,
  163. itemStyle: {
  164. color: '#03fa6d'
  165. },
  166. }
  167. ]
  168. };
  169. zhongdianChart.setOption(zhongdianOption);
  170. },
  171. }
  172. })
  173. })()