Newer
Older
urbanLifeline_YanAn / src / components / Echarts / todayWeatherLineChart.vue
@zhangqy zhangqy on 3 Oct 3 KB first commit
  1. <template>
  2. <div :id="id" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script setup>
  5. import { guid } from "@/utils/ruoyi";
  6. const { proxy } = getCurrentInstance();
  7. const id = guid();
  8. const myChart = shallowRef("");
  9.  
  10. const props = defineProps({
  11. //刷新标志
  12. refresh: {
  13. type: [String, Number],
  14. default: 1,
  15. },
  16. //标题
  17. title: {
  18. type: String,
  19. default: "",
  20. },
  21. //数据
  22. data: {
  23. type: Object,
  24. default: {},
  25. },
  26. });
  27. watch(
  28. () => props.refresh,
  29. (value) => {
  30. //先销毁实例
  31. myChart.value && myChart.value.dispose();
  32. intChart();
  33. }
  34. );
  35.  
  36. //自适应
  37. function resizeTheChart() {
  38. if (myChart.value) {
  39. myChart.value.resize();
  40. }
  41. }
  42. function intChart() {
  43. myChart.value = proxy.echarts.init(document.getElementById(id));
  44. //获取湿度的最大值和最小值
  45. let shiDuMax = Math.max(...props.data.ydata2);
  46. let shiDuMin = Math.min(...props.data.ydata2);
  47. //温度的最大值和最小值
  48. let temMax = Math.max(...props.data.ydata1);
  49. let temMin = Math.min(...props.data.ydata1);
  50. // 绘制图表
  51. myChart.value.setOption({
  52. title: {
  53. text: "",
  54. },
  55. tooltip: {
  56. trigger: "axis",
  57. },
  58. grid: {
  59. left: "80px",
  60. right: "30px",
  61. top: "55px",
  62. bottom: "20px",
  63. },
  64. legend: {},
  65. toolbox: {
  66. show: false,
  67. feature: {
  68. dataZoom: {
  69. yAxisIndex: "none",
  70. },
  71. dataView: { readOnly: false },
  72. magicType: { type: ["line", "bar"] },
  73. restore: {},
  74. saveAsImage: {},
  75. },
  76. },
  77. xAxis: {
  78. type: "category",
  79. boundaryGap: false,
  80. data: props.data.xdata,
  81. axisLabel: {
  82. textStyle: {
  83. color: "#222",
  84. },
  85. },
  86. },
  87. yAxis: [
  88. {
  89. position: "left",
  90. type: "value",
  91. name: "温度°C",
  92. splitLine: {
  93. show: false,
  94. },
  95. nameGap: 20,
  96. max: parseInt(temMax * 1.1),
  97. min: parseInt(temMin * 0.8),
  98. nameTextStyle: {
  99. color: "#222",
  100. fontSize: 12,
  101. padding: [0, 0, 0, -35],
  102. },
  103. axisLabel: {
  104. textStyle: {
  105. color: "#222", //字体颜色
  106. fontSize: 12, //字体大小
  107. },
  108. },
  109. },
  110. {
  111. position: "left",
  112. offset: 45, //距离第一个Y轴50像素,注意grid: x=85,给第三个Y轴预留空间
  113. type: "value",
  114. name: "湿度%",
  115. min: parseInt(shiDuMin * 0.8),
  116. splitLine: {
  117. show: false,
  118. },
  119. nameGap: 20,
  120. nameTextStyle: {
  121. color: "#222",
  122. fontSize: 12,
  123. padding: [0, 0, 0, -35],
  124. },
  125. axisLabel: {
  126. textStyle: {
  127. color: "#222", //字体颜色
  128. fontSize: 12, //字体大小
  129. },
  130. },
  131. },
  132. {
  133. position: "right",
  134. type: "value",
  135. name: "降雨量mm",
  136. splitLine: {
  137. show: false,
  138. },
  139. nameGap: 20,
  140. nameTextStyle: {
  141. color: "#222",
  142. fontSize: 12,
  143. },
  144. axisLabel: {
  145. textStyle: {
  146. color: "#222", //字体颜色
  147. fontSize: 12, //字体大小
  148. },
  149. },
  150. },
  151. ],
  152. series: [
  153. {
  154. name: "温度",
  155. type: "line",
  156. data: props.data.ydata1,
  157. markPoint: {
  158. data: [
  159. { type: "max", name: "Max" },
  160. { type: "min", name: "Min" },
  161. ],
  162. },
  163.  
  164. yAxisIndex: 0,
  165. },
  166. {
  167. name: "湿度",
  168. type: "line",
  169. data: props.data.ydata2,
  170. yAxisIndex: 1,
  171. },
  172. {
  173. name: "降雨量",
  174. type: "line",
  175. data: props.data.ydata3,
  176. yAxisIndex: 2,
  177. },
  178. ],
  179. });
  180. }
  181. onMounted(() => {
  182. intChart();
  183. window.addEventListener("resize", resizeTheChart);
  184. });
  185. </script>