Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / components / DraBarChartsLeft.vue
@zhangqy zhangqy on 10 Dec 5 KB 对接污水以及全景
  1. <template>
  2. <div :id="id" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script>
  5. import * as echarts from "echarts";
  6. import { guid } from "@/utils/ruoyi";
  7. import bus from "@/bus";
  8. import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
  9. export default {
  10. name: "line-chart",
  11. props: {
  12. data: Object,
  13. refresh: Number,
  14. ClickData: String,
  15. TypeID: String,
  16. },
  17. setup(props) {
  18. const allData = reactive({
  19. series: [],
  20. legend: [],
  21. id: guid(),
  22. chart: null,
  23. timer: null,
  24. });
  25. const resizeTheChart = () => {
  26. if (allData.chart) {
  27. allData.chart.resize();
  28. }
  29. };
  30.  
  31. const init = () => {
  32. // let chartDom = echarts.init(document.getElementById(allData.id));
  33. //先获取Dom上的实例
  34. let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
  35. //然后判断实例是否存在,如果不存在,就创建新实例
  36. if (chartDom == null) {
  37. chartDom = echarts.init(document.getElementById(allData.id));
  38. }
  39. var option;
  40. option = {
  41. tooltip: {
  42. trigger: "axis",
  43. backgroundColor: "#004284",
  44. borderColor: "#0B9BFF",
  45. borderRadius: 6, // 设置圆角大小
  46. // 自定义提示框文本样
  47. textStyle: {
  48. // 字体颜色
  49. color: "white",
  50. // 字体大小
  51. fontSize: 14,
  52. },
  53. formatter: (params) => {
  54. // console.log(params);
  55. var relVal = "" + params[0].name;
  56. for (var i = 0, l = params.length; i < l; i++) {
  57. if (params[i].seriesName) {
  58. let unit = props.data.y1_Unit;
  59. relVal +=
  60. "<br/>" +
  61. params[i].marker +
  62. params[i].seriesName +
  63. " " +
  64. params[i].value +
  65. unit;
  66. }
  67. }
  68. return relVal;
  69. },
  70. },
  71. legend: {
  72. textStyle: {
  73. color: "#FFFFFF",
  74. },
  75. },
  76. grid: {
  77. left: "3%",
  78. right: "4%",
  79. bottom: "3%",
  80. top: "10%",
  81. containLabel: true,
  82. },
  83. xAxis: {
  84. // name: "数量(个)",
  85. nameTextStyle: {
  86. color: "#AAC1CF", // 红色
  87. align: "right",
  88. fontSize: 10,
  89. },
  90. // max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2),
  91. nameLocation: "start",
  92. type: "value",
  93. minInterval: 1,
  94. nameGap: 5,
  95. axisLabel: {
  96. color: "#AAC1CF",
  97. fontSize: 12,
  98. },
  99. splitLine: {
  100. lineStyle: {
  101. type: "dashed",
  102. color: "#2161a8",
  103. },
  104. },
  105. },
  106. yAxis: {
  107. type: "category",
  108. data: props.data.xAxis,
  109. axisLabel: {
  110. color: "#EBFEFF",
  111. show: true,
  112. fontSize: props.data.xAxis.length > 8 ? 8 : 12,
  113. },
  114. nameTextStyle: {
  115. color: "#FFFFFF",
  116. },
  117. },
  118. series: [
  119. {
  120. name: props.data.yAxis2_Name,
  121. type: "bar",
  122. // barWidth: 10,
  123. // label: {
  124. // show: true,
  125. // },
  126. data: props.data.yAxis2,
  127. barGap: "-100%",
  128. itemStyle: {
  129. borderRadius: [0, 20, 20, 0],
  130. color: "#31FEDF",
  131. },
  132. label: {
  133. show: true,
  134. position: "right",
  135. valueAnimation: true,
  136. color: "inherit",
  137. fontSize: 12,
  138. formatter: (params) => {
  139. return params.value + props.data.y1_Unit;
  140. },
  141. },
  142. },
  143. {
  144. name: props.data.yAxis_Name,
  145. type: "bar",
  146. // barWidth: 10,
  147. // label: {
  148. // show: true,
  149. // },
  150. data: props.data.yAxis,
  151. itemStyle: {
  152. borderRadius: [0, 20, 20, 0],
  153. color: "#FF6464",
  154. },
  155. label: {
  156. show: false,
  157. position: "right",
  158. valueAnimation: true,
  159. color: "inherit",
  160. fontSize: 12,
  161. formatter: (params) => {
  162. return params.value + props.data.y1_Unit;
  163. },
  164. },
  165. },
  166. ],
  167. };
  168.  
  169. option && chartDom.setOption(option, true);
  170. allData.chart = chartDom;
  171. // animateChart();
  172. // 监听点击事件
  173. allData.chart.on("click", function (params) {
  174. // params.value 是点击的X轴标签的值
  175. console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
  176. bus.emit("openJXFXDialog", {
  177. name: params.name,
  178. ClickData: props.ClickData,
  179. });
  180. // 在这里可以执行相应的逻辑
  181. });
  182. };
  183. watch(
  184. () => props.refresh,
  185. () => {
  186. console.log(props, "propspropsprops");
  187. if (allData.chartDom) {
  188. allData.chartDom.dispose();
  189. allData.chartDom = null;
  190. // clearInterval(allData.timer);
  191. }
  192. allData.chart.off("click");
  193.  
  194. setTimeout(() => {
  195. init();
  196. }, 0);
  197. }
  198. );
  199. // echarts动画
  200. function animateChart() {
  201. let length = props.data.xAxis.length;
  202. let i = 0;
  203. if (allData.timer) clearInterval(allData.timer);
  204. allData.timer = setInterval(() => {
  205. i++;
  206. if (i == length) i = 0;
  207. allData.chart.dispatchAction({
  208. type: "showTip",
  209. seriesIndex: 0,
  210. dataIndex: i,
  211. });
  212. }, 3000);
  213. }
  214. onMounted(() => {
  215. init();
  216. window.addEventListener("resize", resizeTheChart);
  217. });
  218. onUnmounted(() => {
  219. if (allData.timer) clearInterval(allData.timer);
  220. });
  221. return {
  222. ...toRefs(allData),
  223. resizeTheChart,
  224. init,
  225. };
  226. },
  227. };
  228. </script>