Newer
Older
KaiFengPC / src / views / sponeScreen / Echarts / AssessmentjsEcharts.vue
@zhangdeliang zhangdeliang on 5 Dec 5 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, onUnmounted } 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. timer: null,
  21. anIndex: 0,
  22. });
  23. const resizeTheChart = () => {
  24. if (allData.chart) {
  25. allData.chart.resize();
  26. }
  27. };
  28.  
  29. const init = () => {
  30. let markLinedata = [];
  31. if (props.data.controlMarkLine.length) {
  32. props.data.controlMarkLine.map(item => {
  33. let newitem = {
  34. silent: true, //鼠标悬停事件 true没有,false有
  35. lineStyle: {
  36. //警戒线的样式 ,虚实 颜色
  37. type: 'solid',
  38. color: item.color,
  39. opacity: item.Opacity,
  40. width: 2,
  41. },
  42. yAxis: item.value,
  43. label: {
  44. formatter: `${item.typeName}:${item.value}` + '(m)',
  45. color: item.color,
  46. },
  47. };
  48. markLinedata.push(newitem);
  49. });
  50. }
  51. let chartDom = echarts.init(document.getElementById(allData.id));
  52. var option;
  53. option = {
  54. color: ['#3FFFC2', '#FFF21C', 'orange'],
  55. tooltip: {
  56. trigger: 'axis',
  57. },
  58. grid: {
  59. top: 40,
  60. bottom: 30,
  61. },
  62. legend: {
  63. // data: ['降雨量(mm)', '水深(m)'],
  64. textStyle: {
  65. color: '#fff',
  66. },
  67. },
  68. dataZoom: [{ type: 'inside', startValue: props.data.xAxis[props.data.xAxis - 48] }],
  69. xAxis: [
  70. {
  71. type: 'category',
  72. splitLine: {
  73. show: false,
  74. },
  75. axisTick: {
  76. show: false,
  77. },
  78. axisLabel: {
  79. color: 'rgba(255,255,255,1)',
  80. fontSize: 14,
  81. fontFamily: 'AlibabaPuHuiTi',
  82. },
  83. data: props.data.xAxis,
  84. },
  85. ],
  86. yAxis: [
  87. {
  88. name: '降雨量(mm)',
  89. type: 'value',
  90. inverse: true,
  91. nameLocation: 'start', // 坐标轴名称显示位置
  92. axisLabel: {
  93. color: '#fff',
  94. show: true,
  95. },
  96. nameTextStyle: {
  97. color: '#fff',
  98. },
  99. splitLine: {
  100. lineStyle: {
  101. type: 'dashed',
  102. color: '#1D5D81',
  103. },
  104. },
  105. max: Math.max(...props.data.yAxis) + 0.5,
  106. },
  107. {
  108. name: '水深(m)',
  109. max: markLinedata.length > 0 ? Number(markLinedata[0].yAxis) + 0.3 : 3,
  110. type: 'value',
  111. inverse: false,
  112. nameLocation: 'end', // 坐标轴名称显示位置
  113. nameTextStyle: { color: '#FFF21C' },
  114. axisLabel: { show: true, color: '#FFF21C' },
  115. splitLine: {
  116. lineStyle: {
  117. color: '#1D5D81',
  118. type: 'dashed',
  119. },
  120. },
  121. },
  122. ],
  123. series: [
  124. {
  125. name: '降雨量',
  126. type: 'bar',
  127. barGap: '10%', // Make series be overlap
  128. barCateGoryGap: '10%',
  129. itemStyle: {
  130. color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
  131. { offset: 0, color: 'rgba(24, 255, 255, 1)' },
  132. { offset: 1, color: 'rgba(188, 255, 255, 1)' },
  133. ]),
  134. },
  135. yAxisIndex: 0,
  136. data: props.data.yAxis,
  137. },
  138. {
  139. smooth: true, //变为曲线 默认false折线
  140. name: '水深',
  141. type: 'line',
  142. data: props.data.yAxis2,
  143. yAxisIndex: 1,
  144. color: '#FFF21C',
  145. markLine: {
  146. // symbol: 'none', //去掉警戒线最后面的箭头
  147. label: {
  148. position: 'middle', //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
  149. },
  150. data: markLinedata,
  151. },
  152. },
  153. ],
  154. };
  155. option && chartDom.setOption(option, true);
  156. allData.chart = chartDom;
  157. animateChart(); // echarts动画
  158. };
  159. watch(
  160. () => props.refresh,
  161. () => {
  162. if (allData.chart) {
  163. allData.chart.dispose();
  164. allData.chart = null;
  165. }
  166. if (allData.timer) clearInterval(allData.timer);
  167. setTimeout(() => {
  168. init();
  169. allData.anIndex = 0;
  170. }, 0);
  171. }
  172. );
  173. // echarts动画
  174. function animateChart() {
  175. let length = props.data.xAxis.length;
  176. allData.timer = setInterval(() => {
  177. allData.anIndex++;
  178. if (allData.anIndex == length) allData.anIndex = 0;
  179. allData.chart.dispatchAction({
  180. type: 'showTip',
  181. seriesIndex: 0,
  182. dataIndex: allData.anIndex,
  183. });
  184. }, 2000);
  185. }
  186. onMounted(() => {
  187. init();
  188. window.addEventListener('resize', resizeTheChart);
  189. });
  190. onUnmounted(() => {
  191. if (allData.timer) clearInterval(allData.timer);
  192. });
  193. return {
  194. ...toRefs(allData),
  195. resizeTheChart,
  196. init,
  197. };
  198. },
  199. };
  200. </script>