alertCharts.js 9.9 KB

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