Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / components / RightCharts.vue
@zhangqy zhangqy on 9 Dec 7 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: [props.data.yAxis_Name, props.data.yAxis2_Name, props.data.yAxis3_Name],
  57. textStyle: {
  58. color: "#FFFFFF",
  59. fontSize: 12,
  60. },
  61. },
  62. grid: {
  63. left: 30,
  64. right: 20,
  65. bottom: 20,
  66. containLabel: true,
  67. },
  68.  
  69. xAxis: {
  70. type: "category",
  71. boundaryGap: true,
  72. data: props.data.xAxis,
  73. axisLabel: {
  74. color: "rgba(255,255,255,1)",
  75. fontSize: 12,
  76. fontFamily: "AlibabaPuHuiTi",
  77. formatter: function (value) {
  78. return moment(value).format("hh:mm");
  79. },
  80. },
  81. },
  82.  
  83. dataZoom: [
  84. {
  85. // show: true,
  86. show: false,
  87. height: 4,
  88. bottom: 10,
  89. start: 0,
  90. end: 100,
  91. handleSize: "100%",
  92. fillerColor: "#94FA41",
  93. borderColor: "transparent",
  94. backgroundColor: "rgba(148, 250, 65, 0.2)",
  95. handleStyle: {
  96. color: "#94FA41",
  97. },
  98. moveHandleSize: 0,
  99. textStyle: {
  100. color: "#fff",
  101. },
  102. },
  103. {
  104. type: "inside",
  105. show: true,
  106. height: 15,
  107. start: 0,
  108. end: 100,
  109. },
  110. ],
  111. yAxis: [
  112. {
  113. name: props.data.yAxis_Name,
  114. type: "value",
  115. // minInterval: 1,
  116. min: 0,
  117. axisLabel: {
  118. color: "#AAC1CF",
  119. show: true,
  120. formatter: function (value) {
  121. return value.toFixed(2); // 保留两位小数
  122. },
  123. },
  124. nameTextStyle: {
  125. color: "#19D5FF",
  126. },
  127. splitLine: {
  128. lineStyle: {
  129. type: "dashed",
  130. color: "#2161a8",
  131. },
  132. },
  133. alignTicks: true,
  134. position: "left",
  135. inverse: true,
  136. nameLocation: "start",
  137. },
  138. {
  139. name: props.data.yAxis2_Name,
  140. type: "value",
  141. // minInterval: 1,
  142. min: 0,
  143. axisLabel: {
  144. color: "#AAC1CF",
  145. show: true,
  146. formatter: function (value) {
  147. return value.toFixed(2); // 保留两位小数
  148. },
  149. },
  150. nameTextStyle: {
  151. color: "#55FFC5",
  152. },
  153. splitLine: {
  154. lineStyle: {
  155. type: "dashed",
  156. color: "#2161a8",
  157. },
  158. },
  159. alignTicks: true,
  160. position: "right",
  161. offset: 50,
  162. },
  163. {
  164. name: props.data.yAxis3_Name,
  165. type: "value",
  166. // minInterval: 1,
  167. min: 0,
  168. axisLabel: {
  169. color: "#AAC1CF",
  170. show: true,
  171. formatter: function (value) {
  172. return value.toFixed(2); // 保留两位小数
  173. },
  174. },
  175. nameTextStyle: {
  176. color: "#99FF55",
  177. },
  178. splitLine: {
  179. lineStyle: {
  180. type: "dashed",
  181. color: "#2161a8",
  182. },
  183. },
  184. alignTicks: true,
  185. offset: 0,
  186. },
  187. ],
  188. series: [
  189. {
  190. name: props.data.yAxis_Name,
  191. type: "bar",
  192. data: props.data.yAxis,
  193. barWidth: "30%", // 可以是具体像素值 '20px' 或百分比 '50%'
  194. // 修改数据点颜色
  195. itemStyle: {
  196. borderRadius: [0, 0, 50, 50],
  197. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  198. { offset: 0, color: "#08B1FF" },
  199. { offset: 1, color: "#19D6FF" },
  200. ]), // 数据点颜色
  201. },
  202. },
  203. {
  204. name: props.data.yAxis2_Name,
  205. type: "line",
  206. data: props.data.yAxis2,
  207. yAxisIndex: 1,
  208. symbolSize: 7,
  209. // 修改折线颜色
  210. lineStyle: {
  211. color: "#55FFC5", // 折线颜色
  212. width: 2, // 折线宽度
  213. },
  214. // 修改数据点颜色
  215. itemStyle: {
  216. color: "#55FFC5", // 数据点颜色
  217. width: 4,
  218. },
  219. },
  220. {
  221. name: props.data.yAxis3_Name,
  222. type: "line",
  223. data: props.data.yAxis3,
  224. yAxisIndex: 2,
  225. symbolSize: 7,
  226. // 修改折线颜色
  227. lineStyle: {
  228. color: "#99FF55", // 折线颜色
  229. width: 2, // 折线宽度
  230. },
  231. // 修改数据点颜色
  232. itemStyle: {
  233. color: "#99FF55", // 数据点颜色
  234. },
  235. },
  236. ],
  237. };
  238.  
  239. option && chartDom.setOption(option, true);
  240. allData.chart = chartDom;
  241. // animateChart();
  242. // 监听点击事件
  243. // allData.chart.on("click", function (params) {
  244. // // params.value 是点击的X轴标签的值
  245. // console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
  246. // // 在这里可以执行相应的逻辑
  247. // bus.emit("openJXFXDialog", {
  248. // name: params.name,
  249. // ClickData: props.ClickData,
  250. // });
  251. // });
  252. };
  253. watch(
  254. () => props.refresh,
  255. () => {
  256. console.log(props, "propspropsprops");
  257. if (allData.chartDom) {
  258. allData.chartDom.dispose();
  259. allData.chartDom = null;
  260. }
  261. setTimeout(() => {
  262. console.log("重绘了");
  263. init();
  264. }, 10);
  265. }
  266. );
  267. // echarts动画
  268. function animateChart() {
  269. let length = props.data.xAxis.length;
  270. let i = 0;
  271. if (allData.timer) clearInterval(allData.timer);
  272. allData.timer = setInterval(() => {
  273. allData.chart.dispatchAction({
  274. type: "showTip",
  275. seriesIndex: 0,
  276. dataIndex: i,
  277. });
  278. i++;
  279. if (i == length) i = 0;
  280. }, 3000);
  281. }
  282. onMounted(() => {
  283. init();
  284. window.addEventListener("resize", resizeTheChart);
  285. });
  286. onUnmounted(() => {
  287. if (allData.timer) clearInterval(allData.timer);
  288. });
  289. return {
  290. ...toRefs(allData),
  291. resizeTheChart,
  292. init,
  293. };
  294. },
  295. };
  296. </script>
  297. <style>
  298. .RightClass {
  299. width: 100%;
  300. height: 100%;
  301. }
  302. </style>