histTrendChart.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <div ref="histTrendChart" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script>
  5. import * as echarts from "echarts";
  6. import api from "@/api/Overview/index";
  7. import { ElMessage } from "element-plus";
  8. export default {
  9. props: {
  10. msg: Object,
  11. filterSec_value: Object,
  12. hisDefaultTime: Object,
  13. },
  14. data() {
  15. return {
  16. yName:''
  17. };
  18. },
  19. mounted() {
  20. this.$nextTick(() => {
  21. this.electricIco();
  22. });
  23. },
  24. beforeUnmount() {
  25. window.removeEventListener("resize", this.chart);
  26. },
  27. watch: {
  28. "$store.state.siteId"() {
  29. this.electricIco();
  30. },
  31. hisDefaultTime() {
  32. this.electricIco();
  33. },
  34. msg() {
  35. this.electricIco();
  36. },
  37. filterSec_value() {
  38. this.electricIco();
  39. },
  40. },
  41. methods: {
  42. electricIco() {
  43. this.$store.commit("TimeAll_function", [this.hisDefaultTime]);
  44. var time = this.$store.state.Time_Data;
  45. console.log('time[0]')
  46. console.log(time[0])
  47. console.log(time[1])
  48. api
  49. .electricIco({
  50. siteId: this.$store.state.siteId,
  51. date: time[0],
  52. })
  53. .then((requset) => {
  54. if (requset.status === "SUCCESS") {
  55. this.initChart(requset.data);
  56. } else {
  57. ElMessage.success({
  58. message: requset.msg,
  59. type: "success",
  60. });
  61. }
  62. });
  63. },
  64. //次数分布折线图
  65. initChart(data) {
  66. var chart = echarts.init(this.$refs.histTrendChart);
  67. var option;
  68. var dataAll = [];
  69. data.map((val) => {
  70. if (this.msg == 0) {
  71. this.yName="A";
  72. if (val.name == "IA" || val.name == "IB" || val.name == "IC") {
  73. return dataAll.push({
  74. name: val.name + "(A)",
  75. type: "line",
  76. smooth: false,
  77. data: val.list,
  78. symbolSize: 6,
  79. });
  80. }
  81. } else {
  82. this.yName="kV";
  83. if (val.name == "UA" || val.name == "UB" || val.name == "UC") {
  84. return dataAll.push({
  85. name: val.name + "(kV)",
  86. type: "line",
  87. smooth: false,
  88. data: val.list,
  89. symbolSize: 6,
  90. });
  91. }
  92. }
  93. });
  94. option = {
  95. color: ["#FEB70D", "#50F335", "#0DC8FE"],
  96. tooltip: {
  97. trigger: "axis",
  98. },
  99. // 图列组件
  100. legend: {
  101. itemHeight: 10, //改变圆圈大小
  102. itemWidth: 26, //改变圆圈大小
  103. itemGap: 30,
  104. textStyle: {
  105. color: "#fff",
  106. },
  107. left: "30%",
  108. bottom: "0",
  109. },
  110. grid: {
  111. left: "0%",
  112. right: "0%",
  113. bottom: "15%",
  114. top: "20%",
  115. containLabel: true,
  116. },
  117. xAxis: {
  118. type: "category",
  119. boundaryGap: true,
  120. data: data[0].listDate.map((val) => {
  121. return val.split(":")[0] + ":" + val.split(":")[1];
  122. }),
  123. axisTick: {
  124. show: false, //去除刻度线
  125. },
  126. axisLabel: {
  127. color: "#fff", // 文本颜色
  128. },
  129. axisLine: {
  130. show: false, // 去除轴线
  131. },
  132. },
  133. yAxis: {
  134. name: this.yName,
  135. nameTextStyle: {
  136. color: "#fff",
  137. fontSize: 10,
  138. },
  139. type: "value",
  140. axisTick: {
  141. show: false, //去除刻度线
  142. },
  143. axisLabel: {
  144. color: "#fff", // 文本颜色
  145. },
  146. axisLine: {
  147. show: false, // 去除轴线
  148. },
  149. splitNumber: 5,
  150. splitLine: {
  151. show: true,
  152. lineStyle: {
  153. color: "rgba(255,255,255,0.1)",
  154. },
  155. },
  156. },
  157. series: dataAll,
  158. };
  159. chart.setOption(option, true);
  160. window.addEventListener("resize", () => {
  161. chart.resize();
  162. });
  163. this.chart = chart;
  164. },
  165. },
  166. };
  167. </script>