Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / components / Paikoucharts.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. const id = guid();
  9. const myChart = shallowRef("");
  10. import * as echarts from "echarts";
  11. import { nowSize } from '@/utils/util.js';
  12. import moment from 'moment';
  13.  
  14. const props = defineProps({
  15. //刷新标志
  16. refresh: {
  17. type: [String, Number],
  18. default: 1,
  19. },
  20. //x轴数据
  21. XAxis: {
  22. type: Array,
  23. default: () => [],
  24. },
  25. //y轴数据
  26. YAxis: {
  27. type: Array,
  28. default: () => [],
  29. },
  30. //名字
  31. DataName: {
  32. type: String,
  33. },
  34. //类型
  35. typeName: {
  36. type: String,
  37. default: "",
  38. },
  39. yAxisarr: {
  40. type: Array,
  41. default: () => [],
  42. },
  43. });
  44.  
  45. watch(
  46. () => props.refresh,
  47. (value) => {
  48. console.log("???????");
  49. //先销毁实例
  50. myChart.value && myChart.value.dispose();
  51. init();
  52. },
  53. {
  54. deep: true,
  55. }
  56. );
  57. function init() {
  58. let colorarr = [
  59. "#99FF55",
  60. "#b14de5",
  61. "#FFC155",
  62. "#409eff",
  63. "#ff7f50",
  64. "#ff69b4",
  65. "#87ceeb",
  66. "#4682b4",
  67. "#98fb98",
  68. ];
  69. let rightnumber = props.yAxisarr.length * "4.5" + "%";
  70. let newarr = [];
  71. let marklinedata = [];
  72. let maxArr = [];
  73. let minArr = [];
  74. let finyasx = [
  75. {
  76. show: false,
  77. inverse: true, //控制x轴在上方
  78. name: props.typeName,
  79. type: "value",
  80. axisLabel: {
  81. show: true,
  82. color: "#409eff",
  83.  
  84. },
  85. axisLine: {
  86. lineStyle: {
  87. color: "#409eff",
  88. },
  89. },
  90. splitLine: {
  91. show: true,
  92. lineStyle: {
  93. color: "rgba(61,91,98,0.8)",
  94. },
  95. },
  96. // min: 0,
  97. },
  98. ];
  99.  
  100. let finxse = [
  101. // {
  102. // name: props.typeName,
  103. // type: 'bar',
  104. // barWidth: 12,
  105. // itemStyle: {
  106. // borderRadius: [0, 0, 6, 6],
  107. // color: function () {
  108. // return new echarts.graphic.LinearGradient(
  109. // 0,
  110. // 1,
  111. // 0,
  112. // 0,
  113. // [
  114. // {
  115. // offset: 0.1,
  116. // color: '#409eff', // 0% 处的颜色
  117. // },
  118. // {
  119. // offset: 0.9,
  120. // color: '#013068', // 100% 处的颜色
  121. // },
  122. // ],
  123. // false
  124. // );
  125. // },
  126. // },
  127. // // showBackground: true,
  128. // backgroundStyle: {
  129. // color: 'transparent',
  130. // borderWidth: 1,
  131. // borderColor: 'rgba(148, 250, 65, 0.2)',
  132. // },
  133. // data: props.YAxis,
  134. // },
  135. ];
  136.  
  137. console.log("获取的Y轴的数据", props.yAxisarr);
  138.  
  139. // 处理多个y轴遍历展示
  140. if (props.yAxisarr) {
  141. props.yAxisarr.map((item, index) => {
  142. let arr = [];
  143. let markLineArr = [];
  144. item.cordonLineList.map((p) => {
  145. markLineArr.push(Number(p.lineValue));
  146. arr.push({
  147. silent: false, //鼠标悬停事件 true没有,false有
  148. lineStyle: {
  149. //警戒线的样式 ,虚实 颜色
  150. type: "dashed",
  151. color: p.lineColor,
  152. },
  153. name: p.lineName,
  154. yAxis: Number(p.lineValue),
  155. label: {
  156. formatter: `${p.lineValue}-${p.lineName}`,
  157. color: p.lineColor,
  158. },
  159. });
  160. });
  161.  
  162. item["maxValue"] = Math.max.apply(null, [...item.datas, ...markLineArr]);
  163. item["minValue"] = Math.min.apply(null, [...item.datas, ...markLineArr]);
  164.  
  165. marklinedata.push(arr);
  166. });
  167.  
  168. console.log("marklinedata", marklinedata);
  169. props.yAxisarr.map((item, index) => {
  170. let obj = {
  171. name: item.dataName,
  172. type: "value",
  173. axisLabel: {
  174. show: true,
  175. color: colorarr[index],
  176. formatter: function (value) {
  177. return value.toFixed(2); // 保留两位小数
  178. },
  179. },
  180. axisLine: {
  181. show: true,
  182. lineStyle: {
  183. color: colorarr[index],
  184. },
  185. },
  186.  
  187. splitLine: {
  188. show: false,
  189. lineStyle: {
  190. color: "rgba(61,91,98,0.8)",
  191. },
  192. },
  193. min: Math.floor(item.minValue * 0.95),
  194. max: item.maxValue,
  195. };
  196.  
  197. if (index == 0) {
  198. obj.position = "left";
  199. } else if (index == 1) {
  200. obj.position = "right";
  201. } else {
  202. obj.position = "right";
  203. obj.offset = (index - 1.1) * 70;
  204. // obj.show = false;
  205. }
  206.  
  207. finyasx.push(obj);
  208.  
  209. finxse.push({
  210. smooth: true, //变为曲线 默认false折线
  211. name: item.dataName + item.unit,
  212. type: "line",
  213. yAxisIndex: index + 1,
  214. data: item.datas,
  215. markLine: {
  216. symbol: "none", //去掉警戒线最后面的箭头
  217. label: {
  218. position: "middle", //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
  219. },
  220. data: marklinedata[index],
  221. },
  222. });
  223. });
  224. }
  225.  
  226. myChart.value = echarts.init(document.getElementById(id));
  227. let option = {
  228. color: colorarr,
  229. legend: {
  230. show: true,
  231. orient: "horizontal", //horizontal横向 vertical 纵向
  232. type: "scroll",
  233. x: "center", //居右显示
  234. align: "left", //图例控制在左边
  235. // icon: 'circle',
  236. // itemWidth: 15,
  237. itemHeight: 15,
  238. itemHeight: 15,
  239. textStyle: {
  240. color: "auto",
  241. rich: {
  242. another: {
  243. fontSize: 14,
  244. },
  245. },
  246. fontSize: 12,
  247. },
  248. },
  249. tooltip: {
  250. trigger: "axis",
  251. backgroundColor: '#004284',
  252. borderColor: '#0B9BFF',
  253. borderRadius: 6, // 设置圆角大小
  254. feature: {
  255. mark: { show: true },
  256. dataView: { show: true, readOnly: false },
  257. magicType: { show: true, type: ["line", "bar"] },
  258. restore: { show: true },
  259. saveAsImage: { show: true },
  260. },
  261. formatter: function (params) {
  262. let res = params[0].name + '<br/>';
  263. params.forEach(function (item) {
  264. // 对每个数据项的数值进行格式化,保留两位小数
  265. let text= `<div class="flex flex-justcontent-spacebetween">
  266. <span>${item.marker}${item.seriesName}</span>
  267. <span>${(item.value == null ? '-' : Number(item.value).toFixed(2))}</span>
  268. </div>`
  269. res +=text ;
  270. });
  271. return res;
  272. },
  273. textStyle: {
  274. // 字体颜色
  275. color: 'white',
  276. // 字体大小
  277. fontSize: nowSize(14, 1920),
  278.  
  279. },
  280. axisPointer: {
  281. type: "cross",
  282. textStyle: {
  283. color: "#fff",
  284. },
  285. },
  286. },
  287. grid: {
  288. top: "33%",
  289. left: 5,
  290. right: rightnumber,
  291. // right: '5%',
  292. bottom: "10%",
  293. containLabel: true,
  294. },
  295. xAxis: [
  296. {
  297. type: "category",
  298. data: props.XAxis,
  299. axisLabel: {
  300. color: 'rgba(255,255,255,1)',
  301. fontSize: nowSize(12, 1920),
  302. fontFamily: 'AlibabaPuHuiTi',
  303. formatter: function (value) {
  304. return moment(value).format('HH:MM');
  305. },
  306. },
  307. axisPointer: {
  308. type: "shadow",
  309. },
  310.  
  311. axisLine: {
  312. lineStyle: {
  313. // color: '#3398DB',
  314. },
  315. },
  316. },
  317. ],
  318. yAxis: finyasx,
  319. dataZoom: [
  320. {
  321. show: true,
  322. // show: false,
  323. height: 4,
  324. bottom: 18,
  325. start: 0,
  326. end: 100,
  327. handleSize: "100%",
  328. fillerColor: "#94FA41",
  329. borderColor: "transparent",
  330. backgroundColor: "rgba(148, 250, 65, 0.2)",
  331. handleStyle: {
  332. color: "#94FA41",
  333. },
  334. moveHandleSize: 0,
  335. textStyle: {
  336. color: "#fff",
  337. },
  338. },
  339. {
  340. type: "inside",
  341. show: true,
  342. height: 15,
  343. start: 1,
  344. end: 35,
  345. },
  346. ],
  347. series: finxse,
  348. };
  349.  
  350. option && myChart.value.setOption(option);
  351. }
  352.  
  353. function resizeTheChart() {
  354. if (myChart.value) {
  355. myChart.value.resize();
  356. }
  357. }
  358. onMounted(() => {
  359. nextTick(() => {
  360. init();
  361. window.addEventListener("resize", resizeTheChart);
  362. });
  363. });
  364. </script>