eleFireInner.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149
  1. // 折线图定制 (数据离散率挖掘1)
  2. (function() {
  3. var sortData = [{
  4. sortName: "三相电压",
  5. data: [
  6. // 两个数组是因为有两条线
  7. [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
  8. [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
  9. [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
  10. ]
  11. },
  12. ];
  13. var xData = function() {
  14. var data = [];
  15. for (var i = 1; i < 31; i++) {
  16. data.push(i);
  17. }
  18. return data;
  19. }();
  20. // 1. 实例化对象
  21. var myChart = echarts.init(document.querySelector(".divergence .chart1"));
  22. // 2.指定配置
  23. var option = {
  24. color: [{
  25. colorStops: [{
  26. offset: 0,
  27. color: '#F9860C' // 0% 处的颜色
  28. }, {
  29. offset: 1,
  30. color: '#fff' // 100% 处的颜色
  31. }],
  32. },
  33. {
  34. colorStops: [{
  35. offset: 0,
  36. color: '#07E1F1' // 0% 处的颜色
  37. }, {
  38. offset: 1,
  39. color: '#0456CB' // 100% 处的颜色
  40. }],
  41. },
  42. {
  43. colorStops: [{
  44. offset: 0,
  45. color: '#11F90C' // 0% 处的颜色
  46. }, {
  47. offset: 1,
  48. color: '#3FC713' // 100% 处的颜色
  49. }],
  50. }
  51. ],
  52. tooltip: {
  53. trigger: "axis",
  54. textStyle: {
  55. align: 'left' //图例左对齐
  56. },
  57. backgroundColor: '#12DFE0',
  58. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间:2021年3月{b}日'
  59. },
  60. legend: {
  61. // 如果series 对象有name 值,则 legend可以不用写data
  62. itemGap: 20,
  63. itemHeight: 2,
  64. itemWidth: 15,
  65. icon: 'rect',
  66. textStyle: {
  67. color: "#fff"
  68. },
  69. top: "bottom",
  70. },
  71. grid: {
  72. top: "0%",
  73. left: "1%",
  74. right: "1%",
  75. bottom: "15%",
  76. show: true, // 显示边框
  77. borderWidth: '0', //去除边框
  78. containLabel: true // 包含刻度文字在内
  79. },
  80. xAxis: {
  81. type: "category",
  82. boundaryGap: false,
  83. data: xData,
  84. axisTick: {
  85. show: false // 去除刻度线
  86. },
  87. axisLabel: {
  88. color: "#AADDFF" // 文本颜色
  89. },
  90. axisLine: {
  91. lineStyle: {
  92. color: 'rgba(255,255,255,.3)'
  93. }
  94. },
  95. splitNumber: 8,
  96. splitLine: {
  97. show: false
  98. },
  99. splitArea: {
  100. show: true,
  101. areaStyle: {
  102. color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
  103. }
  104. }
  105. },
  106. yAxis: {
  107. type: "value",
  108. axisTick: {
  109. show: false // 去除刻度线
  110. },
  111. axisLabel: {
  112. show: false // 去除文本
  113. },
  114. axisLine: {
  115. show: false // 去除轴线
  116. },
  117. splitLine: {
  118. lineStyle: {
  119. color: "#012f4a" // 分割线颜色
  120. }
  121. }
  122. },
  123. series: [{
  124. symbol: "none",
  125. name: "方差",
  126. type: "line",
  127. data: sortData[0].data[0]
  128. },
  129. {
  130. symbol: "none",
  131. name: "标准差",
  132. type: "line",
  133. data: sortData[0].data[1]
  134. }, {
  135. symbol: "none",
  136. name: "平均值",
  137. type: "line",
  138. data: sortData[0].data[2]
  139. }
  140. ]
  141. };
  142. myChart.setOption(option);
  143. window.addEventListener("resize", function() {
  144. myChart.resize();
  145. });
  146. })();
  147. // 数据离散率挖掘2
  148. (function() {
  149. var sortData = [{
  150. sortName: "三相电流",
  151. data: [
  152. // 两个数组是因为有两条线
  153. [143, 19, 34, 40, 64, 191, 324, 290, 330, 310, 131, 165, 123, 178, 21, 82, 64, 43, 60, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
  154. [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
  155. [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
  156. ]
  157. },
  158. ];
  159. var xData = function() {
  160. var data = [];
  161. for (var i = 1; i < 31; i++) {
  162. data.push(i);
  163. }
  164. return data;
  165. }();
  166. // 1. 实例化对象
  167. var myChart = echarts.init(document.querySelector(".divergence .chart2"));
  168. // 2.指定配置
  169. var option = {
  170. color: [{
  171. colorStops: [{
  172. offset: 0,
  173. color: '#F9860C' // 0% 处的颜色
  174. }, {
  175. offset: 1,
  176. color: '#fff' // 100% 处的颜色
  177. }],
  178. },
  179. {
  180. colorStops: [{
  181. offset: 0,
  182. color: '#07E1F1' // 0% 处的颜色
  183. }, {
  184. offset: 1,
  185. color: '#0456CB' // 100% 处的颜色
  186. }],
  187. },
  188. {
  189. colorStops: [{
  190. offset: 0,
  191. color: '#11F90C' // 0% 处的颜色
  192. }, {
  193. offset: 1,
  194. color: '#3FC713' // 100% 处的颜色
  195. }],
  196. }
  197. ],
  198. tooltip: {
  199. trigger: "axis",
  200. textStyle: {
  201. align: 'left' //图例左对齐
  202. },
  203. backgroundColor: '#12DFE0',
  204. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间:2021年3月{b}日'
  205. },
  206. legend: {
  207. // 如果series 对象有name 值,则 legend可以不用写data
  208. itemGap: 20,
  209. itemHeight: 2,
  210. itemWidth: 15,
  211. icon: 'rect',
  212. textStyle: {
  213. color: "#fff"
  214. },
  215. top: "bottom",
  216. },
  217. grid: {
  218. top: "0%",
  219. left: "1%",
  220. right: "1%",
  221. bottom: "15%",
  222. show: true, // 显示边框
  223. borderWidth: '0', //去除边框
  224. containLabel: true // 包含刻度文字在内
  225. },
  226. xAxis: {
  227. type: "category",
  228. boundaryGap: false,
  229. data: xData,
  230. axisTick: {
  231. show: false // 去除刻度线
  232. },
  233. axisLabel: {
  234. color: "#AADDFF" // 文本颜色
  235. },
  236. axisLine: {
  237. lineStyle: {
  238. color: 'rgba(255,255,255,.3)'
  239. }
  240. },
  241. splitNumber: 8,
  242. splitLine: {
  243. show: false
  244. },
  245. splitArea: {
  246. show: true,
  247. areaStyle: {
  248. color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
  249. }
  250. }
  251. },
  252. yAxis: {
  253. type: "value",
  254. axisTick: {
  255. show: false // 去除刻度线
  256. },
  257. axisLabel: {
  258. show: false // 去除文本
  259. },
  260. axisLine: {
  261. show: false // 去除轴线
  262. },
  263. splitLine: {
  264. lineStyle: {
  265. color: "#012f4a" // 分割线颜色
  266. }
  267. }
  268. },
  269. series: [{
  270. symbol: "none",
  271. name: "方差",
  272. type: "line",
  273. data: sortData[0].data[0]
  274. },
  275. {
  276. symbol: "none",
  277. name: "标准差",
  278. type: "line",
  279. data: sortData[0].data[1]
  280. }, {
  281. symbol: "none",
  282. name: "平均值",
  283. type: "line",
  284. data: sortData[0].data[2]
  285. }
  286. ]
  287. };
  288. myChart.setOption(option);
  289. window.addEventListener("resize", function() {
  290. myChart.resize();
  291. });
  292. })();
  293. // 数据离散率挖掘3
  294. (function() {
  295. var sortData = [{
  296. sortName: "三相电流",
  297. data: [
  298. // 两个数组是因为有两条线
  299. [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
  300. [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
  301. [131, 165, 123, 178, 21, 82, 64, 43, 60, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
  302. ]
  303. },
  304. ];
  305. var xData = function() {
  306. var data = [];
  307. for (var i = 1; i < 31; i++) {
  308. data.push(i);
  309. }
  310. return data;
  311. }();
  312. // 1. 实例化对象
  313. var myChart = echarts.init(document.querySelector(".divergence .chart3"));
  314. // 2.指定配置
  315. var option = {
  316. color: [{
  317. colorStops: [{
  318. offset: 0,
  319. color: '#F9860C' // 0% 处的颜色
  320. }, {
  321. offset: 1,
  322. color: '#fff' // 100% 处的颜色
  323. }],
  324. },
  325. {
  326. colorStops: [{
  327. offset: 0,
  328. color: '#07E1F1' // 0% 处的颜色
  329. }, {
  330. offset: 1,
  331. color: '#0456CB' // 100% 处的颜色
  332. }],
  333. },
  334. {
  335. colorStops: [{
  336. offset: 0,
  337. color: '#11F90C' // 0% 处的颜色
  338. }, {
  339. offset: 1,
  340. color: '#3FC713' // 100% 处的颜色
  341. }],
  342. }
  343. ],
  344. tooltip: {
  345. trigger: "axis",
  346. textStyle: {
  347. align: 'left' //图例左对齐
  348. },
  349. backgroundColor: '#12DFE0',
  350. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间:2021年3月{b}日'
  351. },
  352. legend: {
  353. // 如果series 对象有name 值,则 legend可以不用写data
  354. itemGap: 20,
  355. itemHeight: 2,
  356. itemWidth: 15,
  357. icon: 'rect',
  358. textStyle: {
  359. color: "#fff"
  360. },
  361. top: "bottom",
  362. },
  363. grid: {
  364. top: "0%",
  365. left: "1%",
  366. right: "1%",
  367. bottom: "15%",
  368. show: true, // 显示边框
  369. borderWidth: '0', //去除边框
  370. containLabel: true // 包含刻度文字在内
  371. },
  372. xAxis: {
  373. type: "category",
  374. boundaryGap: false,
  375. data: xData,
  376. axisTick: {
  377. show: false // 去除刻度线
  378. },
  379. axisLabel: {
  380. color: "#AADDFF" // 文本颜色
  381. },
  382. axisLine: {
  383. lineStyle: {
  384. color: 'rgba(255,255,255,.3)'
  385. }
  386. },
  387. splitNumber: 8,
  388. splitLine: {
  389. show: false
  390. },
  391. splitArea: {
  392. show: true,
  393. areaStyle: {
  394. color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
  395. }
  396. }
  397. },
  398. yAxis: {
  399. type: "value",
  400. axisTick: {
  401. show: false // 去除刻度线
  402. },
  403. axisLabel: {
  404. show: false // 去除文本
  405. },
  406. axisLine: {
  407. show: false // 去除轴线
  408. },
  409. splitLine: {
  410. lineStyle: {
  411. color: "#012f4a" // 分割线颜色
  412. }
  413. }
  414. },
  415. series: [{
  416. symbol: "none",
  417. name: "方差",
  418. type: "line",
  419. data: sortData[0].data[0]
  420. },
  421. {
  422. symbol: "none",
  423. name: "标准差",
  424. type: "line",
  425. data: sortData[0].data[1]
  426. }, {
  427. symbol: "none",
  428. name: "平均值",
  429. type: "line",
  430. data: sortData[0].data[2]
  431. }
  432. ]
  433. };
  434. myChart.setOption(option);
  435. window.addEventListener("resize", function() {
  436. myChart.resize();
  437. });
  438. })();
  439. // 数据离散率挖掘4
  440. (function() {
  441. var sortData = [{
  442. sortName: "三相电流",
  443. data: [
  444. // 两个数组是因为有两条线
  445. [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
  446. [120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
  447. [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
  448. ]
  449. },
  450. ];
  451. var xData = function() {
  452. var data = [];
  453. for (var i = 1; i < 31; i++) {
  454. data.push(i);
  455. }
  456. return data;
  457. }();
  458. // 1. 实例化对象
  459. var myChart = echarts.init(document.querySelector(".divergence .chart4"));
  460. // 2.指定配置
  461. var option = {
  462. color: [{
  463. colorStops: [{
  464. offset: 0,
  465. color: '#F9860C' // 0% 处的颜色
  466. }, {
  467. offset: 1,
  468. color: '#fff' // 100% 处的颜色
  469. }],
  470. },
  471. {
  472. colorStops: [{
  473. offset: 0,
  474. color: '#07E1F1' // 0% 处的颜色
  475. }, {
  476. offset: 1,
  477. color: '#0456CB' // 100% 处的颜色
  478. }],
  479. },
  480. {
  481. colorStops: [{
  482. offset: 0,
  483. color: '#11F90C' // 0% 处的颜色
  484. }, {
  485. offset: 1,
  486. color: '#3FC713' // 100% 处的颜色
  487. }],
  488. }
  489. ],
  490. tooltip: {
  491. trigger: "axis",
  492. textStyle: {
  493. align: 'left' //图例左对齐
  494. },
  495. backgroundColor: '#12DFE0',
  496. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间:2021年3月{b}日'
  497. },
  498. legend: {
  499. // 如果series 对象有name 值,则 legend可以不用写data
  500. itemGap: 20,
  501. itemHeight: 2,
  502. itemWidth: 15,
  503. icon: 'rect',
  504. textStyle: {
  505. color: "#fff"
  506. },
  507. top: "bottom",
  508. },
  509. grid: {
  510. top: "0%",
  511. left: "1%",
  512. right: "1%",
  513. bottom: "15%",
  514. show: true, // 显示边框
  515. borderWidth: '0', //去除边框
  516. containLabel: true // 包含刻度文字在内
  517. },
  518. xAxis: {
  519. type: "category",
  520. boundaryGap: false,
  521. data: xData,
  522. axisTick: {
  523. show: false // 去除刻度线
  524. },
  525. axisLabel: {
  526. color: "#AADDFF" // 文本颜色
  527. },
  528. axisLine: {
  529. lineStyle: {
  530. color: 'rgba(255,255,255,.3)'
  531. }
  532. },
  533. splitNumber: 8,
  534. splitLine: {
  535. show: false
  536. },
  537. splitArea: {
  538. show: true,
  539. areaStyle: {
  540. color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
  541. }
  542. }
  543. },
  544. yAxis: {
  545. type: "value",
  546. axisTick: {
  547. show: false // 去除刻度线
  548. },
  549. axisLabel: {
  550. show: false // 去除文本
  551. },
  552. axisLine: {
  553. show: false // 去除轴线
  554. },
  555. splitLine: {
  556. lineStyle: {
  557. color: "#012f4a" // 分割线颜色
  558. }
  559. }
  560. },
  561. series: [{
  562. symbol: "none",
  563. name: "方差",
  564. type: "line",
  565. data: sortData[0].data[0]
  566. },
  567. {
  568. symbol: "none",
  569. name: "标准差",
  570. type: "line",
  571. data: sortData[0].data[1]
  572. }, {
  573. symbol: "none",
  574. name: "平均值",
  575. type: "line",
  576. data: sortData[0].data[2]
  577. }
  578. ]
  579. };
  580. myChart.setOption(option);
  581. window.addEventListener("resize", function() {
  582. myChart.resize();
  583. });
  584. })();
  585. // 折线图定制 (电老化分析1)
  586. (function() {
  587. var sortData = [{
  588. sortName: "异常设备",
  589. data: [
  590. // 两个数组是因为有两条线
  591. [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
  592. [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
  593. ]
  594. },
  595. ];
  596. var xData = function() {
  597. var data = [];
  598. for (var i = 1; i < 31; i++) {
  599. data.push(i);
  600. }
  601. return data;
  602. }();
  603. // 1. 实例化对象
  604. var myChart = echarts.init(document.querySelector(".oldAnalysis .chart1"));
  605. // 2.指定配置
  606. var option = {
  607. color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
  608. tooltip: {
  609. trigger: "axis",
  610. textStyle: {
  611. align: 'left' //图例左对齐
  612. },
  613. backgroundColor: '#12DFE0',
  614. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间:2021年3月{b}日'
  615. },
  616. legend: {
  617. // 如果series 对象有name 值,则 legend可以不用写data
  618. itemGap: 20,
  619. itemHeight: 2,
  620. itemWidth: 15,
  621. icon: 'rect',
  622. textStyle: {
  623. color: "#fff"
  624. },
  625. top: "bottom",
  626. },
  627. grid: {
  628. top: "0%",
  629. left: "1%",
  630. right: "1%",
  631. bottom: "15%",
  632. show: true, // 显示边框
  633. borderWidth: '0', //去除边框
  634. containLabel: true // 包含刻度文字在内
  635. },
  636. xAxis: {
  637. type: "category",
  638. boundaryGap: false,
  639. data: xData,
  640. axisTick: {
  641. show: false // 去除刻度线
  642. },
  643. axisLabel: {
  644. color: "#AADDFF" // 文本颜色
  645. },
  646. axisLine: {
  647. show: false // 去除轴线
  648. }
  649. },
  650. yAxis: {
  651. type: "value",
  652. axisTick: {
  653. show: false // 去除刻度线
  654. },
  655. axisLabel: {
  656. show: false // 去除文本
  657. },
  658. axisLine: {
  659. show: false // 去除轴线
  660. },
  661. splitLine: {
  662. lineStyle: {
  663. color: "#012f4a" // 分割线颜色
  664. }
  665. }
  666. },
  667. series: [{
  668. symbol: "none",
  669. name: "电流",
  670. type: "line",
  671. smooth: true, // true 可以让我们的折线显示带有弧度
  672. areaStyle: {
  673. normal: {
  674. color: new echarts.graphic.LinearGradient(
  675. 0,
  676. 0,
  677. 0,
  678. 1, [{
  679. offset: 0,
  680. color: "rgba(255,156,0, 0.4)"
  681. },
  682. {
  683. offset: 0.8,
  684. color: "rgba(255,156,0, 0.3)"
  685. }
  686. ],
  687. false
  688. ),
  689. shadowColor: "rgba(0, 0, 0, 0.1)"
  690. }
  691. },
  692. data: sortData[0].data[0]
  693. },
  694. {
  695. symbol: "none",
  696. name: "电压",
  697. type: "line",
  698. smooth: true,
  699. areaStyle: {
  700. normal: {
  701. color: new echarts.graphic.LinearGradient(
  702. 0,
  703. 0,
  704. 0,
  705. 1, [{
  706. offset: 0,
  707. color: "rgba(0,150,255,0.5)"
  708. },
  709. {
  710. offset: 0.8,
  711. color: "rgba(0,150,255, 0.1)"
  712. }
  713. ],
  714. false
  715. ),
  716. shadowColor: "rgba(0, 0, 0, 0.1)"
  717. }
  718. },
  719. data: sortData[0].data[1]
  720. }
  721. ]
  722. };
  723. myChart.setOption(option);
  724. window.addEventListener("resize", function() {
  725. myChart.resize();
  726. });
  727. })();
  728. // 折线图定制 (电老化分析2)
  729. (function() {
  730. var sortData = [{
  731. sortName: "漏电告警",
  732. data: [
  733. // 两个数组是因为有两条线
  734. [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
  735. [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
  736. ]
  737. }];
  738. var xData = function() {
  739. var data = [];
  740. for (var i = 1; i < 31; i++) {
  741. data.push(i);
  742. }
  743. return data;
  744. }();
  745. // 1. 实例化对象
  746. var myChart = echarts.init(document.querySelector(".oldAnalysis .chart2"));
  747. // 2.指定配置
  748. var option = {
  749. color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
  750. tooltip: {
  751. trigger: "axis",
  752. textStyle: {
  753. align: 'left' //图例左对齐
  754. },
  755. backgroundColor: '#12DFE0',
  756. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间:2021年3月{b}日'
  757. },
  758. legend: {
  759. // 如果series 对象有name 值,则 legend可以不用写data
  760. itemGap: 20,
  761. itemHeight: 2,
  762. itemWidth: 15,
  763. icon: 'rect',
  764. textStyle: {
  765. color: "#fff"
  766. },
  767. top: "bottom",
  768. },
  769. grid: {
  770. top: "0%",
  771. left: "1%",
  772. right: "1%",
  773. bottom: "15%",
  774. show: true, // 显示边框
  775. borderWidth: '0', //去除边框
  776. containLabel: true // 包含刻度文字在内
  777. },
  778. xAxis: {
  779. type: "category",
  780. boundaryGap: false,
  781. data: xData,
  782. axisTick: {
  783. show: false // 去除刻度线
  784. },
  785. axisLabel: {
  786. color: "#AADDFF" // 文本颜色
  787. },
  788. axisLine: {
  789. show: false // 去除轴线
  790. }
  791. },
  792. yAxis: {
  793. type: "value",
  794. axisTick: {
  795. show: false // 去除刻度线
  796. },
  797. axisLabel: {
  798. show: false // 去除文本
  799. },
  800. axisLine: {
  801. show: false // 去除轴线
  802. },
  803. splitLine: {
  804. lineStyle: {
  805. color: "#012f4a" // 分割线颜色
  806. }
  807. }
  808. },
  809. series: [{
  810. symbol: "none",
  811. name: "电流",
  812. type: "line",
  813. smooth: true, // true 可以让我们的折线显示带有弧度
  814. areaStyle: {
  815. normal: {
  816. color: new echarts.graphic.LinearGradient(
  817. 0,
  818. 0,
  819. 0,
  820. 1, [{
  821. offset: 0,
  822. color: "rgba(255,156,0, 0.4)"
  823. },
  824. {
  825. offset: 0.8,
  826. color: "rgba(255,156,0, 0.3)"
  827. }
  828. ],
  829. false
  830. ),
  831. shadowColor: "rgba(0, 0, 0, 0.1)"
  832. }
  833. },
  834. data: sortData[0].data[0]
  835. },
  836. {
  837. symbol: "none",
  838. name: "电压",
  839. type: "line",
  840. smooth: true,
  841. areaStyle: {
  842. normal: {
  843. color: new echarts.graphic.LinearGradient(
  844. 0,
  845. 0,
  846. 0,
  847. 1, [{
  848. offset: 0,
  849. color: "rgba(0,150,255,0.5)"
  850. },
  851. {
  852. offset: 0.8,
  853. color: "rgba(0,150,255, 0.1)"
  854. }
  855. ],
  856. false
  857. ),
  858. shadowColor: "rgba(0, 0, 0, 0.1)"
  859. }
  860. },
  861. data: sortData[0].data[1]
  862. }
  863. ]
  864. };
  865. myChart.setOption(option);
  866. window.addEventListener("resize", function() {
  867. myChart.resize();
  868. });
  869. })();
  870. // 折线图定制 (热老化分析)
  871. (function() {
  872. var sortData = [{
  873. data: [
  874. // 三个数组是因为有3条线
  875. [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
  876. [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
  877. [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
  878. ]
  879. }];
  880. var xData = function() {
  881. var data = [];
  882. for (var i = 1; i < 31; i++) {
  883. data.push(i);
  884. }
  885. return data;
  886. }();
  887. // 1. 实例化对象
  888. var myChart = echarts.init(document.querySelector(".hotAnalysis .chart1"));
  889. // 2.指定配置
  890. var option = {
  891. color: ["#05EEE7", "#9999FF", "#FE92B3"], // 通过这个color修改三条线的颜色
  892. tooltip: {
  893. trigger: "axis",
  894. textStyle: {
  895. align: 'left' //图例左对齐
  896. },
  897. backgroundColor: '#12DFE0',
  898. formatter: '{a0}: {c0}°C<br />{a1}: {c1}°C<br />{a2}: {c2}°C<br />时间:2021年3月{b}日'
  899. },
  900. legend: {
  901. // 如果series 对象有name 值,则 legend可以不用写data
  902. itemGap: 20,
  903. itemHeight: 2,
  904. itemWidth: 15,
  905. icon: 'rect',
  906. textStyle: {
  907. color: "#fff"
  908. },
  909. top: "bottom",
  910. },
  911. grid: {
  912. top: "0%",
  913. left: "1%",
  914. right: "1%",
  915. bottom: "15%",
  916. show: true, // 显示边框
  917. borderWidth: '0', //去除边框
  918. containLabel: true // 包含刻度文字在内
  919. },
  920. xAxis: {
  921. type: "category",
  922. boundaryGap: false,
  923. data: xData,
  924. axisTick: {
  925. show: false // 去除刻度线
  926. },
  927. axisLabel: {
  928. color: "#AADDFF" // 文本颜色
  929. },
  930. axisLine: {
  931. show: false // 去除轴线
  932. }
  933. },
  934. yAxis: {
  935. type: "value",
  936. axisTick: {
  937. show: false // 去除刻度线
  938. },
  939. axisLabel: {
  940. show: false // 去除文本
  941. },
  942. axisLine: {
  943. show: false // 去除轴线
  944. },
  945. splitLine: {
  946. lineStyle: {
  947. color: "#012f4a" // 分割线颜色
  948. }
  949. }
  950. },
  951. series: [{
  952. symbol: "none",
  953. name: "线缆产生的温度",
  954. type: "line",
  955. smooth: true, // true 可以让我们的折线显示带有弧度
  956. areaStyle: {
  957. normal: {
  958. color: new echarts.graphic.LinearGradient(
  959. 0,
  960. 0,
  961. 0,
  962. 1, [{
  963. offset: 0,
  964. color: "rgba(5,238,231,.6)"
  965. },
  966. {
  967. offset: 0.8,
  968. color: "rgba(5,238,231, 0.4)"
  969. }
  970. ],
  971. false
  972. ),
  973. }
  974. },
  975. data: sortData[0].data[0]
  976. },
  977. {
  978. symbol: "none",
  979. name: "环境温度",
  980. type: "line",
  981. smooth: true,
  982. areaStyle: {
  983. normal: {
  984. color: new echarts.graphic.LinearGradient(
  985. 0,
  986. 0,
  987. 0,
  988. 1, [{
  989. offset: 0,
  990. color: "rgba(153,153,255,.6)"
  991. },
  992. {
  993. offset: 0.8,
  994. color: "rgba(153,153,255, 0.4)"
  995. }
  996. ],
  997. false
  998. ),
  999. }
  1000. },
  1001. data: sortData[0].data[1]
  1002. },
  1003. {
  1004. symbol: "none",
  1005. name: "线缆温度",
  1006. type: "line",
  1007. smooth: true,
  1008. areaStyle: {
  1009. normal: {
  1010. color: new echarts.graphic.LinearGradient(
  1011. 0,
  1012. 0,
  1013. 0,
  1014. 1, [{
  1015. offset: 0,
  1016. color: "rgba(255,147,180,.6)"
  1017. },
  1018. {
  1019. offset: 0.8,
  1020. color: "rgba(255,147,180, 0.4)"
  1021. }
  1022. ],
  1023. false
  1024. ),
  1025. }
  1026. },
  1027. data: sortData[0].data[2]
  1028. }
  1029. ]
  1030. };
  1031. myChart.setOption(option);
  1032. window.addEventListener("resize", function() {
  1033. myChart.resize();
  1034. });
  1035. })();