Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / RainfallEcharts.vue
@zhangqy zhangqy on 29 Nov 5 KB first commit
  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 { reactive, toRefs, onMounted, watch } from 'vue';
  8. export default {
  9. name: 'line-chart',
  10. props: {
  11. data: Object,
  12. refresh: Number,
  13. },
  14. setup(props) {
  15. const allData = reactive({
  16. series: [],
  17. legend: [],
  18. id: guid(),
  19. chart: null,
  20. });
  21. const resizeTheChart = () => {
  22. if (allData.chart) {
  23. allData.chart.resize();
  24. }
  25. };
  26.  
  27. const init = () => {
  28. let chartDom = echarts.init(document.getElementById(allData.id));
  29.  
  30. var shadowYData = [100, 100];
  31. var color = 'rgba(31,227,249,1)';
  32. var shadowColor = '#0b5767';
  33. var barWidth = 12;
  34.  
  35. var MaXmm = Math.max.apply(null, [...props.data.yAxis, ...props.data.yAxis2]);
  36.  
  37. var option;
  38. option = {
  39. // title: {
  40. // show: true, //显示策略,默认值true,可选为:true(显示) | false(隐藏)
  41. // text: '主标题主标题主标题主标题主标题主标题主标题', //主标题文本,'\n'指定换行
  42. // },
  43. color: ['#6a93f5', '#3fffc2'],
  44.  
  45. tooltip: {
  46. trigger: 'axis',
  47. formatter: params => {
  48. // console.log(params);
  49. var relVal = '' + params[0].name;
  50. for (var i = 0, l = params.length; i < l; i++) {
  51. if (params[i].seriesName) {
  52. let unit = params[i].seriesName == '小时雨量(mm)' ? 'mm' : 'mm';
  53. relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value + unit;
  54. }
  55. }
  56. return relVal;
  57. },
  58. },
  59. grid: {
  60. top: 50,
  61. bottom: 30,
  62. },
  63. legend: {
  64. show: false,
  65. x: 'right', //居右显示
  66. align: 'left', //图例控制在左边
  67. icon: 'circle',
  68. itemWidth: 15,
  69. itemHeight: 15,
  70. textStyle: {
  71. color: 'auto',
  72. rich: {
  73. another: {
  74. fontSize: 28,
  75. },
  76. },
  77. fontSize: 14,
  78. },
  79. },
  80. xAxis: [
  81. {
  82. type: 'category',
  83. axisLine: {
  84. show: false,
  85. lineStyle: {
  86. width: 2,
  87. color: '#58b2ed',
  88. },
  89. },
  90. splitLine: {
  91. show: false,
  92. },
  93. axisTick: {
  94. show: false,
  95. },
  96. axisLabel: {
  97. color: '#58b2ed',
  98. fontSize: 14,
  99. fontFamily: 'AlibabaPuHuiTi',
  100. },
  101. data: props.data.xAxis,
  102. },
  103. ],
  104. yAxis: [
  105. {
  106. name: '小时雨量(mm)',
  107. type: 'value',
  108. axisLabel: {
  109. color: '#6a93f5',
  110. show: true,
  111. },
  112. nameTextStyle: {
  113. color: '#6a93f5',
  114. },
  115. splitLine: {
  116. lineStyle: {
  117. type: 'dashed',
  118. color: '#6a93f5',
  119. },
  120. },
  121. alignTicks: true,
  122. min: 0,
  123. max: MaXmm,
  124. interval: Math.ceil(MaXmm / 5),
  125. },
  126. {
  127. name: '累计雨量(mm)',
  128. type: 'value',
  129. nameTextStyle: {
  130. color: '#3fffc2',
  131. },
  132. min: 0,
  133. max: MaXmm,
  134. interval: Math.ceil(MaXmm / 5),
  135. axisLabel: {
  136. show: true,
  137. color: '#3fffc2',
  138. },
  139. splitLine: {
  140. show: true,
  141. lineStyle: {
  142. color: '#3fffc2',
  143. type: 'dashed',
  144. },
  145. },
  146. alignTicks: true,
  147. },
  148. ],
  149. dataZoom: [
  150. {
  151. // show: true,
  152. show: false,
  153. height: 4,
  154. bottom: 18,
  155. start: 0,
  156. end: 100,
  157. handleSize: '100%',
  158. fillerColor: '#94FA41',
  159. borderColor: 'transparent',
  160. backgroundColor: 'rgba(148, 250, 65, 0.2)',
  161. handleStyle: {
  162. color: '#94FA41',
  163. },
  164. moveHandleSize: 0,
  165. textStyle: {
  166. color: '#fff',
  167. },
  168. },
  169. {
  170. type: 'inside',
  171. show: true,
  172. height: 15,
  173. start: 1,
  174. end: 35,
  175. },
  176. ],
  177. series: [
  178. {
  179. name: '小时雨量(mm)',
  180. type: 'bar',
  181. barWidth: barWidth,
  182. barGap: '10%', // Make series be overlap
  183. barCateGoryGap: '10%',
  184. itemStyle: {
  185. normal: {
  186. color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
  187. {
  188. offset: 0,
  189. color: 'rgba(106, 147, 245, 1)',
  190. },
  191. {
  192. offset: 1,
  193. color: 'rgba(106, 147, 245, 1)',
  194. },
  195. ]),
  196. },
  197. },
  198. data: props.data.yAxis,
  199. },
  200. {
  201. smooth: true, //变为曲线 默认false折线
  202. name: '累计雨量(mm)',
  203. type: 'line',
  204. data: props.data.yAxis2,
  205. yAxisIndex: 1,
  206. color: '#3fffc2',
  207. },
  208. ],
  209. };
  210. option && chartDom.setOption(option, true);
  211. allData.chart = chartDom;
  212. };
  213. watch(
  214. () => props.refresh,
  215. () => {
  216. if (allData.chartDom) {
  217. allData.chartDom.dispose();
  218. allData.chartDom = null;
  219. }
  220. setTimeout(() => {
  221. init();
  222. }, 0);
  223. }
  224. );
  225. onMounted(() => {
  226. init();
  227. window.addEventListener('resize', resizeTheChart);
  228. });
  229. return {
  230. ...toRefs(allData),
  231. resizeTheChart,
  232. init,
  233. };
  234. },
  235. };
  236. </script>