Newer
Older
KaiFengPC / src / views / sponeScreen / Echarts / DEchart.vue
@zhangdeliang zhangdeliang on 22 Oct 4 KB update
  1. <template>
  2. <div class="line" v-loading="loading">
  3. <div class="echarts" ref="echarts"></div>
  4. <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
  5. </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
  10. const props = defineProps({
  11. curType: {
  12. type: String,
  13. default: '',
  14. },
  15. //站点code
  16. stCode: {
  17. type: String,
  18. default: '',
  19. },
  20. rainTime: {
  21. type: String,
  22. default: '',
  23. },
  24. });
  25. const { proxy } = getCurrentInstance();
  26. const loading = ref(false);
  27. const myChart = shallowRef(null);
  28. const echartData = {
  29. xAxis: [],
  30. yAxis: [],
  31. };
  32.  
  33. const initEcharts = () => {
  34. myChart.value && myChart.value.clear();
  35. myChart.value = proxy.echarts.init(proxy.$refs.echarts);
  36. // 绘制图表
  37. myChart.value.setOption({
  38. tooltip: {
  39. trigger: 'axis',
  40. axisPointer: {
  41. type: 'shadow',
  42. },
  43. // formatter: params => {
  44. // let str = '';
  45. // params.forEach(item => {
  46. // str += `
  47. // <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
  48. // <div style="display: flex;align-items: center;">
  49. // <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
  50. // <span>${item.seriesName}</span>
  51. // </div>
  52. // <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
  53. // </div>
  54. // `;
  55. // });
  56. // return `
  57. // <div style="margin: 0px 0 0;line-height:1;width: 180px;">
  58. // <div>${params[0].axisValue}</div>
  59. // ${str}
  60. // </div>
  61. // `;
  62. // },
  63. },
  64. grid: {
  65. left: '12%',
  66. right: '8%',
  67. top: '24%',
  68. bottom: '16%',
  69. },
  70. xAxis: {
  71. type: 'category',
  72. data: echartData.xAxis,
  73. axisLabel: {
  74. color: '#D8F4FF',
  75. },
  76. axisLine: {
  77. lineStyle: {
  78. color: '#53D8FB',
  79. },
  80. },
  81. axisTick: {
  82. show: false,
  83. },
  84. },
  85. yAxis: [
  86. {
  87. name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
  88. type: 'value',
  89. nameTextStyle: {
  90. color: '#D1DEEE',
  91. },
  92. axisLabel: {
  93. color: '#fff',
  94. fontSize: 12,
  95. },
  96. splitLine: {
  97. show: true,
  98. lineStyle: {
  99. color: '#005CBA',
  100. type: 'dashed',
  101. },
  102. },
  103. axisLine: {
  104. lineStyle: {
  105. color: '#005CBA',
  106. width: 1,
  107. type: 'dashed',
  108. },
  109. show: true,
  110. },
  111. splitLine: {
  112. lineStyle: {
  113. color: '#D1DEEE',
  114. type: 'dashed',
  115. color: '#53D8FB',
  116. },
  117. },
  118. nameTextStyle: {
  119. color: '#fff',
  120. },
  121. },
  122. ],
  123. series: [
  124. {
  125. name: '降雨量',
  126. type: 'bar',
  127. itemStyle: {
  128. color: {
  129. x: 0,
  130. y: 0,
  131. x2: 0,
  132. y2: 1,
  133. type: 'linear',
  134. global: false,
  135. colorStops: [
  136. {
  137. offset: 0,
  138. color: '#0b9eff',
  139. },
  140. {
  141. offset: 1,
  142. color: '#63caff',
  143. },
  144. ],
  145. },
  146. },
  147. data: echartData.yAxis,
  148. },
  149. ],
  150. });
  151. };
  152.  
  153. const getData = async () => {
  154. console.log(props, '1`');
  155. if (props.curType == 'day') return;
  156. loading.value = true;
  157. let rainTime = '';
  158. if (props.curType === 'month') {
  159. rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
  160. } else if (props.curType === 'year') {
  161. rainTime = proxy.moment(props.rainTime).format('YYYY');
  162. }
  163. const res = await rainRainlist({
  164. rainTime: rainTime,
  165. timeType: props.curType,
  166. stCode: props.stCode,
  167. });
  168. loading.value = false;
  169. if (res?.code !== 200) return;
  170. if (res.data) {
  171. echartData.xAxis = res.data.map(item => item.rainTime);
  172. echartData.yAxis = res.data.map(item => item.rainCumulative);
  173. }
  174. initEcharts();
  175. };
  176. watch(
  177. () => props.curType,
  178. value => {
  179. getData();
  180. },
  181. {
  182. deep: true,
  183. immediate: true,
  184. }
  185. );
  186. watch(
  187. () => props.stCode,
  188. value => {
  189. getData();
  190. },
  191. {
  192. deep: true,
  193. // immediate: true
  194. }
  195. );
  196. watch(
  197. () => props.rainTime,
  198. value => {
  199. getData();
  200. },
  201. {
  202. deep: true,
  203. // immediate: true
  204. }
  205. );
  206. onMounted(() => {
  207. window.addEventListener('resize', () => {
  208. myChart.value && myChart.value.resize();
  209. });
  210. });
  211. </script>
  212.  
  213. <style lang="scss" scoped>
  214. .line {
  215. // padding-top: 10px;
  216. height: 100%;
  217. position: relative;
  218.  
  219. .echarts {
  220. height: 100%;
  221. }
  222.  
  223. .xAxisUnit {
  224. position: absolute;
  225. bottom: 8px;
  226. right: 20px;
  227. color: #d1deee;
  228. font-size: 12px;
  229. }
  230. }
  231. </style>