Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / components / shuiliang.vue
@ZZJ ZZJ on 19 Dec 5 KB 单位更改
  1. <template>
  2. <!-- 天气温度平滑折线图 -->
  3. <div :id="id" style="width: 100%; height: 100%"></div>
  4. </template>
  5. <script setup>
  6. import { guid } from '@/utils/ruoyi';
  7. import { nextTick } from 'vue';
  8. const id = guid();
  9. const myChart = shallowRef('');
  10. import * as echarts from 'echarts';
  11.  
  12. const props = defineProps({
  13. //刷新标志
  14. refresh: {
  15. type: [String, Number],
  16. default: 1,
  17. },
  18. //x轴数据
  19. XAxis: {
  20. type: Array,
  21. default: () => [],
  22. },
  23. //y轴数据
  24. YAxis: {
  25. type: Array,
  26. default: () => [],
  27. },
  28. //类型
  29. typeName: {
  30. type: String,
  31. default: '',
  32. },
  33. });
  34.  
  35. watch(
  36. () => props.refresh,
  37. value => {
  38. //先销毁实例
  39. myChart.value && myChart.value.dispose();
  40. init();
  41. },
  42. {
  43. deep: true,
  44. }
  45. );
  46.  
  47. function init() {
  48. myChart.value = echarts.init(document.getElementById(id));
  49.  
  50. let option = {
  51. tooltip: {
  52. trigger: 'axis',
  53. backgroundColor: '#004284',
  54. borderColor: '#0B9BFF',
  55. borderRadius: 6, // 设置圆角大小
  56. textStyle: {
  57. // 字体颜色
  58. color: 'white',
  59. // 字体大小
  60. fontSize: 14,
  61. },
  62. formatter: params => {
  63. // console.log(params);
  64. var relVal = '' + params[0].name;
  65. for (var i = 0, l = params.length; i < l; i++) {
  66. if (params[i].seriesName) {
  67. let unit = '';
  68. relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
  69. }
  70. }
  71. return relVal;
  72. },
  73. },
  74. grid: {
  75. left: '10%',
  76. right: '4%',
  77. bottom: '10%',
  78. top: '8%',
  79. containLabel: true,
  80. },
  81. xAxis: {
  82. boundaryGap: true,
  83. type: 'category',
  84. data: props.XAxis,
  85. axisLabel: {
  86. show: true,
  87. color: '#fff',
  88. formatter: function (params) {
  89. let newParamsName = params.substring(10, 16);
  90. return newParamsName;
  91. },
  92. },
  93. axisLine: {
  94. show: true,
  95. lineStyle: {
  96. show: true, //是否显示坐标轴轴线,
  97. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  98. width: 1, //x轴粗细
  99. },
  100. },
  101. axisTick: {
  102. show: false, //是否显示刻度
  103. },
  104. },
  105. yAxis: {
  106. type: 'value',
  107. name: props.typeName,
  108. nameLocation: 'start',
  109. nameTextStyle: {
  110. color: '#AED2E0',
  111. padding: [-8, 0, 0, -70], // 四个数字分别为上右下左与原位置距离
  112. },
  113. axisLabel: {
  114. show: true,
  115. color: '#AED2E0',
  116. formatter: function (value) {
  117. return value.toFixed(1); // 显示小数点后两位
  118. },
  119. },
  120. splitLine: {
  121. show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
  122. type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
  123. lineStyle: {
  124. color: 'rgba(255,255,255,0.2)',
  125. width: 1, // 设置分割线的粗细为2
  126. },
  127. },
  128. axisLine: {
  129. show: true,
  130. lineStyle: {
  131. show: true, //是否显示坐标轴轴线,
  132. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  133. width: 1, //x轴粗细
  134. },
  135. },
  136. },
  137. series: [
  138. {
  139. itemStyle: {
  140. color: 'rgba(119, 201, 235,1)',
  141. },
  142. name: props.typeName,
  143. data: props.YAxis,
  144. type: 'line',
  145. lineStyle: {
  146. // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
  147. // color: "#CB2F0C",
  148. color: {
  149. type: 'linear',
  150. x: 0,
  151. y: 0,
  152. x2: 1,
  153. y2: 0,
  154. colorStops: [
  155. {
  156. offset: 0,
  157. color: 'rgba(119, 201, 235, 1)', // 0% 处的颜色
  158. },
  159. {
  160. offset: 1,
  161. color: 'rgba(119, 201, 235, 1)', // 0% 处的颜色
  162. },
  163. ],
  164. globalCoord: false, // 缺省为 false
  165. },
  166. width: 2,
  167. },
  168. areaStyle: {
  169. normal: {
  170. color: {
  171. x: 0,
  172. y: 0,
  173. x2: 0,
  174. y2: 1,
  175. colorStops: [
  176. {
  177. offset: 0,
  178. color: 'rgba(110, 162, 251,1)',
  179. },
  180. {
  181. offset: 0.13,
  182. color: 'rgba(7, 81, 188,1)',
  183. },
  184. {
  185. offset: 0.16,
  186. color: 'rgba(7, 81, 188,1)',
  187. },
  188. {
  189. offset: 0.2,
  190. color: 'rgba(27, 91, 181,1)',
  191. },
  192. {
  193. offset: 0.99,
  194. color: 'rgba(119, 201, 235,0)',
  195. },
  196. ],
  197. globalCoord: false, // 缺省为 false
  198. },
  199. },
  200. },
  201. },
  202. ],
  203. };
  204.  
  205. option && myChart.value.setOption(option);
  206. }
  207.  
  208. function resizeTheChart() {
  209. if (myChart.value) {
  210. myChart.value.resize();
  211. }
  212. }
  213. onMounted(() => {
  214. nextTick(() => {
  215. init();
  216. window.addEventListener('resize', resizeTheChart);
  217. });
  218. });
  219. </script>