安防设备.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
  2. option = {
  3. color: [{
  4. type: 'linear',
  5. x: 0,
  6. y: 0,
  7. x2: 0,
  8. y2: 1,
  9. colorStops: [{
  10. offset: 0,
  11. color: '#2C8179' // 0% 处的颜色
  12. }, {
  13. offset: 1,
  14. color: '#18C4B9' // 100% 处的颜色
  15. }],
  16. global: false // 缺省为 false
  17. }, {
  18. type: 'linear',
  19. x: 0,
  20. y: 0,
  21. x2: 0,
  22. y2: 1,
  23. colorStops: [{
  24. offset: 0,
  25. color: '#ACBF95' // 0% 处的颜色
  26. }, {
  27. offset: 1,
  28. color: '#7CBF2B' // 100% 处的颜色
  29. }],
  30. global: false // 缺省为 false
  31. }, {
  32. type: 'linear',
  33. x: 0,
  34. y: 0,
  35. x2: 0,
  36. y2: 1,
  37. colorStops: [{
  38. offset: 0,
  39. color: '#508097' // 0% 处的颜色
  40. }, {
  41. offset: 1,
  42. color: '#1C3979' // 100% 处的颜色
  43. }],
  44. global: false // 缺省为 false
  45. }, {
  46. type: 'linear',
  47. x: 0,
  48. y: 0,
  49. x2: 0,
  50. y2: 1,
  51. colorStops: [{
  52. offset: 0,
  53. color: '#4d72d9' // 0% 处的颜色
  54. }, {
  55. offset: 1,
  56. color: '#75489F' // 100% 处的颜色
  57. }],
  58. global: false // 缺省为 false
  59. }],
  60. backgroundColor: 'rgba(1,202,217,.2)',
  61. title: [{
  62. text: '设备数量',
  63. textStyle: {
  64. color: '#a0b3c7',
  65. fontWeight: 'normal',
  66. fontSize: 14
  67. },
  68. top: 'top',
  69. left: '15%'
  70. },{
  71. text: '运行状态',
  72. textStyle: {
  73. color: '#a0b3c7',
  74. fontWeight: 'normal',
  75. fontSize: 14
  76. },
  77. top: 'top',
  78. left: '65%'
  79. }],
  80. grid: {
  81. left: 10,
  82. right: 40,
  83. top: 20,
  84. bottom: 0,
  85. containLabel: true
  86. },
  87. legend: {
  88. x: 'center',
  89. y: '70%',
  90. textStyle: {
  91. fontSize: 10,
  92. color: 'rgba(255,255,255,.7)'
  93. },
  94. data: ['门禁设备', '安防设备', '在线设备', '离线设备']
  95. },
  96. calculable: true,
  97. series: [
  98. {
  99. name: '面积模式',
  100. type: 'pie',
  101. radius: [5, 50],
  102. center: ['25%', '40%'],
  103. roseType: 'area',
  104. label: {
  105. normal: {
  106. formatter: '{c}',
  107. position: 'inside'
  108. }
  109. },
  110. itemStyle: {
  111. // normal: {
  112. // color: new echarts.graphic.LinearGradient(
  113. // 1, 0, 0, 1, [{
  114. // offset: 0,
  115. // color: '#76c4bf'
  116. // }, {
  117. // offset: 1,
  118. // color: '#ACBF95'
  119. // }]
  120. // )
  121. // }
  122. },
  123. data: [{
  124. value: 540,
  125. name: '门禁设备'
  126. }, {
  127. value: 480,
  128. name: '安防设备'
  129. }]
  130. }, {
  131. name: '面积模式',
  132. type: 'pie',
  133. radius: [5, 50],
  134. center: ['75%', '40%'],
  135. roseType: 'area',
  136. label: {
  137. normal: {
  138. formatter: '{c}',
  139. position: 'inside'
  140. }
  141. },
  142. data: [
  143. { value: 1027, name: '在线设备' },
  144. { value: 3, name: '离线设备' },
  145. ]
  146. }
  147. ]
  148. };
  149. myChart.setOption(option);