Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / components / RightCharts.vue
@zhangqy zhangqy on 14 Dec 9 KB 对接数据
  1. <template>
  2. <div :id="id" class="RightClass" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script>
  5. import * as echarts from "echarts";
  6. import { guid } from "@/utils/ruoyi";
  7. import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
  8. import bus from "@/bus";
  9. import moment from "moment";
  10. export default {
  11. name: "line-chart",
  12. props: {
  13. data: Object,
  14. refresh: Number,
  15. ClickData: String,
  16. TypeID: String,
  17. },
  18. setup(props) {
  19. const allData = reactive({
  20. series: [],
  21. legend: [],
  22. id: guid(),
  23. chart: null,
  24. timer: null,
  25. });
  26. const resizeTheChart = () => {
  27. if (allData.chart) {
  28. allData.chart.resize();
  29. }
  30. };
  31.  
  32. const init = () => {
  33. // let chartDom = echarts.init(document.getElementById(allData.id));
  34. //先获取Dom上的实例
  35. let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
  36. //然后判断实例是否存在,如果不存在,就创建新实例
  37. if (chartDom == null) {
  38. chartDom = echarts.init(document.getElementById(allData.id));
  39. }
  40. var option;
  41. option = {
  42. tooltip: {
  43. trigger: "axis",
  44. backgroundColor: "#004284",
  45. borderColor: "#0B9BFF",
  46. borderRadius: 6, // 设置圆角大小
  47. // 自定义提示框文本样
  48. textStyle: {
  49. // 字体颜色
  50. color: "white",
  51. // 字体大小
  52. fontSize: 14,
  53. },
  54. },
  55. legend: {
  56. data: [
  57. props.data.yAxis_Name,
  58. props.data.yAxis2_Name,
  59. props.data.yAxis3_Name,
  60. props.data.yAxis4_Name,
  61. ],
  62. textStyle: {
  63. color: "#FFFFFF",
  64. fontSize: 12,
  65. },
  66. },
  67. grid: {
  68. left: 80,
  69. right: 20,
  70. bottom: 20,
  71. containLabel: true,
  72. },
  73.  
  74. xAxis: {
  75. type: "category",
  76. boundaryGap: true,
  77. data: props.data.xAxis,
  78. axisLabel: {
  79. color: "rgba(255,255,255,1)",
  80. fontSize: 12,
  81. fontFamily: "AlibabaPuHuiTi",
  82. formatter: function (value) {
  83. return moment(value).format("hh:mm");
  84. },
  85. },
  86. },
  87.  
  88. dataZoom: [
  89. {
  90. // show: true,
  91. show: false,
  92. height: 4,
  93. bottom: 10,
  94. start: 0,
  95. end: 100,
  96. handleSize: "100%",
  97. fillerColor: "#94FA41",
  98. borderColor: "transparent",
  99. backgroundColor: "rgba(148, 250, 65, 0.2)",
  100. handleStyle: {
  101. color: "#94FA41",
  102. },
  103. moveHandleSize: 0,
  104. textStyle: {
  105. color: "#fff",
  106. },
  107. },
  108. {
  109. type: "inside",
  110. show: true,
  111. height: 15,
  112. start: 0,
  113. end: 100,
  114. },
  115. ],
  116. yAxis: [
  117. {
  118. name: props.data.yAxis_Name,
  119. type: "value",
  120. // minInterval: 1,
  121. min: 0,
  122. axisLabel: {
  123. color: "#AAC1CF",
  124. show: true,
  125. formatter: function (value) {
  126. return value.toFixed(2); // 保留两位小数
  127. },
  128. },
  129. nameTextStyle: {
  130. color: "#19D5FF",
  131. },
  132. splitLine: {
  133. lineStyle: {
  134. type: "dashed",
  135. color: "#2161a8",
  136. },
  137. },
  138. alignTicks: true,
  139. position: "left",
  140. inverse: true,
  141. nameLocation: "start",
  142. offset: 80,
  143. },
  144. {
  145. name: props.data.yAxis2_Name,
  146. type: "value",
  147. // minInterval: 1,
  148. min: 0,
  149. axisLabel: {
  150. color: "#AAC1CF",
  151. show: true,
  152. formatter: function (value) {
  153. return value.toFixed(2); // 保留两位小数
  154. },
  155. },
  156. nameTextStyle: {
  157. color: "#b14de5",
  158. },
  159. splitLine: {
  160. lineStyle: {
  161. type: "dashed",
  162. color: "#2161a8",
  163. },
  164. },
  165. alignTicks: true,
  166. position: "right",
  167. offset: 50,
  168. },
  169. {
  170. name: props.data.yAxis3_Name,
  171. type: "value",
  172. // minInterval: 1,
  173. min: 0,
  174. axisLabel: {
  175. color: "#AAC1CF",
  176. show: true,
  177. formatter: function (value) {
  178. return value.toFixed(2); // 保留两位小数
  179. },
  180. },
  181. nameTextStyle: {
  182. color: "#99FF55",
  183. },
  184. splitLine: {
  185. lineStyle: {
  186. type: "dashed",
  187. color: "#2161a8",
  188. },
  189. },
  190. alignTicks: true,
  191. offset: 0,
  192. position: "right",
  193. },
  194. {
  195. name: props.data.yAxis4_Name,
  196. type: "value",
  197. // minInterval: 1,
  198. min: 0,
  199. axisLabel: {
  200. color: "rgb(255,127,80)",
  201. show: true,
  202. formatter: function (value) {
  203. return value.toFixed(2); // 保留两位小数
  204. },
  205. },
  206. nameTextStyle: {
  207. color: "rgb(255,127,80)",
  208. },
  209. splitLine: {
  210. lineStyle: {
  211. type: "dashed",
  212. color: "#2161a8",
  213. },
  214. },
  215. alignTicks: true,
  216. position: "left",
  217. },
  218. ],
  219. series: [
  220. {
  221. name: props.data.yAxis_Name,
  222. type: "bar",
  223. data: props.data.yAxis,
  224. barWidth: "30%", // 可以是具体像素值 '20px' 或百分比 '50%'
  225. // 修改数据点颜色
  226. itemStyle: {
  227. borderRadius: [0, 0, 50, 50],
  228. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  229. { offset: 0, color: "#08B1FF" },
  230. { offset: 1, color: "#19D6FF" },
  231. ]), // 数据点颜色
  232. },
  233. },
  234. {
  235. name: props.data.yAxis2_Name,
  236. type: "line",
  237. data: props.data.yAxis2,
  238. yAxisIndex: 1,
  239. symbolSize: 7,
  240. // 修改折线颜色
  241. lineStyle: {
  242. color: "#b14de5", // 折线颜色
  243. width: 2, // 折线宽度
  244. },
  245. // 修改数据点颜色
  246. itemStyle: {
  247. color: "#b14de5", // 数据点颜色
  248. width: 4,
  249. },
  250. },
  251. {
  252. name: props.data.yAxis3_Name,
  253. type: "line",
  254. data: props.data.yAxis3,
  255. yAxisIndex: 2,
  256. symbolSize: 7,
  257. // 修改折线颜色
  258. lineStyle: {
  259. color: "#99FF55", // 折线颜色
  260. width: 2, // 折线宽度
  261. },
  262. // 修改数据点颜色
  263. itemStyle: {
  264. color: "#99FF55", // 数据点颜色
  265. },
  266. },
  267. {
  268. name: props.data.yAxis4_Name,
  269. type: "line",
  270. data: props.data.yAxis4,
  271. yAxisIndex: 3,
  272. symbolSize: 7,
  273. // 修改折线颜色
  274. lineStyle: {
  275. color: "rgb(255,127,80)", // 折线颜色
  276. width: 2, // 折线宽度
  277. },
  278. // 修改数据点颜色
  279. itemStyle: {
  280. color: "rgb(255,127,80)", // 折线颜色
  281. },
  282. },
  283. ],
  284. };
  285.  
  286. option && chartDom.setOption(option, true);
  287. allData.chart = chartDom;
  288. // animateChart();
  289. // 监听点击事件
  290. // allData.chart.on("click", function (params) {
  291. // // params.value 是点击的X轴标签的值
  292. // console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
  293. // // 在这里可以执行相应的逻辑
  294. // bus.emit("openJXFXDialog", {
  295. // name: params.name,
  296. // ClickData: props.ClickData,
  297. // });
  298. // });
  299. };
  300. watch(
  301. () => props.refresh,
  302. () => {
  303. console.log(props, "propspropsprops");
  304. if (allData.chartDom) {
  305. allData.chartDom.dispose();
  306. allData.chartDom = null;
  307. }
  308. setTimeout(() => {
  309. console.log("重绘了");
  310. init();
  311. }, 10);
  312. }
  313. );
  314. // echarts动画
  315. function animateChart() {
  316. let length = props.data.xAxis.length;
  317. let i = 0;
  318. if (allData.timer) clearInterval(allData.timer);
  319. allData.timer = setInterval(() => {
  320. allData.chart.dispatchAction({
  321. type: "showTip",
  322. seriesIndex: 0,
  323. dataIndex: i,
  324. });
  325. i++;
  326. if (i == length) i = 0;
  327. }, 3000);
  328. }
  329. onMounted(() => {
  330. init();
  331. window.addEventListener("resize", resizeTheChart);
  332. });
  333. onUnmounted(() => {
  334. if (allData.timer) clearInterval(allData.timer);
  335. });
  336. return {
  337. ...toRefs(allData),
  338. resizeTheChart,
  339. init,
  340. };
  341. },
  342. };
  343. </script>
  344. <style>
  345. .RightClass {
  346. width: 100%;
  347. height: 100%;
  348. }
  349. </style>