Newer
Older
KaiFengPC / src / components / Echarts / pieChart_1.js
@zhangdeliang zhangdeliang on 12 Oct 39 KB update
  1. import * as echarts from 'echarts';
  2. import useUserStore from '@/store/modules/user';
  3.  
  4. const pinias = useUserStore();
  5.  
  6. const chartOption = {
  7. //排水一张图 管网资产饼图
  8. floodOneMapPipePie: {
  9. color: pinias.$state.chartColor,
  10. legend: {
  11. top: '20%',
  12. right: '6%',
  13. type: 'scroll',
  14. orient: 'vertical',
  15. textStyle: {
  16. color: '#ccc',
  17. fontSize: 14,
  18. },
  19. },
  20. tooltip: {
  21. show: true,
  22. },
  23. series: [
  24. {
  25. type: 'pie',
  26. radius: ['55%', '75%'],
  27. center: ['30%', '40%'],
  28. label: {
  29. show: false,
  30. position: 'center',
  31. },
  32. labelLine: {
  33. length: 30,
  34. show: false,
  35. },
  36. data: [
  37. { value: 135.6, name: '一级主干' },
  38. { value: 83.5, name: '二级主干' },
  39. { value: 10.5, name: '支干管网' },
  40. ],
  41. },
  42. ],
  43. },
  44. //排水一张图 降雨场次统计饼图
  45. floodOneMapRainStatic: {
  46. legend: {
  47. top: '20%',
  48. right: '2%',
  49. type: 'scroll',
  50. orient: 'vertical',
  51. textStyle: {
  52. color: '#ccc',
  53. fontSize: 14,
  54. },
  55. },
  56. tooltip: {
  57. show: true,
  58. },
  59. series: [
  60. {
  61. type: 'pie',
  62. radius: ['55%', '75%'],
  63. center: ['30%', '40%'],
  64. label: {
  65. show: false,
  66. position: 'center',
  67. },
  68. labelLine: {
  69. length: 30,
  70. show: false,
  71. },
  72. data: [
  73. { value: 10, name: '1年1遇' },
  74. { value: 5, name: '2年1遇' },
  75. { value: 4, name: '5年1遇' },
  76. { value: 2, name: '10年1遇' },
  77. ],
  78. },
  79. ],
  80. },
  81. // 排水一张图 物联感知管网监测历史趋势
  82. floodOneMapPipeSupervise: {
  83. grid: {
  84. top: '40px',
  85. left: '45px',
  86. right: '47px',
  87. bottom: '40px',
  88. },
  89. animation: true,
  90. // 显示暂无数据
  91. graphic: {
  92. type: 'text', // 类型:文本
  93. left: 'center',
  94. top: 'middle',
  95. silent: true, // 不响应事件
  96. invisible: false, // 有数据就隐藏
  97. style: {
  98. fill: '#c6c6c6',
  99. fontWeight: 'bold',
  100. text: '暂无数据',
  101. fontFamily: 'Microsoft YaHei',
  102. fontSize: '18px',
  103. },
  104. },
  105. tooltip: {
  106. trigger: 'axis',
  107. axisPointer: {
  108. type: 'cross',
  109. animation: false,
  110. label: {
  111. backgroundColor: '#505765',
  112. },
  113. },
  114. },
  115. legend: {
  116. data: ['SS', '流量'],
  117. textStyle: {
  118. color: '#00D1FF',
  119. fontsize: 14,
  120. },
  121. },
  122. xAxis: [
  123. {
  124. type: 'category',
  125. boundaryGap: true,
  126. axisLabel: {
  127. color: '#00D1FF',
  128. },
  129. axisLine: {
  130. show: true,
  131. lineStyle: {
  132. color: '#00D1FF', //刻度线的颜色
  133. },
  134. },
  135.  
  136. // prettier-ignore
  137. data: [' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00'],
  138. },
  139. ],
  140. yAxis: [
  141. {
  142. name: 'SS(mg/l)',
  143. type: 'value',
  144. textStyle: {
  145. color: '#00D1FF',
  146. },
  147. axisLine: {
  148. show: false,
  149. lineStyle: {
  150. color: '#00D1FF', //刻度线的颜色
  151. },
  152. },
  153. splitLine: {
  154. //x网格样式
  155. show: true,
  156. lineStyle: {
  157. color: '#00D1FF',
  158. type: 'dashed',
  159. },
  160. },
  161. },
  162. {
  163. name: 'm³/s',
  164. type: 'value',
  165. textStyle: {
  166. color: '#00D1FF',
  167. },
  168. splitLine: {
  169. //x网格样式
  170. show: false,
  171. },
  172. axisLine: {
  173. show: false,
  174. lineStyle: {
  175. color: '#00D1FF', //刻度线的颜色
  176. },
  177. },
  178. },
  179. ],
  180. series: [
  181. {
  182. name: 'SS',
  183. type: 'line',
  184. symbol: 'none',
  185. smooth: true,
  186. lineStyle: {
  187. width: 2,
  188. color: '#D9D237',
  189. },
  190. emphasis: {
  191. focus: 'series',
  192. },
  193. // prettier-ignore
  194. data: [ 0.5, 0.1, 0.7, 0.9, 0.1, 0.6, 0.3, 0.7, 0.2, 0.8, 0.6,1.2],
  195. },
  196. {
  197. name: '流量',
  198. type: 'line',
  199. symbol: 'none',
  200. yAxisIndex: 1,
  201. areaStyle: {
  202. color: {
  203. type: 'linear',
  204. x: 0,
  205. y: 0,
  206. x2: 0,
  207. y2: 1,
  208. colorStops: [
  209. {
  210. offset: 0,
  211. color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
  212. },
  213. {
  214. offset: 1,
  215. color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
  216. },
  217. ],
  218. global: false, // 缺省为 false
  219. },
  220. },
  221. lineStyle: {
  222. width: 1,
  223. color: '#01B1DC',
  224. },
  225. emphasis: {
  226. focus: 'series',
  227. },
  228. // prettier-ignore
  229. data: [2, 1.3, 1.4, 2.5, 1.7, 2.0, 1.3, 1.0, 1.6, 0.9, 0.7, 3.4],
  230. },
  231. ],
  232. },
  233. // 排水一张图 监测告警
  234. floodOneMapPipeWarns: {
  235. grid: {
  236. top: '40px',
  237. left: '45px',
  238. right: '47px',
  239. bottom: '40px',
  240. },
  241. animation: true,
  242. // 显示暂无数据
  243. graphic: {
  244. type: 'text', // 类型:文本
  245. left: 'center',
  246. top: 'middle',
  247. silent: true, // 不响应事件
  248. invisible: false, // 有数据就隐藏
  249. style: {
  250. fill: '#c6c6c6',
  251. fontWeight: 'bold',
  252. text: '暂无数据',
  253. fontFamily: 'Microsoft YaHei',
  254. fontSize: '18px',
  255. },
  256. },
  257. tooltip: {
  258. trigger: 'axis',
  259. axisPointer: {
  260. type: 'cross',
  261. animation: false,
  262. label: {
  263. backgroundColor: '#505765',
  264. },
  265. },
  266. },
  267. legend: {
  268. data: ['SS', '流量'],
  269. textStyle: {
  270. color: '#00D1FF',
  271. fontsize: 14,
  272. },
  273. },
  274. xAxis: [
  275. {
  276. type: 'category',
  277. boundaryGap: false,
  278. axisLabel: {
  279. color: '#00D1FF',
  280. },
  281. axisLine: {
  282. show: true,
  283. lineStyle: {
  284. color: '#00D1FF', //刻度线的颜色
  285. },
  286. },
  287.  
  288. // prettier-ignore
  289. data: [
  290. ' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '0:00', ' 1:00'
  291. ],
  292. },
  293. ],
  294. yAxis: [
  295. {
  296. name: 'SS(mg/l)',
  297. type: 'value',
  298. textStyle: {
  299. color: '#00D1FF',
  300. },
  301. axisLine: {
  302. show: false,
  303. lineStyle: {
  304. color: '#00D1FF', //刻度线的颜色
  305. },
  306. },
  307. splitLine: {
  308. //x网格样式
  309. show: true,
  310. lineStyle: {
  311. color: '#00D1FF',
  312. type: 'dashed',
  313. },
  314. },
  315. },
  316. {
  317. name: 'm³/s',
  318. type: 'value',
  319. textStyle: {
  320. color: '#00D1FF',
  321. },
  322. splitLine: {
  323. //x网格样式
  324. show: false,
  325. },
  326. axisLine: {
  327. show: false,
  328. lineStyle: {
  329. color: '#00D1FF', //刻度线的颜色
  330. },
  331. },
  332. },
  333. ],
  334. series: [
  335. {
  336. name: 'SS',
  337. type: 'line',
  338. symbol: 'none',
  339. smooth: true,
  340. lineStyle: {
  341. width: 2,
  342. color: '#D9D237',
  343. },
  344. emphasis: {
  345. focus: 'series',
  346. },
  347. // prettier-ignore
  348. data: [
  349. 5.5, 5.1, 5.7, 5.9, 6.1, 6.6, 6.3, 6.7, 6.2, 5.8, 5.6, 5.4, 5.2, 5.0, 4.8, 5.3, 5.1, 5.5, 5.2, 5.3, 5.6, 5.8, 6.3, 6.5
  350. ],
  351. },
  352. {
  353. name: '流量',
  354. type: 'line',
  355. symbol: 'none',
  356. yAxisIndex: 1,
  357. areaStyle: {
  358. color: {
  359. type: 'linear',
  360. x: 0,
  361. y: 0,
  362. x2: 0,
  363. y2: 1,
  364. colorStops: [
  365. {
  366. offset: 0,
  367. color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
  368. },
  369. {
  370. offset: 1,
  371. color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
  372. },
  373. ],
  374. global: false, // 缺省为 false
  375. },
  376. },
  377. lineStyle: {
  378. width: 1,
  379. color: '#01B1DC',
  380. },
  381. emphasis: {
  382. focus: 'series',
  383. },
  384. // prettier-ignore
  385. data: [10, 13, 13.4, 15, 17, 20, 33, 40, 45, 50, 43.7, 42, 38, 36, 35, 38, 41, 41, 43, 38, 28, 20, 15, 13],
  386. },
  387. ],
  388. },
  389. //管网监测水位
  390. floodOneMapPipewater: {
  391. grid: {
  392. top: '40px',
  393. left: '45px',
  394. right: '47px',
  395. bottom: '40px',
  396. },
  397. animation: true,
  398. // 显示暂无数据
  399. graphic: {
  400. type: 'text', // 类型:文本
  401. left: 'center',
  402. top: 'middle',
  403. silent: true, // 不响应事件
  404. invisible: false, // 有数据就隐藏
  405. style: {
  406. fill: '#c6c6c6',
  407. fontWeight: 'bold',
  408. text: '暂无数据',
  409. fontFamily: 'Microsoft YaHei',
  410. fontSize: '18px',
  411. },
  412. },
  413. tooltip: {
  414. trigger: 'axis',
  415. axisPointer: {
  416. type: 'cross',
  417. animation: false,
  418. label: {
  419. backgroundColor: '#505765',
  420. },
  421. },
  422. },
  423. legend: {
  424. data: ['SS', '流量'],
  425. textStyle: {
  426. color: '#00D1FF',
  427. fontsize: 14,
  428. },
  429. },
  430. xAxis: [
  431. {
  432. type: 'category',
  433. boundaryGap: false,
  434. axisLabel: {
  435. color: '#00D1FF',
  436. },
  437. axisLine: {
  438. show: true,
  439. lineStyle: {
  440. color: '#00D1FF', //刻度线的颜色
  441. },
  442. },
  443.  
  444. // prettier-ignore
  445. data: [
  446. ' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '0:00', ' 1:00'
  447. ],
  448. },
  449. ],
  450. yAxis: [
  451. {
  452. name: 'SS(mg/l)',
  453. type: 'value',
  454. textStyle: {
  455. color: '#00D1FF',
  456. },
  457. axisLine: {
  458. show: false,
  459. lineStyle: {
  460. color: '#00D1FF', //刻度线的颜色
  461. },
  462. },
  463. splitLine: {
  464. //x网格样式
  465. show: true,
  466. lineStyle: {
  467. color: '#00D1FF',
  468. type: 'dashed',
  469. },
  470. },
  471. },
  472. {
  473. name: 'm³/s',
  474. type: 'value',
  475. textStyle: {
  476. color: '#00D1FF',
  477. },
  478. splitLine: {
  479. //x网格样式
  480. show: false,
  481. },
  482. axisLine: {
  483. show: false,
  484. lineStyle: {
  485. color: '#00D1FF', //刻度线的颜色
  486. },
  487. },
  488. },
  489. ],
  490. series: [
  491. {
  492. name: 'SS',
  493. type: 'line',
  494. symbol: 'none',
  495. smooth: true,
  496. lineStyle: {
  497. width: 2,
  498. color: '#D9D237',
  499. },
  500. emphasis: {
  501. focus: 'series',
  502. },
  503. // prettier-ignore
  504. data: [
  505. 5.5, 5.1, 5.7, 5.9, 6.1, 6.6, 6.3, 6.7, 6.2, 5.8, 5.6, 5.4, 5.2, 5.0, 4.8, 5.3, 5.1, 5.5, 5.2, 5.3, 5.6, 5.8, 6.3, 6.5
  506. ],
  507. },
  508. {
  509. name: '流量',
  510. type: 'line',
  511. symbol: 'none',
  512. yAxisIndex: 1,
  513. areaStyle: {
  514. color: {
  515. type: 'linear',
  516. x: 0,
  517. y: 0,
  518. x2: 0,
  519. y2: 1,
  520. colorStops: [
  521. {
  522. offset: 0,
  523. color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
  524. },
  525. {
  526. offset: 1,
  527. color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
  528. },
  529. ],
  530. global: false, // 缺省为 false
  531. },
  532. },
  533. lineStyle: {
  534. width: 1,
  535. color: '#01B1DC',
  536. },
  537. emphasis: {
  538. focus: 'series',
  539. },
  540. // prettier-ignore
  541. data: [10, 13, 13.4, 15, 17, 20, 33, 40, 45, 50, 43.7, 42, 38, 36, 35, 38, 41, 41, 43, 38, 28, 20, 15, 13],
  542. },
  543. ],
  544. },
  545. //排水一张图 物联感知管网监测统计分析
  546. floodOneMapPipeStatic: {
  547. grid: {
  548. top: '40px',
  549. left: '40px',
  550. right: '40px',
  551. bottom: '40px',
  552. },
  553. tooltip: {
  554. trigger: 'axis',
  555. axisPointer: {
  556. type: 'cross',
  557. animation: false,
  558. label: {
  559. backgroundColor: '#505765',
  560. },
  561. },
  562. },
  563. legend: {
  564. data: ['白天', '夜间'],
  565. textStyle: {
  566. color: '#00D1FF',
  567. fontsize: 14,
  568. },
  569. },
  570. xAxis: [
  571. {
  572. type: 'category',
  573. boundaryGap: false,
  574. axisLabel: {
  575. formatter: '{value} ',
  576. textStyle: {
  577. color: '#00D1FF',
  578. },
  579. },
  580. axisLine: {
  581. show: true,
  582. lineStyle: {
  583. color: '#00D1FF', //刻度线的颜色
  584. },
  585. },
  586. },
  587. ],
  588. yAxis: [
  589. {
  590. name: 'SS(mg/l)',
  591. type: 'value',
  592. textStyle: {
  593. color: '#00D1FF',
  594. },
  595. formatter: '{value} ',
  596. axisLine: {
  597. show: true,
  598.  
  599. lineStyle: {
  600. color: '#00D1FF', //刻度线的颜色
  601. },
  602. },
  603. splitLine: {
  604. //x网格样式
  605. show: true,
  606. lineStyle: {
  607. color: '#00D1FF',
  608. type: 'dashed',
  609. },
  610. },
  611. },
  612. ],
  613. series: [
  614. {
  615. name: '白天',
  616. symbolSize: 5,
  617. data: [
  618. ['6:00', 5.5],
  619. ['7:00', 5.1],
  620. ['8:00', 5.1],
  621. ['9:00', 5.7],
  622. ['10:00', 5.9],
  623. ['11:00', 6.1],
  624. ['12:00', 6.6],
  625. ['13:00', 6.3],
  626. ['14:00', 6.7],
  627. ['15:00', 6.2],
  628. ['16:00', 5.8],
  629. ['17:00', 5.6],
  630. ],
  631. type: 'scatter',
  632. },
  633. {
  634. name: '夜间',
  635. symbolSize: 5,
  636. data: [
  637. ['18:00', 5.4],
  638. ['19:00', 5.2],
  639. ['20:00', 5.0],
  640. ['21:00', 5.5],
  641. ['22:00', 5.3],
  642. ['23:00', 5.1],
  643. ['24:00', 5.2],
  644. ['1:00', 5.3],
  645. ['2:00', 5.6],
  646. ['3:00', 5.3],
  647. ['4:00', 5.2],
  648. ['5:00', 6.5],
  649. ],
  650. type: 'scatter',
  651. },
  652. ],
  653. },
  654. //排水一张图 物联感知积水点历史趋势
  655. floodOneMapJSDTrend: {
  656. grid: {
  657. top: '40px',
  658. left: '40px',
  659. right: '40px',
  660. bottom: '40px',
  661. },
  662. tooltip: {
  663. trigger: 'axis',
  664. axisPointer: {
  665. type: 'cross',
  666. animation: false,
  667. label: {
  668. backgroundColor: '#505765',
  669. },
  670. },
  671. },
  672. legend: {
  673. data: ['积水深度'],
  674. textStyle: {
  675. color: '#00D1FF',
  676. fontsize: 14,
  677. },
  678. },
  679. xAxis: {
  680. type: 'category',
  681. boundaryGap: false,
  682. axisLabel: {
  683. textStyle: {
  684. color: '#00D1FF',
  685. },
  686. },
  687. axisLine: {
  688. show: true,
  689. lineStyle: {
  690. color: '#00D1FF', //刻度线的颜色
  691. },
  692. },
  693. // prettier-ignore
  694. data: [
  695. ' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '2009/6/13 0:00', ' 1:00'
  696. ],
  697. },
  698. yAxis: {
  699. name: '单位:mm',
  700. type: 'value',
  701. textStyle: {
  702. color: '#00D1FF',
  703. },
  704. axisLine: {
  705. show: false,
  706. lineStyle: {
  707. color: '#00D1FF', //刻度线的颜色
  708. },
  709. },
  710. splitLine: {
  711. //x网格样式
  712. show: true,
  713. lineStyle: {
  714. color: '#00D1FF',
  715. type: 'dashed',
  716. },
  717. },
  718. },
  719. series: [
  720. {
  721. name: '积水深度',
  722. type: 'line',
  723. symbol: 'none',
  724. areaStyle: {
  725. color: {
  726. type: 'linear',
  727. x: 0,
  728. y: 0,
  729. x2: 0,
  730. y2: 1,
  731. colorStops: [
  732. {
  733. offset: 0,
  734. color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
  735. },
  736. {
  737. offset: 1,
  738. color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
  739. },
  740. ],
  741. global: false, // 缺省为 false
  742. },
  743. },
  744. lineStyle: {
  745. width: 1,
  746. color: '#01B1DC',
  747. },
  748. emphasis: {
  749. focus: 'series',
  750. },
  751. // prettier-ignore
  752. data: [0, 1, 1.5, 2.4, 2.6, 3, 3.1, 3.5, 4, 4.5, 4.2, 3.8, 3.4, 3.8, 3.6, 3.5, 3.0, 2.9, 2.6, 2.5, 2.3, 1.5, 1.1, 0],
  753. },
  754. ],
  755. },
  756. //排水一张图 厂站监测历史数据
  757. floodOneMapDataByPumpCode: {
  758. grid: {
  759. top: '40px',
  760. left: '40px',
  761. right: '40px',
  762. bottom: '40px',
  763. },
  764. // 显示暂无数据
  765. graphic: {
  766. type: 'text', // 类型:文本
  767. left: 'center',
  768. top: 'middle',
  769. silent: true, // 不响应事件
  770. invisible: false, // 有数据就隐藏
  771. style: {
  772. fill: '#c6c6c6',
  773. fontWeight: 'bold',
  774. text: '暂无数据',
  775. fontFamily: 'Microsoft YaHei',
  776. fontSize: '18px',
  777. },
  778. },
  779. tooltip: {
  780. trigger: 'axis',
  781. axisPointer: {
  782. type: 'cross',
  783. animation: false,
  784. label: {
  785. backgroundColor: '#505765',
  786. },
  787. },
  788. },
  789. legend: {
  790. data: [],
  791. textStyle: {
  792. color: '#00D1FF',
  793. fontsize: 14,
  794. },
  795. },
  796. xAxis: {
  797. type: 'category',
  798. boundaryGap: false,
  799. axisLabel: {
  800. textStyle: {
  801. color: '#00D1FF',
  802. },
  803. },
  804. axisLine: {
  805. show: true,
  806. lineStyle: {
  807. color: '#00D1FF', //刻度线的颜色
  808. },
  809. },
  810. // prettier-ignore
  811. data: [],
  812. },
  813. yAxis: {
  814. name: '',
  815. type: 'value',
  816. textStyle: {
  817. color: '#00D1FF',
  818. },
  819. axisLine: {
  820. show: false,
  821. lineStyle: {
  822. color: '#00D1FF', //刻度线的颜色
  823. },
  824. },
  825. splitLine: {
  826. //x网格样式
  827. show: true,
  828. lineStyle: {
  829. color: '#00D1FF',
  830. type: 'dashed',
  831. },
  832. },
  833. },
  834. series: {
  835. name: '',
  836. type: 'line',
  837. symbol: 'none',
  838.  
  839. lineStyle: {
  840. width: 1,
  841. color: '#eee73c',
  842. },
  843. emphasis: {
  844. focus: 'series',
  845. },
  846. // prettier-ignore
  847. data: [],
  848. },
  849. },
  850. //排水一张图 风险研判降雨预报
  851. floodOneMapFXrain: {
  852. color: pinias.$state.chartColor,
  853. // 显示暂无数据
  854. graphic: {
  855. type: 'text', // 类型:文本
  856. left: 'center',
  857. top: 'middle',
  858. silent: true, // 不响应事件
  859. invisible: false, // 有数据就隐藏
  860. style: {
  861. fill: '#c6c6c6',
  862. fontWeight: 'bold',
  863. text: '暂无数据',
  864. fontFamily: 'Microsoft YaHei',
  865. fontSize: '18px',
  866. },
  867. },
  868. grid: {
  869. top: '40px',
  870. left: '10%',
  871. right: '40px',
  872. bottom: '30%',
  873. },
  874. tooltip: {
  875. trigger: 'axis',
  876. axisPointer: {
  877. type: 'cross',
  878. animation: false,
  879. label: {
  880. backgroundColor: '#505765',
  881. },
  882. },
  883. },
  884. legend: {
  885. data: ['实测雨量', '预报雨量'],
  886. textStyle: {
  887. color: '#00D1FF',
  888. fontsize: 14,
  889. },
  890. },
  891. xAxis: [
  892. {
  893. type: 'category',
  894. boundaryGap: true,
  895. axisLabel: {
  896. formatter: '{value} ',
  897. color: '#00D1FF',
  898. rotate: 45,
  899. },
  900. axisLine: {
  901. show: true,
  902. lineStyle: {
  903. color: '#00D1FF', //刻度线的颜色
  904. },
  905. },
  906. data: ['14:00', '14:10', '14:20', '14:30', '14:40', '14:50', '15:00', '15:10', '15:20', '15:30', '15:40', '15:50', '16:00'],
  907. },
  908. ],
  909. yAxis: [
  910. {
  911. name: 'mm',
  912. type: 'value',
  913. textStyle: {
  914. color: '#00D1FF',
  915. },
  916. splitNumber: 3,
  917. formatter: '{value} ',
  918. axisLine: {
  919. show: true,
  920. lineStyle: {
  921. color: '#00D1FF', //刻度线的颜色
  922. },
  923. },
  924. splitLine: {
  925. //x网格样式
  926. show: true,
  927. lineStyle: {
  928. color: '#00D1FF',
  929. type: 'dashed',
  930. },
  931. },
  932. },
  933. ],
  934. series: [
  935. {
  936. name: '实测雨量',
  937. symbolSize: 5,
  938. data: [5.5, 5.1, 5.1, 5.7],
  939. type: 'bar',
  940. barWidth: 10,
  941. itemStyle: {
  942. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  943. { offset: 0, color: 'rgba(1, 183, 226,1)' },
  944. { offset: 0.5, color: 'rgba(1, 183, 226,0.5)' },
  945. { offset: 1, color: 'rgba(1, 183, 226,0.2)' },
  946. ]),
  947. },
  948. },
  949. {
  950. name: '预报雨量',
  951. data: [, , , , 5.4, 5.2, 5.0, 5.5, 5.3, 5.1, 5.2, 5.3],
  952. type: 'bar',
  953. barWidth: 10,
  954. itemStyle: {
  955. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  956. { offset: 0, color: 'rgba(1, 220, 154,1)' },
  957. { offset: 0.5, color: 'rgba(1, 220, 154,0.5)' },
  958. { offset: 1, color: 'rgba(1, 220, 154,0.2)' },
  959. ]),
  960. },
  961. },
  962. ],
  963. },
  964. //排水一张图 入河排口统计
  965. floodOneMapPSPK: {
  966. color: pinias.$state.chartColor,
  967. // 显示暂无数据
  968. graphic: {
  969. type: 'text', // 类型:文本
  970. left: 'center',
  971. top: 'middle',
  972. silent: true, // 不响应事件
  973. invisible: false, // 有数据就隐藏
  974. style: {
  975. fill: '#c6c6c6',
  976. fontWeight: 'bold',
  977. text: '暂无数据',
  978. fontFamily: 'Microsoft YaHei',
  979. fontSize: '18px',
  980. },
  981. },
  982. grid: {
  983. top: '15%',
  984. left: '8%',
  985. right: '5%',
  986. bottom: '10%',
  987. },
  988. tooltip: {
  989. trigger: 'axis',
  990. axisPointer: {
  991. type: 'cross',
  992. animation: false,
  993. label: {
  994. backgroundColor: '#505765',
  995. },
  996. },
  997. },
  998. legend: {
  999. data: ['雨水排口', '合流制溢流排口'],
  1000. textStyle: {
  1001. color: '#00D1FF',
  1002. fontsize: 14,
  1003. },
  1004. },
  1005. xAxis: [
  1006. {
  1007. type: 'category',
  1008. //boundaryGap: false,
  1009. axisLabel: {
  1010. formatter: '{value} ',
  1011. color: '#00D1FF',
  1012. },
  1013. axisLine: {
  1014. show: true,
  1015. lineStyle: {
  1016. color: '#00D1FF', //刻度线的颜色
  1017. },
  1018. },
  1019. data: [],
  1020. },
  1021. ],
  1022. yAxis: [
  1023. {
  1024. name: '个',
  1025. type: 'value',
  1026. textStyle: {
  1027. color: '#00D1FF',
  1028. },
  1029. minInterval: 1,
  1030. formatter: '{value} ',
  1031. axisLine: {
  1032. show: true,
  1033. lineStyle: {
  1034. color: '#00D1FF', //刻度线的颜色
  1035. },
  1036. },
  1037. splitLine: {
  1038. //x网格样式
  1039. show: true,
  1040. lineStyle: {
  1041. color: '#00D1FF',
  1042. type: 'dashed',
  1043. },
  1044. },
  1045. },
  1046. ],
  1047. series: [
  1048. {
  1049. name: '雨水排口',
  1050. data: [],
  1051. type: 'bar',
  1052. barWidth: 20,
  1053. },
  1054. {
  1055. name: '合流制溢流排口',
  1056. data: [],
  1057. type: 'bar',
  1058. barWidth: 20,
  1059. },
  1060. ],
  1061. },
  1062. //弹窗 趋势分析折线图
  1063. popupTrend: {
  1064. grid: {
  1065. top: '40px',
  1066. left: '40px',
  1067. right: '40px',
  1068. bottom: '40px',
  1069. },
  1070. tooltip: {
  1071. trigger: 'axis',
  1072. axisPointer: {
  1073. type: 'cross',
  1074. animation: false,
  1075. label: {
  1076. backgroundColor: '#505765',
  1077. },
  1078. },
  1079. },
  1080. legend: {
  1081. data: ['前池液位', '1#液位'],
  1082. textStyle: {
  1083. color: '#00D1FF',
  1084. fontsize: 14,
  1085. },
  1086. },
  1087. xAxis: {
  1088. type: 'category',
  1089. boundaryGap: false,
  1090. axisLabel: {
  1091. textStyle: {
  1092. color: '#00D1FF',
  1093. },
  1094. },
  1095. axisLine: {
  1096. show: true,
  1097. lineStyle: {
  1098. color: '#00D1FF', //刻度线的颜色
  1099. },
  1100. },
  1101. // prettier-ignore
  1102. data: [
  1103. ' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '2009/6/13 0:00', ' 1:00'
  1104. ],
  1105. },
  1106. yAxis: {
  1107. name: '单位:m',
  1108. type: 'value',
  1109. textStyle: {
  1110. color: '#00D1FF',
  1111. },
  1112. axisLine: {
  1113. show: false,
  1114. lineStyle: {
  1115. color: '#00D1FF', //刻度线的颜色
  1116. },
  1117. },
  1118. splitLine: {
  1119. //x网格样式
  1120. show: true,
  1121. lineStyle: {
  1122. color: '#00D1FF',
  1123. type: 'dashed',
  1124. },
  1125. },
  1126. },
  1127. series: [
  1128. {
  1129. name: '前池液位',
  1130. type: 'line',
  1131. symbol: 'none',
  1132.  
  1133. lineStyle: {
  1134. width: 1,
  1135. color: '#01B1DC',
  1136. },
  1137. emphasis: {
  1138. focus: 'series',
  1139. },
  1140. // prettier-ignore
  1141. data: [
  1142. 3.5, 3, 4.5, 5, 5.1, 5.3, 5.1, 5.5, 5.4, 5.5, 5.2, 5.8, 5.4, 5.8, 5.6, 5.5, 4, 3.9, 3.6, 3.5, 3.3, 3.5, 3.1, 3
  1143. ],
  1144. },
  1145. {
  1146. name: '1#液位',
  1147. type: 'line',
  1148. symbol: 'none',
  1149.  
  1150. lineStyle: {
  1151. width: 1,
  1152. color: '#D9D237',
  1153. },
  1154. emphasis: {
  1155. focus: 'series',
  1156. },
  1157. // prettier-ignore
  1158. data: [
  1159. 2.5, 2, 3.5, 4, 4.1, 4.3, 4.1, 4.5, 4.4, 4.4, 4.2, 4.8, 4.4, 4.8, 4.6, 4.5, 3, 2.9, 2.6, 2.5, 2.3, 2.5, 2.1, 2
  1160. ],
  1161. },
  1162. ],
  1163. },
  1164. //降雨量
  1165. popupRainTrend: {
  1166. color: pinias.$state.chartColor,
  1167. grid: {
  1168. top: '40px',
  1169. left: '40px',
  1170. right: '40px',
  1171. bottom: '40px',
  1172. },
  1173. graphic: {
  1174. type: 'text', // 类型:文本
  1175. left: 'center',
  1176. top: 'middle',
  1177. silent: true, // 不响应事件
  1178. invisible: false, // 有数据就隐藏
  1179. style: {
  1180. fill: '#c6c6c6',
  1181. fontWeight: 'bold',
  1182. text: '暂无数据',
  1183. fontFamily: 'Microsoft YaHei',
  1184. fontSize: '18px',
  1185. },
  1186. },
  1187. tooltip: {
  1188. trigger: 'axis',
  1189. axisPointer: {
  1190. type: 'cross',
  1191. animation: false,
  1192. label: {
  1193. backgroundColor: '#505765',
  1194. },
  1195. },
  1196. },
  1197. legend: {
  1198. data: [],
  1199. textStyle: {
  1200. color: '#00D1FF',
  1201. fontsize: 14,
  1202. },
  1203. },
  1204. xAxis: {
  1205. type: 'category',
  1206. boundaryGap: false,
  1207. axisLabel: {
  1208. textStyle: {
  1209. color: '#00D1FF',
  1210. },
  1211. },
  1212. axisLine: {
  1213. show: true,
  1214. lineStyle: {
  1215. color: '#00D1FF', //刻度线的颜色
  1216. },
  1217. },
  1218. // prettier-ignore
  1219. data: [],
  1220. },
  1221. yAxis: {
  1222. name: '',
  1223. type: 'value',
  1224. textStyle: {
  1225. color: '#00D1FF',
  1226. },
  1227. axisLine: {
  1228. show: true,
  1229. lineStyle: {
  1230. color: '#00D1FF', //刻度线的颜色
  1231. },
  1232. },
  1233. splitLine: {
  1234. //x网格样式
  1235. show: true,
  1236. lineStyle: {
  1237. color: '#00D1FF',
  1238. type: 'dashed',
  1239. },
  1240. },
  1241. },
  1242. series: {
  1243. name: '',
  1244. type: 'bar',
  1245. data: [],
  1246. },
  1247. },
  1248. //弹窗 渍水点折线图
  1249. popupTrendZS: {
  1250. grid: {
  1251. top: '40px',
  1252. left: '40px',
  1253. right: '40px',
  1254. bottom: '25%',
  1255. },
  1256. // 显示暂无数据
  1257. graphic: {
  1258. type: 'text', // 类型:文本
  1259. left: 'center',
  1260. top: 'middle',
  1261. silent: true, // 不响应事件
  1262. invisible: false, // 有数据就隐藏
  1263. style: {
  1264. fill: '#c6c6c6',
  1265. fontWeight: 'bold',
  1266. text: '暂无数据',
  1267. fontFamily: 'Microsoft YaHei',
  1268. fontSize: '18px',
  1269. },
  1270. },
  1271. tooltip: {
  1272. trigger: 'axis',
  1273. axisPointer: {
  1274. type: 'cross',
  1275. animation: false,
  1276. label: {
  1277. backgroundColor: '#505765',
  1278. },
  1279. },
  1280. },
  1281. legend: {
  1282. data: ['水位'],
  1283. textStyle: {
  1284. color: '#00D1FF',
  1285. fontsize: 14,
  1286. },
  1287. },
  1288. xAxis: {
  1289. type: 'category',
  1290. boundaryGap: false,
  1291. axisLabel: {
  1292. color: '#00D1FF',
  1293. // rotate: 30,
  1294. },
  1295. axisLine: {
  1296. show: true,
  1297. lineStyle: {
  1298. color: '#00D1FF', //刻度线的颜色
  1299. },
  1300. },
  1301. // prettier-ignore
  1302. data: [
  1303. ' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '2009/6/13 0:00', ' 1:00'
  1304. ],
  1305. },
  1306. yAxis: {
  1307. name: '单位:m',
  1308. type: 'value',
  1309. textStyle: {
  1310. color: '#00D1FF',
  1311. },
  1312. axisLine: {
  1313. show: false,
  1314. lineStyle: {
  1315. color: '#00D1FF', //刻度线的颜色
  1316. },
  1317. },
  1318. splitLine: {
  1319. //x网格样式
  1320. show: true,
  1321. lineStyle: {
  1322. color: '#00D1FF',
  1323. type: 'dashed',
  1324. },
  1325. },
  1326. },
  1327. series: [
  1328. {
  1329. name: '水位',
  1330. type: 'line',
  1331. symbol: 'none',
  1332.  
  1333. lineStyle: {
  1334. width: 1,
  1335. color: '#01B1DC',
  1336. },
  1337. emphasis: {
  1338. focus: 'series',
  1339. },
  1340. // prettier-ignore
  1341. data: [
  1342. 0.1, 0.13, 0.134, 0.15, 0.17, 0.2, 0.33, 0.4, 0.45, 0.5, 0.437, 0.42, 0.38, 0.36, 0.35, 0.38, 0.41, 0.41, 0.43, 0.38, 0.28, 0.2, 0.15, 0.13
  1343. ],
  1344. },
  1345. ],
  1346. },
  1347. //河道监测
  1348. popupTrendRiver: {
  1349. grid: {
  1350. top: '40px',
  1351. left: '40px',
  1352. right: '40px',
  1353. bottom: '40px',
  1354. },
  1355. // 显示暂无数据
  1356. graphic: {
  1357. type: 'text', // 类型:文本
  1358. left: 'center',
  1359. top: 'middle',
  1360. silent: true, // 不响应事件
  1361. invisible: false, // 有数据就隐藏
  1362. style: {
  1363. fill: '#c6c6c6',
  1364. fontWeight: 'bold',
  1365. text: '暂无数据',
  1366. fontFamily: 'Microsoft YaHei',
  1367. fontSize: '18px',
  1368. },
  1369. },
  1370. tooltip: {
  1371. trigger: 'axis',
  1372. axisPointer: {
  1373. type: 'cross',
  1374. animation: false,
  1375. label: {
  1376. backgroundColor: '#505765',
  1377. },
  1378. },
  1379. },
  1380. legend: {
  1381. data: ['水位'],
  1382. textStyle: {
  1383. color: '#00D1FF',
  1384. fontsize: 14,
  1385. },
  1386. },
  1387. xAxis: {
  1388. type: 'category',
  1389. boundaryGap: false,
  1390. axisLabel: {
  1391. textStyle: {
  1392. color: '#00D1FF',
  1393. },
  1394. },
  1395. axisLine: {
  1396. show: true,
  1397. lineStyle: {
  1398. color: '#00D1FF', //刻度线的颜色
  1399. },
  1400. },
  1401. // prettier-ignore
  1402. data: [],
  1403. },
  1404. yAxis: {
  1405. name: 'm',
  1406. type: 'value',
  1407. textStyle: {
  1408. color: '#00D1FF',
  1409. },
  1410. axisLine: {
  1411. show: false,
  1412. lineStyle: {
  1413. color: '#00D1FF', //刻度线的颜色
  1414. },
  1415. },
  1416. splitLine: {
  1417. //x网格样式
  1418. show: true,
  1419. lineStyle: {
  1420. color: '#00D1FF',
  1421. type: 'dashed',
  1422. },
  1423. },
  1424. },
  1425. series: {
  1426. name: '水位',
  1427. type: 'line',
  1428. symbol: 'none',
  1429. lineStyle: {
  1430. width: 2,
  1431. color: '#D9D237',
  1432. },
  1433. emphasis: {
  1434. focus: 'series',
  1435. },
  1436. // prettier-ignore
  1437. data: [],
  1438. },
  1439. },
  1440. // 排水一张图 风险研判沿程水位
  1441. floodOneMapWaterLevel: {
  1442. grid: {
  1443. top: '40px',
  1444. left: '40px',
  1445. right: '70px',
  1446. bottom: '40px',
  1447. },
  1448. tooltip: {
  1449. trigger: 'axis',
  1450. axisPointer: {
  1451. type: 'cross',
  1452. animation: false,
  1453. label: {
  1454. backgroundColor: '#505765',
  1455. },
  1456. },
  1457. },
  1458. legend: {
  1459. data: ['警戒水位', '当前水位', '河底高程', '左岸', '右岸'],
  1460. textStyle: {
  1461. color: '#00D1FF',
  1462. fontsize: 14,
  1463. },
  1464. },
  1465. xAxis: [
  1466. {
  1467. name: '单位:m',
  1468. type: 'category',
  1469. boundaryGap: false,
  1470. axisLabel: {
  1471. textStyle: {
  1472. color: '#00D1FF',
  1473. },
  1474. },
  1475. axisLine: {
  1476. show: true,
  1477. lineStyle: {
  1478. color: '#00D1FF', //刻度线的颜色
  1479. },
  1480. },
  1481.  
  1482. // prettier-ignore
  1483. data: [
  1484. 0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700
  1485. ],
  1486. },
  1487. ],
  1488. yAxis: [
  1489. {
  1490. name: '单位:m',
  1491. type: 'value',
  1492. scale: true,
  1493. textStyle: {
  1494. color: '#00D1FF',
  1495. },
  1496. axisLine: {
  1497. show: false,
  1498. lineStyle: {
  1499. color: '#00D1FF', //刻度线的颜色
  1500. },
  1501. },
  1502. splitLine: {
  1503. //x网格样式
  1504. show: true,
  1505. lineStyle: {
  1506. color: '#00D1FF',
  1507. type: 'dashed',
  1508. },
  1509. },
  1510. },
  1511. ],
  1512. series: [
  1513. {
  1514. name: '左岸',
  1515. type: 'line',
  1516. symbol: 'none',
  1517. smooth: true,
  1518. lineStyle: {
  1519. width: 2,
  1520. color: '#b9a5ff',
  1521. },
  1522. emphasis: {
  1523. focus: 'series',
  1524. },
  1525. // prettier-ignore
  1526. data: [
  1527. 18.2, 18.5, 18.7, 18.9, 19.1, 19.2, 19.3, 19.4, 19.5, 19.6, 19.7, 19.9, 20, 20.1, 20.1, 20.2, 20, 20, 19.8, 19.6, 19.5, 19.3, 19.2, 19.1, 18.9, 18.7, 18.5, 18.3, 18.2
  1528. ],
  1529. },
  1530. {
  1531. name: '右岸',
  1532. type: 'line',
  1533. symbol: 'none',
  1534. smooth: true,
  1535. lineStyle: {
  1536. width: 2,
  1537. color: '#90ffc4',
  1538. },
  1539. emphasis: {
  1540. focus: 'series',
  1541. },
  1542. // prettier-ignore
  1543. data: [
  1544. 18.3, 18.6, 18.7, 18.8, 18.9, 19.1, 19.2, 19.5, 19.4, 19.4, 19.5, 19.7, 19.9, 20, 20.1, 20.1, 19.9, 19.9, 19.8, 19.6, 19.5, 19.3, 19.2, 19.1, 18.9, 18.8, 18.6, 18.6, 18.3
  1545. ],
  1546. },
  1547. {
  1548. name: '当前水位',
  1549. type: 'line',
  1550. symbol: 'none',
  1551. areaStyle: {
  1552. color: {
  1553. type: 'linear',
  1554. x: 0,
  1555. y: 0,
  1556. x2: 0,
  1557. y2: 1,
  1558. colorStops: [
  1559. {
  1560. offset: 0,
  1561. color: 'rgba(21, 182, 228, 1)', // 0% 处的颜色
  1562. },
  1563. {
  1564. offset: 1,
  1565. color: 'rgba(21, 182, 228, 0.1)', // 100% 处的颜色
  1566. },
  1567. ],
  1568. global: false, // 缺省为 false
  1569. },
  1570. },
  1571. lineStyle: {
  1572. width: 1,
  1573. color: '#9ccdf7',
  1574. },
  1575. emphasis: {
  1576. focus: 'series',
  1577. },
  1578. // prettier-ignore
  1579. data: [
  1580. 16, 16, 16, 16, 16, 16, 16, 16.1, 16.1, 16.1, 16.1, 16.1, 16.1, 16.1, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16
  1581. ],
  1582. },
  1583. {
  1584. name: '警戒水位',
  1585. type: 'line',
  1586. symbol: 'none',
  1587. smooth: true,
  1588. itemStyle: {
  1589. normal: {
  1590. lineStyle: {
  1591. width: 2,
  1592. color: '#ee6666',
  1593. type: 'dashed',
  1594. },
  1595. },
  1596. },
  1597. emphasis: {
  1598. focus: 'series',
  1599. },
  1600. // prettier-ignore
  1601. data: [
  1602. 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
  1603. ],
  1604. },
  1605. {
  1606. name: '河底高程',
  1607. type: 'line',
  1608. symbol: 'none',
  1609. areaStyle: {
  1610. color: {
  1611. type: 'linear',
  1612. x: 0,
  1613. y: 0,
  1614. x2: 0,
  1615. y2: 1,
  1616. colorStops: [
  1617. {
  1618. offset: 0,
  1619. color: 'rgba(215, 207, 143, 1)', // 0% 处的颜色
  1620. },
  1621. {
  1622. offset: 1,
  1623. color: 'rgba(215, 207, 143, 0.1)', // 100% 处的颜色
  1624. },
  1625. ],
  1626. global: false, // 缺省为 false
  1627. },
  1628. },
  1629. lineStyle: {
  1630. width: 1,
  1631. color: '#d7cf8f',
  1632. },
  1633. emphasis: {
  1634. focus: 'series',
  1635. },
  1636. // prettier-ignore
  1637. data: [
  1638. 15.6, 15.5, 14.7, 14.5, 14.1, 13.5, 13.3, 12.9, 12.5, 12.6, 12.7, 12.6, 12.6, 12.8, 13, 13.1, 13.3, 13.4, 13.6, 13.9, 14.2, 14.5, 14.5, 14.7, 14.8, 15, 15.1, 15.3, 15.5, 15.6],
  1639. },
  1640. ],
  1641. },
  1642. // 排水一张图 态势研判 河湖风险研判
  1643. floodOneMapFXYP: {
  1644. grid: {
  1645. top: '40px',
  1646. left: '40px',
  1647. right: '5%',
  1648. bottom: '10%',
  1649. },
  1650. // 显示暂无数据
  1651. graphic: {
  1652. type: 'text', // 类型:文本
  1653. left: 'center',
  1654. top: 'middle',
  1655. silent: true, // 不响应事件
  1656. invisible: false, // 有数据就隐藏
  1657. style: {
  1658. fill: '#c6c6c6',
  1659. fontWeight: 'bold',
  1660. text: '暂无数据',
  1661. fontFamily: 'Microsoft YaHei',
  1662. fontSize: '18px',
  1663. },
  1664. },
  1665. tooltip: {
  1666. trigger: 'axis',
  1667. axisPointer: {
  1668. type: 'cross',
  1669. animation: false,
  1670. label: {
  1671. backgroundColor: '#505765',
  1672. },
  1673. },
  1674. },
  1675. legend: {
  1676. data: ['当前水深', '河床'],
  1677. textStyle: {
  1678. color: '#00D1FF',
  1679. fontsize: 13,
  1680. },
  1681. },
  1682. xAxis: [
  1683. {
  1684. name: '',
  1685. type: 'category',
  1686. boundaryGap: false,
  1687. axisLabel: {
  1688. fontSize: 12,
  1689. color: '#00D1FF',
  1690. },
  1691. axisLine: {
  1692. show: true,
  1693. symbol: ['none', 'arrow'],
  1694. lineStyle: {
  1695. color: '#00D1FF', //刻度线的颜色
  1696. },
  1697. },
  1698. data: [],
  1699. },
  1700. ],
  1701. yAxis: {
  1702. name: '单位:m',
  1703. type: 'value',
  1704. scale: true,
  1705. textStyle: {
  1706. color: '#00D1FF',
  1707. },
  1708. axisLine: {
  1709. show: false,
  1710. lineStyle: {
  1711. color: '#00D1FF', //刻度线的颜色
  1712. },
  1713. },
  1714. splitLine: {
  1715. //x网格样式
  1716. show: false,
  1717. lineStyle: {
  1718. color: '#00D1FF',
  1719. type: 'dashed',
  1720. },
  1721. },
  1722. },
  1723. series: [
  1724. {
  1725. name: '当前水位',
  1726. type: 'line',
  1727. symbol: 'none',
  1728. smooth: true,
  1729. lineStyle: {
  1730. color: 'rgba(156, 205, 247, 0.5)',
  1731. },
  1732. // 填充区域的样式
  1733. areaStyle: {
  1734. // 填充色渐变
  1735. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1736. { offset: 1, color: 'rgba(156, 205, 247, 0.3)' },
  1737. { offset: 0, color: 'rgba(156, 205, 247, 1)' },
  1738. ]),
  1739. },
  1740. data: [],
  1741. },
  1742. {
  1743. name: '河床',
  1744. type: 'line',
  1745. symbol: 'none',
  1746. smooth: true,
  1747. lineStyle: {
  1748. color: 'rgba(215, 207, 143, 0.5)',
  1749. },
  1750. // 填充区域的样式
  1751. areaStyle: {
  1752. // 填充色渐变
  1753. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1754. { offset: 1, color: 'rgba(215, 207, 143, 0.3)' },
  1755. { offset: 0, color: 'rgba(215, 207, 143, 1)' },
  1756. ]),
  1757. },
  1758. data: [],
  1759. // 设防水位线
  1760. markLine: {
  1761. silent: true,
  1762. symbol: ['circle', 'arrow'], // none为标线两端的样式为无,可更改
  1763. data: [
  1764. {
  1765. yAxis: 19, // 警戒线位置,这个赋值为纵轴50
  1766. lineStyle: { type: 'dashed', color: 'red', width: 1 }, // 样式: 线型、颜色、线宽
  1767. label: {
  1768. show: true,
  1769. position: 'middle', // 文字位置
  1770. formatter: '设防水位 19m', //文字
  1771. color: 'red', // 文字颜色
  1772. },
  1773. },
  1774. ],
  1775. },
  1776. },
  1777. ],
  1778. },
  1779. };
  1780.  
  1781. export default chartOption;