Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / components / DraBarChartsLeft.vue
@zhangqy zhangqy on 9 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 = "km";
  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.1),
  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: 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: [20, 20, 20, 20],
  130. color: "#31FEDF",
  131. },
  132. },
  133. {
  134. name: props.data.yAxis_Name,
  135. type: "bar",
  136. barWidth: 10,
  137. // label: {
  138. // show: true,
  139. // },
  140. data: props.data.yAxis,
  141. itemStyle: {
  142. borderRadius: [20, 20, 20, 20],
  143. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  144. { offset: 0, color: "#FF6464" },
  145. { offset: 1, color: "#FF9A9A" },
  146. ]),
  147. },
  148. },
  149. ],
  150. };
  151.  
  152. option && chartDom.setOption(option, true);
  153. allData.chart = chartDom;
  154. // animateChart();
  155. // 监听点击事件
  156. allData.chart.on("click", function (params) {
  157. // params.value 是点击的X轴标签的值
  158. console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
  159. bus.emit("openJXFXDialog", {
  160. name: params.name,
  161. ClickData: props.ClickData,
  162. });
  163. // 在这里可以执行相应的逻辑
  164. });
  165. };
  166. watch(
  167. () => props.refresh,
  168. () => {
  169. console.log(props, "propspropsprops");
  170. if (allData.chartDom) {
  171. allData.chartDom.dispose();
  172. allData.chartDom = null;
  173. // clearInterval(allData.timer);
  174. }
  175. allData.chart.off("click");
  176.  
  177. setTimeout(() => {
  178. init();
  179. }, 0);
  180. }
  181. );
  182. // echarts动画
  183. function animateChart() {
  184. let length = props.data.xAxis.length;
  185. let i = 0;
  186. if (allData.timer) clearInterval(allData.timer);
  187. allData.timer = setInterval(() => {
  188. i++;
  189. if (i == length) i = 0;
  190. allData.chart.dispatchAction({
  191. type: "showTip",
  192. seriesIndex: 0,
  193. dataIndex: i,
  194. });
  195. }, 3000);
  196. }
  197. onMounted(() => {
  198. init();
  199. window.addEventListener("resize", resizeTheChart);
  200. });
  201. onUnmounted(() => {
  202. if (allData.timer) clearInterval(allData.timer);
  203. });
  204. return {
  205. ...toRefs(allData),
  206. resizeTheChart,
  207. init,
  208. };
  209. },
  210. };
  211. </script>