alertCharts.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  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 legend = data.map(function(item){
  91. return item.name;
  92. })
  93. var option = {
  94. "title": {
  95. "text": title,
  96. "x": "center",
  97. "textStyle": {
  98. color: ['#b5e1fc']
  99. },
  100. "padding": [10, 0, 0, 0]
  101. },
  102. "tooltip": {
  103. "trigger": "item"
  104. },
  105. legend: {
  106. orient: 'vertical',
  107. // x: 'right',
  108. data: legend,
  109. right: '25%',
  110. top: '40%',
  111. textStyle: {
  112. color: ['#b5e1fc']
  113. }
  114. },
  115. "series": [{
  116. "center": [
  117. "35%",
  118. "50%"
  119. ],
  120. radius: ['30%', '40%'],
  121. "name": "",
  122. "type": "pie",
  123. "itemStyle": {
  124. "normal": {
  125. "label": {
  126. "show": false
  127. },
  128. "labelLine": {
  129. "show": false
  130. }
  131. }
  132. },
  133. "data": data
  134. }]
  135. }
  136. return option
  137. },
  138. jibingTopChart = function(options){
  139. debugger
  140. var title = options.title.text;
  141. var yAxisData = (options.xAxis[0].data && options.xAxis[0].data.reverse()) || [];
  142. var xAxisData = (options.series[0].data && options.series[0].data.reverse()) || [];
  143. var option = {
  144. "title": {
  145. "text": title,
  146. "x": "center",
  147. "textStyle": {
  148. color: ['#b5e1fc']
  149. },
  150. "padding": [10, 0, 0, 0]
  151. },
  152. "tooltip": {
  153. "trigger": "axis"
  154. },
  155. grid: {
  156. top: 40,
  157. bottom: 30,
  158. left: 80,
  159. right:20
  160. },
  161. "yAxis": [{
  162. "type": "category",
  163. "name": "",
  164. "data": yAxisData,
  165. axisPointer: {
  166. type: 'shadow'
  167. },
  168. axisTick: {
  169. show: false
  170. },
  171. axisLine: {
  172. lineStyle: {
  173. color: '#095f8e'
  174. }
  175. },
  176. axisLabel: {
  177. color: '#b5e1fc',
  178. formatter(v){
  179. return getBrStr(v,5,true);
  180. }
  181. },
  182. nameTextStyle: {
  183. color: '#b5e1fc'
  184. },
  185. }],
  186. "xAxis": [{
  187. "type": "value",
  188. axisPointer: {
  189. type: 'shadow'
  190. },
  191. axisTick: {
  192. show: false
  193. },
  194. axisLine: {
  195. lineStyle: {
  196. color: '#095f8e'
  197. }
  198. },
  199. axisLabel: {
  200. color: '#fff'
  201. },
  202. splitLine: {
  203. show: false // 不显示坐标轴刻度
  204. }
  205. }],
  206. "series": [{
  207. "smooth": true,
  208. "name": "并发症排行",
  209. "type": "bar",
  210. barWidth: 20,
  211. "label": {
  212. show: false,
  213. position: "right"
  214. },
  215. "itemStyle": {
  216. "normal": {
  217. "lineStyle": {
  218. "shadowColor": "rgba(0,0,0,0.4)"
  219. },
  220. barBorderRadius: [0, 8, 8, 0],
  221. color: '#00e6f3'
  222. }
  223. },
  224. "data": xAxisData
  225. }, ]
  226. }
  227. return option
  228. },
  229. qushiChart = function(options){
  230. debugger
  231. console.log(options);
  232. var title = options.title.text;
  233. var xAxisData = options.xAxis[0].data;
  234. var series0data = options.series[0].data || [];
  235. var series1data = options.series[1].data || [];
  236. var option = {
  237. "title": {
  238. "text": title,
  239. "x": "center",
  240. textStyle: {
  241. color: '#b5e1fc',
  242. fontSize: 16,
  243. fontWeight: 'bold'
  244. },
  245. "padding": [10, 0, 0, 0]
  246. },
  247. tooltip: {
  248. trigger: 'axis',
  249. axisPointer: {
  250. type: 'cross',
  251. crossStyle: {
  252. color: '#fff'
  253. }
  254. }
  255. },
  256. "grid": {
  257. top: '90',
  258. left: '60',
  259. bottom:'25',
  260. right:'60'
  261. },
  262. legend: {
  263. data: ['新增人数', '环比'],
  264. textStyle: {
  265. color: '#b5e1fc'
  266. },
  267. top: '45'
  268. },
  269. xAxis: [{
  270. type: 'category',
  271. "data": xAxisData,
  272. axisPointer: {
  273. type: 'shadow'
  274. },
  275. axisTick: {
  276. show: false
  277. },
  278. axisLine: {
  279. lineStyle: {
  280. color: '#095f8e'
  281. }
  282. },
  283. axisLabel: {
  284. color: '#b5e1fc'
  285. }
  286. }],
  287. yAxis: [{
  288. type: 'value',
  289. name: '新增人数',
  290. nameTextStyle: {
  291. color: '#b5e1fc' // 坐标轴名称颜色
  292. },
  293. splitLine: {
  294. show: false
  295. },
  296. axisLine: {
  297. lineStyle: {
  298. color: '#095f8e'
  299. }
  300. },
  301. axisLabel: {
  302. color: '#b5e1fc'
  303. }
  304. },
  305. {
  306. type: 'value',
  307. name: '环比',
  308. nameTextStyle: {
  309. color: '#b5e1fc' // 坐标轴名称颜色
  310. },
  311. splitLine: {
  312. show: false // 不显示坐标轴刻度
  313. },
  314. axisLine: {
  315. lineStyle: {
  316. color: '#095f8e' // 坐标轴轴线颜色
  317. }
  318. },
  319. axisLabel: {
  320. color: '#b5e1fc' // 坐标轴刻度标签文本颜色
  321. }
  322. }
  323. ],
  324. series: [{
  325. name: '新增人数',
  326. type: 'bar',
  327. "data":series0data,
  328. barWidth: 20,
  329. label: {
  330. normal: {
  331. show: true,
  332. position: 'top', // 在柱状图上方显示
  333. color: '#fff' // 柱状图上方显示的数值颜色
  334. }
  335. },
  336. itemStyle: {
  337. barBorderRadius: [8, 8, 0, 0],
  338. color: '#00e6f3'
  339. }
  340. },
  341. {
  342. name: '环比',
  343. type: 'line',
  344. yAxisIndex: 1,
  345. "data": series1data,
  346. itemStyle: {
  347. color: '#03fa6d'
  348. }
  349. }
  350. ]
  351. }
  352. return option
  353. },
  354. nianlingChart = function(options){
  355. var title = options.title.text;
  356. var data = options.series[0].data
  357. var legend = data.map(function(item){
  358. return item.name;
  359. })
  360. var option = {
  361. "title": {
  362. "text": title,
  363. "x": "center",
  364. "textStyle": {
  365. color: ['#b5e1fc']
  366. },
  367. "padding": [10, 0, 0, 0]
  368. },
  369. "tooltip": {
  370. "trigger": "item"
  371. },
  372. legend: {
  373. orient: 'vertical',
  374. data: legend,
  375. right: '15%',
  376. top: '25%',
  377. textStyle: {
  378. color: ['#b5e1fc']
  379. }
  380. },
  381. "series": [{
  382. "center": [
  383. "35%",
  384. "50%"
  385. ],
  386. radius: ['30%', '40%'],
  387. "name": "",
  388. "type": "pie",
  389. "itemStyle": {
  390. "normal": {
  391. "label": {
  392. "show": false
  393. },
  394. "labelLine": {
  395. "show": false
  396. }
  397. }
  398. },
  399. "data": data
  400. }]
  401. }
  402. return option
  403. }
  404. function getBrStr(str,num,yRoute2){
  405. if(!str)return ''
  406. var newParamsName = "";// 最终拼接成的字符串
  407. var provideNumber = num || 10;// 每行能显示的字的个数
  408. var strArr=str.split('');
  409. if(strArr.length>15 && num && !yRoute2) { //如果是Y轴 TOP5的 最多显示两行 然后用省略号
  410. strArr = strArr.slice(0,9)
  411. strArr.push('...')
  412. }
  413. else if(yRoute2 && strArr.length >5){
  414. strArr = strArr.slice(0,4)
  415. strArr.push('...');
  416. }
  417. strArr.map((v,i)=>{
  418. var str =v;
  419. if(i!=0 && (i+1)%provideNumber == 0 && !yRoute2){
  420. str+='\n';
  421. num++;
  422. }
  423. newParamsName+=str
  424. })
  425. return newParamsName
  426. }