alertCharts.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. var quxianChart = function(options){
  2. var series0data = options.series[0].data || [];
  3. var yAxisData = options.xAxis[0].data;
  4. var option = {
  5. "title": {
  6. "text": "区县分布",
  7. "x": "center",
  8. "textStyle": {
  9. color: ['#b5e1fc']
  10. },
  11. "padding": [10, 0, 0, 0]
  12. },
  13. "tooltip": {
  14. "trigger": "axis"
  15. },
  16. grid: {
  17. top: 80,
  18. bottom: 30,
  19. left: 80
  20. },
  21. "yAxis": [{
  22. "type": "category",
  23. "name": "人次",
  24. "data": yAxisData,
  25. axisPointer: {
  26. type: 'shadow'
  27. },
  28. axisTick: {
  29. show: false
  30. },
  31. axisLine: {
  32. lineStyle: {
  33. color: '#095f8e'
  34. }
  35. },
  36. axisLabel: {
  37. color: '#b5e1fc'
  38. },
  39. nameTextStyle: {
  40. color: '#b5e1fc'
  41. }
  42. }],
  43. "xAxis": [{
  44. "type": "value",
  45. axisPointer: {
  46. type: 'shadow'
  47. },
  48. axisTick: {
  49. show: false
  50. },
  51. axisLine: {
  52. lineStyle: {
  53. color: '#095f8e'
  54. }
  55. },
  56. axisLabel: {
  57. color: '#fff'
  58. },
  59. splitLine: {
  60. show: false // 不显示坐标轴刻度
  61. }
  62. }],
  63. "series": [{
  64. "smooth": true,
  65. "name": "区县分布",
  66. "type": "bar",
  67. barWidth: 20,
  68. "label": {
  69. show: false,
  70. position: "right"
  71. },
  72. "itemStyle": {
  73. "normal": {
  74. "lineStyle": {
  75. "shadowColor": "rgba(0,0,0,0.4)"
  76. },
  77. barBorderRadius: [0, 8, 8, 0],
  78. color: '#00e6f3'
  79. }
  80. },
  81. "data": series0data
  82. }, ]
  83. }
  84. return option
  85. },
  86. xingbieChart = function(options){
  87. console.log(options)
  88. var title = options.title.text;
  89. var data = options.series[0].data
  90. var option = {
  91. "title": {
  92. "text": title,
  93. "x": "center",
  94. "textStyle": {
  95. color: ['#b5e1fc']
  96. },
  97. "padding": [10, 0, 0, 0]
  98. },
  99. "tooltip": {
  100. "trigger": "item"
  101. },
  102. legend: {
  103. orient: 'vertical',
  104. // x: 'right',
  105. data: ['男', '女'],
  106. right: '25%',
  107. top: '40%',
  108. textStyle: {
  109. color: ['#b5e1fc']
  110. }
  111. },
  112. "series": [{
  113. "center": [
  114. "35%",
  115. "50%"
  116. ],
  117. radius: ['30%', '40%'],
  118. "name": "",
  119. "type": "pie",
  120. "itemStyle": {
  121. "normal": {
  122. "label": {
  123. "show": false
  124. },
  125. "labelLine": {
  126. "show": false
  127. }
  128. }
  129. },
  130. "data": data
  131. }]
  132. }
  133. return option
  134. },
  135. jibingTopChart = function(options){
  136. var title = options.title.text;
  137. var yAxisData = options.xAxis[0].data
  138. var xAxisData = options.series[0].data
  139. var option = {
  140. "title": {
  141. "text": title,
  142. "x": "center",
  143. "textStyle": {
  144. color: ['#b5e1fc']
  145. },
  146. "padding": [10, 0, 0, 0]
  147. },
  148. "tooltip": {
  149. "trigger": "axis"
  150. },
  151. grid: {
  152. top: 40,
  153. bottom: 30,
  154. left: 80
  155. },
  156. "yAxis": [{
  157. "type": "category",
  158. "name": "",
  159. "data": yAxisData,
  160. axisPointer: {
  161. type: 'shadow'
  162. },
  163. axisTick: {
  164. show: false
  165. },
  166. axisLine: {
  167. lineStyle: {
  168. color: '#095f8e'
  169. }
  170. },
  171. axisLabel: {
  172. color: '#b5e1fc'
  173. },
  174. nameTextStyle: {
  175. color: '#b5e1fc'
  176. }
  177. }],
  178. "xAxis": [{
  179. "type": "value",
  180. axisPointer: {
  181. type: 'shadow'
  182. },
  183. axisTick: {
  184. show: false
  185. },
  186. axisLine: {
  187. lineStyle: {
  188. color: '#095f8e'
  189. }
  190. },
  191. axisLabel: {
  192. color: '#fff'
  193. },
  194. splitLine: {
  195. show: false // 不显示坐标轴刻度
  196. }
  197. }],
  198. "series": [{
  199. "smooth": true,
  200. "name": "并发症排行",
  201. "type": "bar",
  202. barWidth: 20,
  203. "label": {
  204. show: false,
  205. position: "right"
  206. },
  207. "itemStyle": {
  208. "normal": {
  209. "lineStyle": {
  210. "shadowColor": "rgba(0,0,0,0.4)"
  211. },
  212. barBorderRadius: [0, 8, 8, 0],
  213. color: '#00e6f3'
  214. }
  215. },
  216. "data": xAxisData
  217. }, ]
  218. }
  219. return option
  220. },
  221. qushiChart = function(options){
  222. console.log(options);
  223. var title = options.title.text;
  224. var xAxisData = options.xAxis[0].data;
  225. var series0data = options.series[0].data || [];
  226. var series1data = options.series[1].data || [];
  227. var option = {
  228. "title": {
  229. "text": title,
  230. "x": "center",
  231. textStyle: {
  232. color: '#b5e1fc',
  233. fontSize: 16,
  234. fontWeight: 'bold'
  235. },
  236. "padding": [10, 0, 0, 0]
  237. },
  238. tooltip: {
  239. trigger: 'axis',
  240. axisPointer: {
  241. type: 'cross',
  242. crossStyle: {
  243. color: '#fff'
  244. }
  245. }
  246. },
  247. "grid": {
  248. top: '90',
  249. left: '60',
  250. bottom:'25',
  251. right:'60'
  252. },
  253. legend: {
  254. data: ['新增人次', '环比'],
  255. textStyle: {
  256. color: '#b5e1fc'
  257. },
  258. top: '45'
  259. },
  260. xAxis: [{
  261. type: 'category',
  262. "data": xAxisData,
  263. axisPointer: {
  264. type: 'shadow'
  265. },
  266. axisTick: {
  267. show: false
  268. },
  269. axisLine: {
  270. lineStyle: {
  271. color: '#095f8e'
  272. }
  273. },
  274. axisLabel: {
  275. color: '#b5e1fc'
  276. }
  277. }],
  278. yAxis: [{
  279. type: 'value',
  280. name: '新增人次',
  281. nameTextStyle: {
  282. color: '#b5e1fc' // 坐标轴名称颜色
  283. },
  284. splitLine: {
  285. show: false
  286. },
  287. axisLine: {
  288. lineStyle: {
  289. color: '#095f8e'
  290. }
  291. },
  292. axisLabel: {
  293. color: '#b5e1fc'
  294. }
  295. },
  296. {
  297. type: 'value',
  298. name: '环比',
  299. nameTextStyle: {
  300. color: '#b5e1fc' // 坐标轴名称颜色
  301. },
  302. splitLine: {
  303. show: false // 不显示坐标轴刻度
  304. },
  305. axisLine: {
  306. lineStyle: {
  307. color: '#095f8e' // 坐标轴轴线颜色
  308. }
  309. },
  310. axisLabel: {
  311. color: '#b5e1fc' // 坐标轴刻度标签文本颜色
  312. }
  313. }
  314. ],
  315. series: [{
  316. name: '新增人次',
  317. type: 'bar',
  318. "data":series0data,
  319. barWidth: 20,
  320. label: {
  321. normal: {
  322. show: true,
  323. position: 'top', // 在柱状图上方显示
  324. color: '#fff' // 柱状图上方显示的数值颜色
  325. }
  326. },
  327. itemStyle: {
  328. barBorderRadius: [8, 8, 0, 0],
  329. color: '#00e6f3'
  330. }
  331. },
  332. {
  333. name: '环比',
  334. type: 'line',
  335. yAxisIndex: 1,
  336. "data": series1data,
  337. itemStyle: {
  338. color: '#03fa6d'
  339. }
  340. }
  341. ]
  342. }
  343. return option
  344. },
  345. nianlingChart = function(options){
  346. var title = options.title.text;
  347. var data = options.series[0].data
  348. var legend = data.map(function(item){
  349. return item.name;
  350. })
  351. var option = {
  352. "title": {
  353. "text": title,
  354. "x": "center",
  355. "textStyle": {
  356. color: ['#b5e1fc']
  357. },
  358. "padding": [10, 0, 0, 0]
  359. },
  360. "tooltip": {
  361. "trigger": "item"
  362. },
  363. legend: {
  364. orient: 'vertical',
  365. data: legend,
  366. right: '15%',
  367. top: '25%',
  368. textStyle: {
  369. color: ['#b5e1fc']
  370. }
  371. },
  372. "series": [{
  373. "center": [
  374. "35%",
  375. "50%"
  376. ],
  377. radius: ['30%', '40%'],
  378. "name": "",
  379. "type": "pie",
  380. "itemStyle": {
  381. "normal": {
  382. "label": {
  383. "show": false
  384. },
  385. "labelLine": {
  386. "show": false
  387. }
  388. }
  389. },
  390. "data": data
  391. }]
  392. }
  393. return option
  394. }