Newer
Older
KaiFengPC / src / views / sponeScreen / Echarts / RainfallLegend.vue
@zhangdeliang zhangdeliang on 27 Aug 4 KB update
  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. var option;
  30. option = {
  31. // backgroundColor: '#0e2147',
  32. color: ['#3FFFC2'],
  33. grid: {
  34. // left: '5%',
  35. top: '10%',
  36. bottom: '20%',
  37. right: '5%',
  38. },
  39. tooltip: {
  40. trigger: 'axis',
  41. formatter: params => {
  42. // console.log(params);
  43. var relVal = '' + params[0].name;
  44. for (var i = 0, l = params.length; i < l; i++) {
  45. if (params[i].seriesName) {
  46. let unit = params[i].seriesName == 'K线性拟合' ? 'mm' : '毫米';
  47. relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
  48. }
  49. }
  50. return relVal;
  51. },
  52. },
  53. legend: {
  54. // type: 'scroll',
  55. data: [],
  56. itemWidth: 18,
  57. itemHeight: 12,
  58. textStyle: {
  59. color: '#00ffff',
  60. fontSize: 14,
  61. },
  62. },
  63. yAxis: [
  64. {
  65. type: 'value',
  66. position: 'left',
  67. nameTextStyle: {
  68. color: '#3FFFC2',
  69. },
  70. splitLine: {
  71. lineStyle: {
  72. type: 'dashed',
  73. color: 'rgba(135,140,147,0.8)',
  74. },
  75. },
  76. axisLine: {
  77. show: false,
  78. },
  79. axisTick: {
  80. show: false,
  81. },
  82. axisLabel: {
  83. formatter: '{value}',
  84.  
  85. color: '#fff',
  86. fontSize: 14,
  87. },
  88. },
  89. ],
  90. xAxis: [
  91. {
  92. type: 'category',
  93. axisTick: {
  94. show: false,
  95. },
  96. axisLine: {
  97. show: false,
  98. lineStyle: {
  99. color: '#3FFFC2',
  100. },
  101. },
  102. axisLabel: {
  103. inside: false,
  104. textStyle: {
  105. color: '#fff', // x轴颜色
  106. fontWeight: 'normal',
  107. fontSize: '14',
  108. lineHeight: 22,
  109. },
  110. },
  111. data: props.data.XName,
  112. },
  113. ],
  114. series: [
  115. {
  116. symbolSize: 10,
  117. name: '降雨量',
  118. type: 'line',
  119. animationDuration: 8000, // 动画持续时间
  120. animationEasing: 'cubicInOut',
  121. data: props.data.data1,
  122. itemStyle: {
  123. borderWidth: 5,
  124. // color: '#0696f9',
  125. },
  126. },
  127. {
  128. type: 'lines',
  129. coordinateSystem: 'cartesian2d',
  130. symbolSize: 30,
  131. polyline: true,
  132.  
  133. effect: {
  134. show: true,
  135. trailLength: 0,
  136. symbol: 'arrow',
  137. period: 25, //光点滑动速度
  138. symbolSize: 15,
  139. },
  140.  
  141. lineStyle: {
  142. width: 1,
  143. opacity: 0.6,
  144. curveness: 0.2,
  145. },
  146. data: props.data.data,
  147. },
  148. ],
  149. };
  150. option && chartDom.setOption(option, true);
  151. allData.chart = chartDom;
  152. };
  153. watch(
  154. () => props.refresh,
  155. () => {
  156. if (allData.chartDom) {
  157. allData.chartDom.dispose();
  158. allData.chartDom = null;
  159. }
  160. setTimeout(() => {
  161. init();
  162. }, 0);
  163. }
  164. );
  165. onMounted(() => {
  166. init();
  167. window.addEventListener('resize', resizeTheChart);
  168. });
  169. return {
  170. ...toRefs(allData),
  171. resizeTheChart,
  172. init,
  173. };
  174. },
  175. };
  176. </script>