Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / components / ShuiZhicharts.vue
  1. <template>
  2. <!-- 实时水质 -->
  3. <div :id="id" style="width: 100%; height: 100%"></div>
  4. </template>
  5. <script setup>
  6. import { guid } from '@/utils/ruoyi';
  7. import { nextTick } from 'vue';
  8. import moment from 'moment';
  9.  
  10. const id = guid();
  11. const myChart = shallowRef('');
  12. import * as echarts from 'echarts';
  13. import { nowSize } from '@/utils/util.js';
  14.  
  15. const { proxy } = getCurrentInstance();
  16.  
  17. const props = defineProps({
  18. data: {
  19. type: Object,
  20. default: () => [],
  21. },
  22. //刷新
  23. refresh: {
  24. type: Number,
  25. },
  26. });
  27.  
  28. watch(
  29. () => props.refresh,
  30. value => {
  31. console.log('???????');
  32. //先销毁实例
  33. myChart.value && myChart.value.dispose();
  34. init();
  35. },
  36. {
  37. deep: true,
  38. }
  39. );
  40.  
  41. function init() {
  42. let position = ['insideStartTop', 'insideMiddleTop', 'insideEndBottom'];
  43. myChart.value = echarts.init(document.getElementById(id));
  44.  
  45. let maxnh4n=Number((Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.2))
  46. console.log('123',maxnh4n);
  47. // console.log('2222332',(Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.1).toFixed(2));
  48. let option = {
  49. tooltip: {
  50. trigger: 'axis',
  51. backgroundColor: '#004284',
  52. borderColor: '#0B9BFF',
  53. borderRadius: 6, // 设置圆角大小
  54. // 自定义提示框文本样
  55. formatter: function (params) {
  56. let res = params[0].name + '<br/>';
  57. params.forEach(function (item) {
  58. // 对每个数据项的数值进行格式化,保留两位小数
  59. let text= `<div class="flex flex-justcontent-spacebetween">
  60. <span>${item.marker}${item.seriesName}</span>
  61. <span>${(item.value == null ? '-' : Number(item.value).toFixed(2))}</span>
  62. </div>`
  63. res +=text ;
  64. });
  65. return res;
  66. },
  67. textStyle: {
  68. // 字体颜色
  69. color: 'white',
  70. // 字体大小
  71. fontSize: nowSize(14, 1920),
  72.  
  73. },
  74. },
  75. legend: {
  76. data: ['氨氮(mg/L)', '溶解氧(mg/L)', 'COD(mg/L)', '电导率(μS/cm)', 'PH值'],
  77. orient: "horizontal", //horizontal横向 vertical 纵向
  78. type: "scroll",
  79. x: "center", //居右显示
  80. align: "left", //图例控制在左边
  81. textStyle: {
  82. color: '#FFFFFF',
  83. fontSize: nowSize(12, 1920),
  84. },
  85. },
  86. grid: {
  87. top: 52,
  88. left: 20,
  89. right: 25,
  90. bottom: 10,
  91. containLabel: true,
  92. },
  93.  
  94. xAxis: {
  95. type: 'category',
  96. boundaryGap: true,
  97. // show: false,
  98. data: props.data.XAxis,
  99. axisLabel: {
  100. color: 'rgba(255,255,255,1)',
  101. fontSize: nowSize(12, 1920),
  102. fontFamily: 'AlibabaPuHuiTi',
  103. formatter: function (value) {
  104. return moment(value).format('HH:MM');
  105. },
  106. },
  107. },
  108. dataZoom: [
  109. {
  110. // show: true,
  111. show: false,
  112. height: 4,
  113. bottom: 10,
  114. start: 0,
  115. end: 60,
  116. handleSize: '100%',
  117. fillerColor: '#94FA41',
  118. borderColor: 'transparent',
  119. backgroundColor: 'rgba(148, 250, 65, 0.2)',
  120. handleStyle: {
  121. color: '#94FA41',
  122. },
  123. moveHandleSize: 0,
  124. textStyle: {
  125. color: '#fff',
  126. },
  127. },
  128. {
  129. type: 'inside',
  130. show: true,
  131. height: 15,
  132. start: 0,
  133. end: 60,
  134. },
  135. ],
  136. yAxis: [
  137. {
  138. name: '氨氮',
  139. type: 'value',
  140. // minInterval: 1,
  141. min: 0,
  142. max:Number((Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.3)).toFixed(2),
  143.  
  144. axisLabel: {
  145. color: '#259543',
  146. show: true,
  147. formatter: function (value) {
  148. return value.toFixed(1); // 保留两位小数
  149. },
  150. },
  151. nameTextStyle: {
  152. color: '#259543',
  153. padding: [0, 0, 0, -5],
  154. },
  155. splitLine: {
  156. show: false,
  157. lineStyle: {
  158. type: 'dashed',
  159. color: '#2161a8',
  160. },
  161. },
  162. alignTicks: true,
  163. position: 'left',
  164. inverse: true,
  165. nameLocation: 'start',
  166. offset: 28,
  167. },
  168. {
  169. name: '溶解氧',
  170. type: 'value',
  171. // minInterval: 1,
  172. min: 0,
  173. max:(Math.max(...[Number(props.data.marklineObj.DO),...props.data.DO]) * 1.3).toFixed(2),
  174.  
  175. axisLabel: {
  176. color: '#b14de5',
  177. show: true,
  178. formatter: function (value) {
  179. return value.toFixed(0); // 保留两位小数
  180. },
  181. },
  182. nameTextStyle: {
  183. color: '#b14de5',
  184. padding: [0, 0, 0, -5],
  185. },
  186. splitLine: {
  187. show: false,
  188. lineStyle: {
  189. type: 'dashed',
  190. color: '#2161a8',
  191. },
  192. },
  193. // alignTicks: true,
  194. position: 'left',
  195. offset: -5,
  196. },
  197. {
  198. name: 'COD',
  199. type: 'value',
  200. // minInterval: 1,
  201. min: 0,
  202. max:(Math.max(...[Number(props.data.marklineObj.codcr),...props.data.codcr]) * 1.3).toFixed(2),
  203. axisLabel: {
  204. color: '#99FF55',
  205. show: true,
  206. // formatter: function (value) {
  207. // return value.toFixed(2); // 保留两位小数
  208. // },
  209. },
  210. nameTextStyle: {
  211. color: '#99FF55',
  212. padding: [0, 0, 0, 10],
  213. },
  214. splitLine: {
  215. show: false,
  216. lineStyle: {
  217. type: 'dashed',
  218. color: '#2161a8',
  219. },
  220. },
  221. // alignTicks: true,
  222. position: 'right',
  223. offset: -5,
  224. },
  225.  
  226. {
  227. name: '电导率',
  228. type: 'value',
  229. // minInterval: 1,
  230. min: 0,
  231. axisLabel: {
  232. color: '#FFC155',
  233. show: true,
  234. // formatter: function (value) {
  235. // return value.toFixed(2); // 保留两位小数
  236. // },
  237. },
  238. nameTextStyle: {
  239. color: '#FFC155',
  240. padding: [0, 0, 0, 15],
  241. },
  242. splitLine: {
  243. show: false,
  244. lineStyle: {
  245. type: 'dashed',
  246. color: '#2161a8',
  247. },
  248. },
  249. // alignTicks: true,
  250. position: 'right',
  251. offset: 28,
  252. },
  253. {
  254. name: 'PH值',
  255. type: 'value',
  256. // minInterval: 1,
  257. min: 0,
  258. axisLabel: {
  259. color: '#009BE9',
  260. show: true,
  261. // formatter: function (value) {
  262. // return value.toFixed(2); // 保留两位小数
  263. // },
  264. },
  265. nameTextStyle: {
  266. color: '#009BE9',
  267. padding: [0, 0, 0, 15],
  268. },
  269. splitLine: {
  270. show: false,
  271. lineStyle: {
  272. type: 'dashed',
  273. color: '#2161a8',
  274. },
  275. },
  276. // alignTicks: true,
  277. position: 'right',
  278. offset: 62,
  279. },
  280. ],
  281. series: [
  282. {
  283. name: '氨氮(mg/L)',
  284. type: 'line',
  285. data: props.data.nh4n,
  286. yAxisIndex: 0,
  287. symbolSize: 7,
  288. // 修改折线颜色
  289. lineStyle: {
  290. color: '#259543', // 折线颜色
  291. width: 2, // 折线宽度
  292. },
  293. // 修改数据点颜色
  294. itemStyle: {
  295. color: '#259543', // 数据点颜色
  296. width: 4,
  297. },
  298. markLine: {
  299. data: [
  300. {
  301. yAxis: props.data.marklineObj.nh4n, // 这是水平线的 Y 轴值
  302. lineStyle: {
  303. type: 'dashed',
  304. color: '#259543', // 线的颜色
  305. },
  306. label: {
  307. show: true,
  308. formatter: '氨氮警戒线:' + props.data.marklineObj.nh4n,
  309. color: '#259543',
  310. fontSize: nowSize(12, 1920),
  311. position: 'middle',
  312. },
  313. },
  314. ],
  315. symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
  316. },
  317. },
  318. {
  319. name: '溶解氧(mg/L)',
  320. type: 'line',
  321. data: props.data.DO,
  322. yAxisIndex: 1,
  323. symbolSize: 7,
  324. // 修改折线颜色
  325. lineStyle: {
  326. color: '#b14de5', // 折线颜色
  327. width: 2, // 折线宽度
  328. },
  329. // 修改数据点颜色
  330. itemStyle: {
  331. color: '#b14de5', // 数据点颜色
  332. width: 4,
  333. },
  334. markLine: {
  335. data: [
  336. {
  337. yAxis: props.data.marklineObj.DO, // 这是水平线的 Y 轴值
  338. lineStyle: {
  339. type: 'dashed',
  340. color: '#b14de5', // 线的颜色
  341. },
  342. label: {
  343. show: true,
  344. formatter: '溶解氧警戒线:' + props.data.marklineObj.DO,
  345. color: '#b14de5',
  346. fontSize: nowSize(12, 1920),
  347. position: 'middle',
  348. },
  349. },
  350. ],
  351. symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
  352. },
  353. },
  354. {
  355. name: 'COD(mg/L)',
  356. type: 'line',
  357. data: props.data.codcr,
  358. yAxisIndex: 2,
  359. // 修改折线颜色
  360. lineStyle: {
  361. color: '#99FF55', // 折线颜色
  362. width: 2, // 折线宽度
  363. },
  364. // 修改数据点颜色
  365. itemStyle: {
  366. color: '#99FF55', // 数据点颜色
  367. },
  368. markLine: {
  369. data: [
  370. {
  371. yAxis: props.data.marklineObj.codcr, // 这是水平线的 Y 轴值
  372. lineStyle: {
  373. type: 'dashed',
  374. color: '#99FF55', // 线的颜色
  375. },
  376. label: {
  377. show: true,
  378. formatter: 'COD警戒线:' + props.data.marklineObj.codcr,
  379. color: '#99FF55',
  380. fontSize: nowSize(12, 1920),
  381. position: 'middle',
  382. },
  383. },
  384. ],
  385. symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
  386. },
  387. },
  388. {
  389. name: '电导率(μS/cm)',
  390. type: 'line',
  391. data: props.data.cond,
  392. yAxisIndex: 3,
  393. // 修改折线颜色
  394. lineStyle: {
  395. color: '#FFC155', // 折线颜色
  396. width: 2, // 折线宽度
  397. },
  398. // 修改数据点颜色
  399. itemStyle: {
  400. color: '#FFC155', // 数据点颜色
  401. },
  402. },
  403. {
  404. name: 'PH值',
  405. type: 'line',
  406. data: props.data.ph,
  407. yAxisIndex: 4,
  408. // 修改折线颜色
  409. lineStyle: {
  410. color: '#009BE9', // 折线颜色
  411. width: 2, // 折线宽度
  412. },
  413. // 修改数据点颜色
  414. itemStyle: {
  415. color: '#009BE9', // 数据点颜色
  416. },
  417. },
  418. ],
  419. };
  420.  
  421. option && myChart.value.setOption(option);
  422. }
  423.  
  424. function resizeTheChart() {
  425. if (myChart.value) {
  426. myChart.value.resize();
  427. }
  428. }
  429. onMounted(() => {
  430. nextTick(() => {
  431. init();
  432. window.addEventListener('resize', resizeTheChart);
  433. });
  434. });
  435. </script>