echart.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
  1. //日常统计
  2. var myChart = echarts.init(document.getElementById('echartsrcxj'), 'walden')
  3. option = {
  4. // title: {
  5. // text: '动态数据',
  6. // },
  7. tooltip: {
  8. trigger: 'axis',
  9. axisPointer: {
  10. type: 'cross',
  11. label: {
  12. backgroundColor: 'rgba(62, 99, 151, 1)'
  13. }
  14. }
  15. },
  16. legend: {
  17. data: ['巡查数量', '巡查覆盖率']
  18. },
  19. xAxis: [
  20. {
  21. type: 'category',
  22. boundaryGap: true,
  23. data: (function() {
  24. var now = new Date()
  25. var res = []
  26. var len = 8
  27. while (len--) {
  28. res.unshift(now.getDate())
  29. now = new Date(now - 86400000)
  30. }
  31. return res
  32. })()
  33. },
  34. {
  35. type: 'category',
  36. boundaryGap: true,
  37. data: (function() {
  38. var res = []
  39. var len = 0
  40. while (len--) {
  41. res.push(8 - len - 1)
  42. }
  43. return res
  44. })()
  45. }
  46. ],
  47. yAxis: [
  48. {
  49. type: 'value',
  50. scale: true,
  51. name: '单位',
  52. max: 30,
  53. min: 0,
  54. boundaryGap: [0.2, 0.2]
  55. },
  56. {
  57. type: 'value',
  58. scale: true,
  59. name: '单位',
  60. max: 10,
  61. min: 0,
  62. boundaryGap: [0.2, 0.2]
  63. }
  64. ],
  65. series: [
  66. {
  67. name: '巡查覆盖率',
  68. type: 'bar',
  69. xAxisIndex: 1,
  70. yAxisIndex: 1,
  71. data: (function() {
  72. var res = []
  73. var len = 8
  74. while (len--) {
  75. res.push(Math.round(Math.random() * 10))
  76. }
  77. return res
  78. })()
  79. },
  80. {
  81. name: '巡查数量',
  82. type: 'line',
  83. data: (function() {
  84. var res = []
  85. var len = 0
  86. while (len < 8) {
  87. res.push((Math.random() * 10 + 5).toFixed(1) - 0)
  88. len++
  89. }
  90. return res
  91. })()
  92. }
  93. ]
  94. }
  95. myChart.setOption(option)
  96. //联动报警
  97. var myChart1 = echarts.init(document.getElementById('echartsldbj'), 'walden')
  98. option1 = {
  99. xAxis: {
  100. type: 'category',
  101. boundaryGap: false,
  102. data: (function() {
  103. var now = new Date()
  104. var res = []
  105. var len = 8
  106. while (len--) {
  107. res.unshift(now.getDate())
  108. now = new Date(now - 86400000)
  109. }
  110. return res
  111. })()
  112. },
  113. yAxis: {
  114. type: 'value'
  115. },
  116. series: [
  117. {
  118. data: [45, 60, 42, 56, 30, 42, 56, 30],
  119. type: 'line',
  120. areaStyle: {}
  121. }
  122. ]
  123. }
  124. myChart1.setOption(option1)
  125. var myChart2 = echarts.init(document.getElementById('echartsjgbj'), 'walden')
  126. option2 = {
  127. xAxis: {
  128. type: 'category',
  129. boundaryGap: false,
  130. data: (function() {
  131. var now = new Date()
  132. var res = []
  133. var len = 7
  134. while (len--) {
  135. res.unshift(now.getDate())
  136. now = new Date(now - 86400000)
  137. }
  138. return res
  139. })()
  140. },
  141. yAxis: {
  142. type: 'value'
  143. },
  144. series: [
  145. {
  146. data: [55, 32, 77, 85, 23, 59, 88],
  147. type: 'line',
  148. areaStyle: {}
  149. }
  150. ]
  151. }
  152. myChart2.setOption(option2)
  153. //消防给水系统
  154. var myChart3 = echarts.init(document.getElementById('echartsxfjs'), 'walden')
  155. option3 = {
  156. xAxis: {
  157. type: 'category',
  158. data: ['压力异常', '未启泵', '水泵手动']
  159. },
  160. yAxis: {
  161. type: 'value'
  162. },
  163. series: [
  164. {
  165. data: [20, 90, 60],
  166. type: 'bar'
  167. }
  168. ]
  169. }
  170. // 使用刚指定的配置项和数据显示图表。
  171. myChart3.setOption(option3)
  172. //故障统计
  173. var myChart4 = echarts.init(document.getElementById('echartsgztj'), 'walden')
  174. option4 = {
  175. // title: {
  176. // text: '动态数据',
  177. // },
  178. tooltip: {
  179. trigger: 'axis',
  180. axisPointer: {
  181. type: 'cross',
  182. label: {
  183. backgroundColor: 'rgba(62, 99, 151, 1)'
  184. }
  185. }
  186. },
  187. legend: {
  188. data: ['故障数量', '故障处理及时率']
  189. },
  190. xAxis: [
  191. {
  192. type: 'category',
  193. boundaryGap: true,
  194. data: (function() {
  195. var now = new Date()
  196. var res = []
  197. var len = 8
  198. while (len--) {
  199. res.unshift(now.getDate())
  200. now = new Date(now - 86400000)
  201. }
  202. return res
  203. })()
  204. },
  205. {
  206. type: 'category',
  207. boundaryGap: true,
  208. data: (function() {
  209. var res = []
  210. var len = 0
  211. while (len--) {
  212. res.push(8 - len - 1)
  213. }
  214. return res
  215. })()
  216. }
  217. ],
  218. yAxis: [
  219. {
  220. type: 'value',
  221. scale: true,
  222. name: '数量',
  223. max: 30,
  224. min: 0,
  225. boundaryGap: [0.2, 0.2]
  226. },
  227. {
  228. type: 'value',
  229. scale: true,
  230. name: '%',
  231. max: 100,
  232. min: 0,
  233. boundaryGap: [0.2, 0.2]
  234. }
  235. ],
  236. series: [
  237. {
  238. name: '故障数量',
  239. type: 'bar',
  240. xAxisIndex: 1,
  241. yAxisIndex: 1,
  242. data: (function() {
  243. var res = []
  244. var len = 8
  245. while (len--) {
  246. res.push(Math.round(Math.random() * 100))
  247. }
  248. return res
  249. })()
  250. },
  251. {
  252. name: '故障处理及时率',
  253. type: 'line',
  254. data: (function() {
  255. var res = []
  256. var len = 0
  257. while (len < 8) {
  258. res.push((Math.random() * 10 + 5).toFixed(1) - 0)
  259. len++
  260. }
  261. return res
  262. })()
  263. }
  264. ]
  265. }
  266. // 使用刚指定的配置项和数据显示图表。
  267. myChart4.setOption(option4)
  268. //火警统计
  269. var myChart5 = echarts.init(document.getElementById('echartshjtj'), 'walden')
  270. var colors = ['#5793f3', '#d14a61', '#675bba']
  271. option5 = {
  272. color: colors,
  273. tooltip: {
  274. trigger: 'none',
  275. axisPointer: {
  276. type: 'cross'
  277. }
  278. },
  279. legend: {
  280. data: ['火警数量', '火警处理及时率']
  281. },
  282. grid: {
  283. top: 50,
  284. bottom: 50
  285. },
  286. xAxis: [
  287. {
  288. type: 'category',
  289. axisTick: {
  290. alignWithLabel: true
  291. },
  292. axisLine: {
  293. onZero: false,
  294. lineStyle: {
  295. color: colors[1]
  296. }
  297. },
  298. axisPointer: {
  299. label: {
  300. formatter: function(params) {
  301. return (
  302. '火警数量 ' +
  303. params.value +
  304. (params.seriesData.length ? ':' + params.seriesData[0].data : '')
  305. )
  306. }
  307. }
  308. },
  309. data: (function() {
  310. var now = new Date()
  311. var res = []
  312. var len = 8
  313. while (len--) {
  314. res.unshift(now.getDate())
  315. now = new Date(now - 86400000)
  316. }
  317. return res
  318. })()
  319. },
  320. {
  321. type: 'category',
  322. axisTick: {
  323. alignWithLabel: true
  324. },
  325. axisPointer: {
  326. label: {
  327. formatter: function(params) {
  328. return (
  329. '火警处理及时率 ' +
  330. params.value +
  331. (params.seriesData.length ? ':' + params.seriesData[0].data : '')
  332. )
  333. }
  334. }
  335. }
  336. }
  337. ],
  338. yAxis: [
  339. {
  340. type: 'value',
  341. max: 90,
  342. min: 0
  343. }
  344. ],
  345. series: [
  346. {
  347. name: '火警数量',
  348. type: 'line',
  349. xAxisIndex: 1,
  350. smooth: true,
  351. data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 9.6, 52.2, 48.7, 18.8, 6.0, 2.3]
  352. },
  353. {
  354. name: '火警处理及时率',
  355. type: 'line',
  356. smooth: true,
  357. data: [
  358. 3.9,
  359. 5.9,
  360. 11.1,
  361. 18.7,
  362. 48.3,
  363. 69.2,
  364. 31.6,
  365. 46.6,
  366. 55.4,
  367. 18.4,
  368. 10.3,
  369. 0.7
  370. ]
  371. }
  372. ]
  373. }
  374. myChart5.setOption(option5)
  375. //执法结果统计
  376. var myChart6 = echarts.init(document.getElementById('echartszfjgtj'), 'roma')
  377. option6 = {
  378. color: ['#3398DB'],
  379. tooltip : {
  380. trigger: 'axis',
  381. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  382. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  383. }
  384. },
  385. grid: {
  386. left: '3%',
  387. right: '4%',
  388. bottom: '3%',
  389. containLabel: true
  390. },
  391. xAxis : [
  392. {
  393. type : 'category',
  394. data : ['责令立即', '责令整改', '受案登记', '行政处罚', '临时查封'],
  395. axisTick: {
  396. alignWithLabel: true
  397. }
  398. }
  399. ],
  400. yAxis : [
  401. {
  402. type : 'value'
  403. }
  404. ],
  405. series : [
  406. {
  407. type:'bar',
  408. barWidth: '60%',
  409. data:[10, 41, 30, 48, 20]
  410. }
  411. ]
  412. };
  413. // 使用刚指定的配置项和数据显示图表。
  414. myChart6.setOption(option6)
  415. //安全评分
  416. var myChart7 = echarts.init(document.getElementById('echartAqpf'))
  417. option7 = {
  418. title: {
  419. text: '95',
  420. x: 'center',
  421. y: 'center',
  422. textStyle: {
  423. fontWeight: 'normal',
  424. color: '#ffffff',
  425. fontSize: '30'
  426. }
  427. },
  428. color: ['rgba(176, 212, 251, 1)'],
  429. series: [{
  430. name: 'Line 1',
  431. type: 'pie',
  432. clockWise: true,
  433. radius: ['100%', '85%'],
  434. itemStyle: {
  435. normal: {
  436. label: {
  437. show: false
  438. },
  439. labelLine: {
  440. show: false
  441. }
  442. }
  443. },
  444. hoverAnimation: false,
  445. data: [{
  446. value: 90,
  447. name: '01',
  448. itemStyle: {
  449. normal: {
  450. color: { // 完成的圆环的颜色
  451. colorStops: [{
  452. offset: 0,
  453. color: '#00cefc' // 0% 处的颜色
  454. }, {
  455. offset: 1,
  456. color: '#367bec' // 100% 处的颜色
  457. }]
  458. },
  459. label: {
  460. show: false
  461. },
  462. labelLine: {
  463. show: false
  464. }
  465. }
  466. }
  467. }, {
  468. name: '02',
  469. value: 10
  470. }]
  471. }]
  472. }
  473. // 使用刚指定的配置项和数据显示图表。
  474. myChart7.setOption(option7)
  475. //维保统计
  476. var myChart8 = echarts.init(document.getElementById('echartWbtj'))
  477. option8 = {
  478. title: {
  479. text: '8%',
  480. x: 'center',
  481. y: 'center',
  482. textStyle: {
  483. fontWeight: 'normal',
  484. color: '#FFFFFF',
  485. fontSize: '30'
  486. }
  487. },
  488. color: ['rgba(176, 212, 251, 0.5)'],
  489. series: [{
  490. name: 'Line 1',
  491. type: 'pie',
  492. clockWise: true,
  493. radius: ['90%', '75%'],
  494. itemStyle: {
  495. normal: {
  496. label: {
  497. show: false
  498. },
  499. labelLine: {
  500. show: false
  501. }
  502. }
  503. },
  504. hoverAnimation: false,
  505. data: [{
  506. value: 8,
  507. name: '01',
  508. itemStyle: {
  509. normal: {
  510. color: { // 完成的圆环的颜色
  511. colorStops: [{
  512. offset: 0,
  513. color: '#00cefc' // 0% 处的颜色
  514. }, {
  515. offset: 1,
  516. color: '#367bec' // 100% 处的颜色
  517. }]
  518. },
  519. label: {
  520. show: false
  521. },
  522. labelLine: {
  523. show: false
  524. }
  525. }
  526. }
  527. }, {
  528. name: '02',
  529. value: 92
  530. }]
  531. }]
  532. }
  533. // 使用刚指定的配置项和数据显示图表。
  534. myChart8.setOption(option8)