alertCharts.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  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. },
  251. legend: {
  252. data: ['新增人次', '环比'],
  253. textStyle: {
  254. color: '#b5e1fc'
  255. },
  256. top: '40'
  257. },
  258. xAxis: [{
  259. type: 'category',
  260. "data": xAxisData,
  261. axisPointer: {
  262. type: 'shadow'
  263. },
  264. axisTick: {
  265. show: false
  266. },
  267. axisLine: {
  268. lineStyle: {
  269. color: '#095f8e'
  270. }
  271. },
  272. axisLabel: {
  273. color: '#b5e1fc'
  274. }
  275. }],
  276. yAxis: [{
  277. type: 'value',
  278. name: '新增人次',
  279. nameTextStyle: {
  280. color: '#b5e1fc' // 坐标轴名称颜色
  281. },
  282. splitLine: {
  283. show: false
  284. },
  285. axisLine: {
  286. lineStyle: {
  287. color: '#095f8e'
  288. }
  289. },
  290. axisLabel: {
  291. color: '#b5e1fc'
  292. }
  293. },
  294. {
  295. type: 'value',
  296. name: '环比',
  297. nameTextStyle: {
  298. color: '#b5e1fc' // 坐标轴名称颜色
  299. },
  300. splitLine: {
  301. show: false // 不显示坐标轴刻度
  302. },
  303. axisLine: {
  304. lineStyle: {
  305. color: '#095f8e' // 坐标轴轴线颜色
  306. }
  307. },
  308. axisLabel: {
  309. color: '#b5e1fc' // 坐标轴刻度标签文本颜色
  310. }
  311. }
  312. ],
  313. series: [{
  314. name: '新增人次',
  315. type: 'bar',
  316. "data":series0data,
  317. barWidth: 20,
  318. label: {
  319. normal: {
  320. show: true,
  321. position: 'top', // 在柱状图上方显示
  322. color: '#fff' // 柱状图上方显示的数值颜色
  323. }
  324. },
  325. itemStyle: {
  326. barBorderRadius: [8, 8, 0, 0],
  327. color: '#00e6f3'
  328. }
  329. },
  330. {
  331. name: '环比',
  332. type: 'line',
  333. yAxisIndex: 1,
  334. "data": series1data,
  335. itemStyle: {
  336. color: '#03fa6d'
  337. }
  338. }
  339. ]
  340. }
  341. return option
  342. },
  343. nianlingChart = function(options){
  344. var title = options.title.text;
  345. var data = options.series[0].data
  346. var legend = data.map(function(item){
  347. return item.name;
  348. })
  349. var option = {
  350. "title": {
  351. "text": title,
  352. "x": "center",
  353. "textStyle": {
  354. color: ['#b5e1fc']
  355. },
  356. "padding": [10, 0, 0, 0]
  357. },
  358. "tooltip": {
  359. "trigger": "item"
  360. },
  361. legend: {
  362. orient: 'vertical',
  363. data: legend,
  364. right: '15%',
  365. top: '25%',
  366. textStyle: {
  367. color: ['#b5e1fc']
  368. }
  369. },
  370. "series": [{
  371. "center": [
  372. "35%",
  373. "50%"
  374. ],
  375. radius: ['30%', '40%'],
  376. "name": "",
  377. "type": "pie",
  378. "itemStyle": {
  379. "normal": {
  380. "label": {
  381. "show": false
  382. },
  383. "labelLine": {
  384. "show": false
  385. }
  386. }
  387. },
  388. "data": data
  389. }]
  390. }
  391. return option
  392. }