ybiao1.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. /*大屏*/
  2. (function () {
  3. var chart1 = echarts.init(document.getElementById('ychart1'));
  4. var chart2 = echarts.init(document.getElementById('ychart2'));
  5. var chart3 = echarts.init(document.getElementById('ychart3'));
  6. var chart4 = echarts.init(document.getElementById('ychart4'));
  7. var data1 = [{
  8. name: "运行速度",
  9. value: 109,
  10. },
  11. {
  12. name: "单机效率",
  13. value: 109,
  14. },
  15. {
  16. name: "温度值",
  17. value: 109,
  18. },
  19. {
  20. name: "震动值",
  21. value: 109,
  22. }
  23. ];
  24. var colorTemplate1 = [
  25. [0.2, "#13dcea"],
  26. [0.8, "#13dcea"],
  27. [1, "#13dcea"]
  28. ];
  29. var option = [{
  30. series: [{
  31. name: "yuxingshudu",
  32. type: "gauge",
  33. radius: "100%",
  34. center: ["50%", "55%"],
  35. min: 0,
  36. max: 240,
  37. splitNumber: 8,
  38. axisLine: {
  39. show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
  40. lineStyle: {
  41. color: colorTemplate1,
  42. width: 6
  43. }
  44. },
  45. pointer: {
  46. width: 4
  47. },
  48. axisLabel: {
  49. show: true,
  50. distance: 4,
  51. color: "#0fa5b6",
  52. fontSize: 6,
  53. formatter: "{value}",
  54. },
  55. splitLine: { // 分隔线样式。
  56. show: true,
  57. length: 6,
  58. },
  59. itemStyle: {
  60. color: "#056094",
  61. opacity: 1,
  62. },
  63. title: { // 仪表盘标题。
  64. show: true,
  65. offsetCenter: [0,
  66. "80%"
  67. ],
  68. color: "#13dcea",
  69. fontSize: 12,
  70. },
  71. detail: {
  72. show: true,
  73. offsetCenter: [0,
  74. "40%"
  75. ],
  76. color: "auto",
  77. fontSize: 10,
  78. },
  79. data: [
  80. data1[0]
  81. ]
  82. }]
  83. },
  84. // biaopan2
  85. {
  86. series: [{
  87. name: "单机效率",
  88. type: "gauge",
  89. radius: "100%",
  90. center: ["50%", "55%"],
  91. min: 0,
  92. max: 240,
  93. splitNumber: 8,
  94. axisLine: {
  95. show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
  96. lineStyle: {
  97. color: colorTemplate1,
  98. width: 6
  99. }
  100. },
  101. pointer: {
  102. width: 4
  103. },
  104. axisLabel: {
  105. show: true,
  106. distance: 4,
  107. color: "#0fa5b6",
  108. fontSize: 6,
  109. formatter: "{value}",
  110. },
  111. splitLine: { // 分隔线样式。
  112. show: true,
  113. length: 6,
  114. },
  115. itemStyle: {
  116. color: "#056094",
  117. opacity: 1,
  118. },
  119. title: { // 仪表盘标题。
  120. show: true,
  121. offsetCenter: [0,
  122. "80%"
  123. ],
  124. color: "#13dcea",
  125. fontSize: 12,
  126. },
  127. detail: {
  128. show: true,
  129. offsetCenter: [0,
  130. "40%"
  131. ],
  132. color: "auto",
  133. fontSize: 10,
  134. },
  135. data: [
  136. data1[1]
  137. ]
  138. }]
  139. },
  140. // biao 3
  141. {
  142. series: [{
  143. name: "单机效率",
  144. type: "gauge",
  145. radius: "100%",
  146. center: ["50%", "55%"],
  147. min: 0,
  148. max: 240,
  149. splitNumber: 8,
  150. axisLine: {
  151. show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
  152. lineStyle: {
  153. color: colorTemplate1,
  154. width: 6
  155. }
  156. },
  157. pointer: {
  158. width: 4
  159. },
  160. axisLabel: {
  161. show: true,
  162. distance: 4,
  163. color: "#0fa5b6",
  164. fontSize: 6,
  165. formatter: "{value}",
  166. },
  167. splitLine: { // 分隔线样式。
  168. show: true,
  169. length: 6,
  170. },
  171. itemStyle: {
  172. color: "#056094",
  173. opacity: 1,
  174. },
  175. title: { // 仪表盘标题。
  176. show: true,
  177. offsetCenter: [0,
  178. "80%"
  179. ],
  180. color: "#13dcea",
  181. fontSize: 12,
  182. },
  183. detail: {
  184. show: true,
  185. offsetCenter: [0,
  186. "40%"
  187. ],
  188. color: "auto",
  189. fontSize: 10,
  190. },
  191. data: [
  192. data1[2]
  193. ]
  194. }]
  195. },
  196. // biao 4
  197. {
  198. series: [{
  199. name: "单机效率",
  200. type: "gauge",
  201. radius: "100%",
  202. center: ["50%", "55%"],
  203. min: 0,
  204. max: 240,
  205. splitNumber: 8,
  206. axisLine: {
  207. show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
  208. lineStyle: {
  209. color: colorTemplate1,
  210. width: 6
  211. }
  212. },
  213. pointer: {
  214. width: 4
  215. },
  216. axisLabel: {
  217. show: true,
  218. distance: 4,
  219. color: "#0fa5b6",
  220. fontSize: 6,
  221. formatter: "{value}",
  222. },
  223. splitLine: { // 分隔线样式。
  224. show: true,
  225. length: 6,
  226. },
  227. itemStyle: {
  228. color: "#056094",
  229. opacity: 1,
  230. },
  231. title: { // 仪表盘标题。
  232. show: true,
  233. offsetCenter: [0,
  234. "80%"
  235. ],
  236. color: "#13dcea",
  237. fontSize: 12,
  238. },
  239. detail: {
  240. show: true,
  241. offsetCenter: [0,
  242. "40%"
  243. ],
  244. color: "auto",
  245. fontSize: 10,
  246. },
  247. data: [
  248. data1[3]
  249. ]
  250. }]
  251. },
  252. ];
  253. // 使用刚指定的配置项和数据显示图表
  254. chart1.setOption(option[0])
  255. chart2.setOption(option[1])
  256. chart3.setOption(option[2])
  257. chart4.setOption(option[3])
  258. window.addEventListener('resize', function () {
  259. chart1.resize();
  260. chart2.resize();
  261. chart3.resize();
  262. chart4.resize();
  263. })
  264. })()