Newer
Older
DH_Apicture / src / views / pictureOnMap / page / WaterAssets / DrainageFacilitiesLeft / Rain / tiaoxuchiEcharts.vue
@zhangqy zhangqy on 29 Nov 5 KB first commit
  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: '8%',
  76. right: '4%',
  77. bottom: '0%',
  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. // interval: 0,
  89. formatter: function (params) {
  90. let one = params.substring(0, 3);
  91. let two = params.substring(3, 6);
  92. let three = params.substring(6, 8);
  93. let four = params.substring(8) ? '...' : '';
  94.  
  95. let newParamsName = one + '\n' + two + '\n' + three + four;
  96. return newParamsName;
  97. },
  98. },
  99. axisLine: {
  100. show: true,
  101. lineStyle: {
  102. show: true, //是否显示坐标轴轴线,
  103. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  104. width: 1, //x轴粗细
  105. },
  106. },
  107. axisTick: {
  108. show: false, //是否显示刻度
  109. },
  110. },
  111. yAxis: {
  112. type: 'value',
  113. name: props.typeName,
  114. nameLocation: 'start',
  115. nameTextStyle: {
  116. color: '#AED2E0',
  117. padding: [3, 0, 0, -50], // 四个数字分别为上右下左与原位置距离
  118. },
  119. axisLabel: {
  120. show: true,
  121. color: '#AED2E0',
  122. formatter: function (value) {
  123. return value.toFixed(1); // 显示小数点后两位
  124. },
  125. },
  126. splitLine: {
  127. show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
  128. type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
  129. lineStyle: {
  130. color: 'rgba(255,255,255,0.2)',
  131. width: 1, // 设置分割线的粗细为2
  132. },
  133. },
  134. axisLine: {
  135. show: true,
  136. lineStyle: {
  137. show: true, //是否显示坐标轴轴线,
  138. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  139. width: 1, //x轴粗细
  140. },
  141. },
  142. },
  143. series: [
  144. {
  145. itemStyle: {
  146. color: 'rgba(119, 201, 235,1)',
  147. },
  148. name: props.typeName,
  149. data: props.YAxis,
  150. type: 'line',
  151. smooth: true,
  152. lineStyle: {
  153. // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
  154. // color: "#CB2F0C",
  155. color: {
  156. type: 'linear',
  157. x: 0,
  158. y: 0,
  159. x2: 1,
  160. y2: 0,
  161. colorStops: [
  162. {
  163. offset: 0,
  164. color: 'rgba(119, 201, 235, 1)', // 0% 处的颜色
  165. },
  166. {
  167. offset: 1,
  168. color: 'rgba(119, 201, 235, 1)', // 0% 处的颜色
  169. },
  170. ],
  171. globalCoord: false, // 缺省为 false
  172. },
  173. width: 2,
  174. },
  175. areaStyle: {
  176. normal: {
  177. color: {
  178. x: 0,
  179. y: 0,
  180. x2: 0,
  181. y2: 1,
  182. colorStops: [
  183. {
  184. offset: 0,
  185. color: 'rgba(110, 162, 251,1)',
  186. },
  187. {
  188. offset: 0.13,
  189. color: 'rgba(7, 81, 188,1)',
  190. },
  191. {
  192. offset: 0.16,
  193. color: 'rgba(7, 81, 188,1)',
  194. },
  195. {
  196. offset: 0.2,
  197. color: 'rgba(27, 91, 181,1)',
  198. },
  199. {
  200. offset: 0.99,
  201. color: 'rgba(119, 201, 235,0)',
  202. },
  203. ],
  204. globalCoord: false, // 缺省为 false
  205. },
  206. },
  207. },
  208. },
  209. ],
  210. };
  211.  
  212. option && myChart.value.setOption(option);
  213. }
  214.  
  215. function resizeTheChart() {
  216. if (myChart.value) {
  217. myChart.value.resize();
  218. }
  219. }
  220. onMounted(() => {
  221. nextTick(() => {
  222. init();
  223. window.addEventListener('resize', resizeTheChart);
  224. });
  225. });
  226. </script>