Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / shuikujianceEcharts.vue
@zhangqy zhangqy on 29 Nov 7 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. DataName: {
  30. type: String,
  31. },
  32. //类型
  33. typeName: {
  34. type: String,
  35. default: '',
  36. },
  37. yAxisarr: {
  38. type: Array,
  39. default: () => [],
  40. },
  41. });
  42.  
  43. watch(
  44. () => props.refresh,
  45. value => {
  46. console.log('???????');
  47. //先销毁实例
  48. myChart.value && myChart.value.dispose();
  49. init();
  50. },
  51. {
  52. deep: true,
  53. }
  54. );
  55.  
  56. function init() {
  57. let colorarr = ['#409eff', '#0ba47b', '#a34a5e', '#dac16f', '#ff7f50', '#ff69b4', '#87ceeb', '#4682b4', '#98fb98'];
  58. let rightnumber = props.yAxisarr.length * '2.5' + '%';
  59. let newarr = [];
  60. let marklinedata = [];
  61. let maxArr = [];
  62. let minArr = [];
  63. let finyasx = [
  64. {
  65. show: false,
  66. inverse: true, //控制x轴在上方
  67. name: props.typeName,
  68. type: 'value',
  69. axisLabel: {
  70. show: true,
  71. color: '#409eff',
  72. },
  73. axisLine: {
  74. lineStyle: {
  75. color: '#409eff',
  76. },
  77. },
  78. splitLine: {
  79. show: true,
  80. lineStyle: {
  81. color: 'rgba(61,91,98,0.8)',
  82. },
  83. },
  84. // min: 0,
  85. },
  86. ];
  87.  
  88. let finxse = [
  89. // {
  90. // name: props.typeName,
  91. // type: 'bar',
  92. // barWidth: 12,
  93. // itemStyle: {
  94. // borderRadius: [0, 0, 6, 6],
  95. // color: function () {
  96. // return new echarts.graphic.LinearGradient(
  97. // 0,
  98. // 1,
  99. // 0,
  100. // 0,
  101. // [
  102. // {
  103. // offset: 0.1,
  104. // color: '#409eff', // 0% 处的颜色
  105. // },
  106. // {
  107. // offset: 0.9,
  108. // color: '#013068', // 100% 处的颜色
  109. // },
  110. // ],
  111. // false
  112. // );
  113. // },
  114. // },
  115. // // showBackground: true,
  116. // backgroundStyle: {
  117. // color: 'transparent',
  118. // borderWidth: 1,
  119. // borderColor: 'rgba(148, 250, 65, 0.2)',
  120. // },
  121. // data: props.YAxis,
  122. // },
  123. ];
  124.  
  125. console.log('获取的Y轴的数据', props.yAxisarr);
  126.  
  127. // 处理多个y轴遍历展示
  128. if (props.yAxisarr) {
  129. props.yAxisarr.map((item, index) => {
  130. let arr = [];
  131. let markLineArr = [];
  132. item.cordonLineList.map(p => {
  133. markLineArr.push(Number(p.lineValue));
  134. arr.push({
  135. silent: false, //鼠标悬停事件 true没有,false有
  136. lineStyle: {
  137. //警戒线的样式 ,虚实 颜色
  138. type: 'dashed',
  139. color: p.lineColor,
  140. },
  141. name: p.lineName,
  142. yAxis: Number(p.lineValue),
  143. label: {
  144. formatter: `${p.lineValue}-${p.lineName}`,
  145. color: p.lineColor,
  146. },
  147. });
  148. });
  149.  
  150. item['maxValue'] = Math.max.apply(null, [...item.datas, ...markLineArr]);
  151. item['minValue'] = Math.min.apply(null, [...item.datas, ...markLineArr]);
  152.  
  153. marklinedata.push(arr);
  154. });
  155.  
  156. console.log('marklinedata', marklinedata);
  157. props.yAxisarr.map((item, index) => {
  158. let obj = {
  159. name: item.dataName,
  160. type: 'value',
  161. axisLabel: {
  162. show: true,
  163. color: colorarr[index],
  164. },
  165. axisLine: {
  166. show: true,
  167. lineStyle: {
  168. color: colorarr[index],
  169. },
  170. },
  171. splitLine: {
  172. show: true,
  173. lineStyle: {
  174. color: 'rgba(61,91,98,0.8)',
  175. },
  176. },
  177. min: Math.floor(item.minValue * 0.95),
  178. max: item.maxValue,
  179. };
  180.  
  181. if (index == 0) {
  182. obj.position = 'left';
  183. } else if (index == 1) {
  184. obj.position = 'right';
  185. } else {
  186. obj.position = 'right';
  187. obj.offset = (index - 1.1) * 55;
  188. // obj.show = false;
  189. }
  190.  
  191. finyasx.push(obj);
  192.  
  193. finxse.push({
  194. smooth: true, //变为曲线 默认false折线
  195. name: item.dataName,
  196. type: 'line',
  197. yAxisIndex: index + 1,
  198. data: item.datas,
  199. markLine: {
  200. symbol: 'none', //去掉警戒线最后面的箭头
  201. label: {
  202. position: 'middle', //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
  203. },
  204. data: marklinedata[index],
  205. },
  206. });
  207. });
  208. }
  209.  
  210. myChart.value = echarts.init(document.getElementById(id));
  211. let option = {
  212. color: colorarr,
  213. legend: {
  214. show: true,
  215. orient: 'horizontal', //horizontal横向 vertical 纵向
  216. type: 'scroll',
  217. x: 'center', //居右显示
  218. align: 'left', //图例控制在左边
  219. icon: 'circle',
  220. itemWidth: 15,
  221. itemHeight: 15,
  222. itemHeight: 15,
  223. textStyle: {
  224. color: 'auto',
  225. rich: {
  226. another: {
  227. fontSize: 28,
  228. },
  229. },
  230. fontSize: 14,
  231. },
  232. },
  233. tooltip: {
  234. trigger: 'axis',
  235. // formatter: "{b}:{c}件",
  236. // formatter: "{b}:{c}",
  237. feature: {
  238. mark: { show: true },
  239. dataView: { show: true, readOnly: false },
  240. magicType: { show: true, type: ['line', 'bar'] },
  241. restore: { show: true },
  242. saveAsImage: { show: true },
  243. },
  244. axisPointer: {
  245. type: 'cross',
  246. textStyle: {
  247. color: '#fff',
  248. },
  249. },
  250. },
  251. grid: {
  252. top: '18%',
  253. left: '5%',
  254. right: rightnumber,
  255. // right: '5%',
  256. bottom: '15%',
  257. containLabel: true,
  258. },
  259. xAxis: [
  260. {
  261. type: 'category',
  262. data: props.XAxis,
  263. axisPointer: {
  264. type: 'shadow',
  265. },
  266. axisLabel: {
  267. show: true,
  268. color: '#fff',
  269. },
  270. axisLine: {
  271. lineStyle: {
  272. // color: '#3398DB',
  273. },
  274. },
  275. },
  276. ],
  277. yAxis: finyasx,
  278. dataZoom: [
  279. {
  280. show: true,
  281. // show: false,
  282. height: 4,
  283. bottom: 18,
  284. start: 0,
  285. end: 100,
  286. handleSize: '100%',
  287. fillerColor: '#94FA41',
  288. borderColor: 'transparent',
  289. backgroundColor: 'rgba(148, 250, 65, 0.2)',
  290. handleStyle: {
  291. color: '#94FA41',
  292. },
  293. moveHandleSize: 0,
  294. textStyle: {
  295. color: '#fff',
  296. },
  297. },
  298. {
  299. type: 'inside',
  300. show: true,
  301. height: 15,
  302. start: 1,
  303. end: 35,
  304. },
  305. ],
  306. series: finxse,
  307. };
  308.  
  309. option && myChart.value.setOption(option);
  310. }
  311.  
  312. function resizeTheChart() {
  313. if (myChart.value) {
  314. myChart.value.resize();
  315. }
  316. }
  317. onMounted(() => {
  318. nextTick(() => {
  319. init();
  320. window.addEventListener('resize', resizeTheChart);
  321. });
  322. });
  323. </script>