Newer
Older
DH_Apicture / src / views / pictureOnMap / page / WaterAssets / DrainageFacilitiesLeft / Rain / fenliujinEcharts.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. });
  38.  
  39. watch(
  40. () => props.refresh,
  41. value => {
  42. //先销毁实例
  43. myChart.value && myChart.value.dispose();
  44. init();
  45. },
  46. {
  47. deep: true,
  48. }
  49. );
  50.  
  51. function init() {
  52. myChart.value = echarts.init(document.getElementById(id));
  53.  
  54. let barWidth = 15;
  55.  
  56. let option = {
  57. color: ['rgba(96, 203, 248,1)', 'rgba(96, 248, 221,1)'],
  58. legend: {
  59. selectedMode: false,
  60. itemStyle: {
  61. color: 'inherit',
  62. },
  63. textStyle: {
  64. // color: "auto"
  65. color: '#fff',
  66. },
  67. itemWidth: 15,
  68. itemHeight: 15,
  69. },
  70. tooltip: {
  71. trigger: 'axis',
  72. backgroundColor: '#004284',
  73. borderColor: '#0B9BFF',
  74. borderRadius: 6, // 设置圆角大小
  75. textStyle: {
  76. // 字体颜色
  77. color: 'white',
  78. // 字体大小
  79. fontSize: 14,
  80. },
  81. formatter: params => {
  82. // console.log(params);
  83. var relVal = '' + params[0].name;
  84. for (var i = 0, l = params.length; i < l; i++) {
  85. if (params[i].seriesName) {
  86. let unit = 'm';
  87. relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
  88. }
  89. }
  90. return relVal;
  91. },
  92. },
  93. grid: {
  94. left: '5%',
  95. right: '4%',
  96. bottom: '3%',
  97. top: '18%',
  98. containLabel: true,
  99. },
  100. xAxis: {
  101. boundaryGap: true,
  102. type: 'category',
  103. data: props.XAxis,
  104. axisLabel: {
  105. show: true,
  106. color: '#fff',
  107. },
  108. axisLine: {
  109. show: true,
  110. lineStyle: {
  111. show: true, //是否显示坐标轴轴线,
  112. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  113. width: 1, //x轴粗细
  114. },
  115. },
  116. axisTick: {
  117. show: false, //是否显示刻度
  118. },
  119. },
  120. yAxis: {
  121. type: 'value',
  122. name: props.typeName,
  123. nameLocation: 'start',
  124. nameTextStyle: {
  125. color: '#AED2E0',
  126. padding: [-5, 30, 0, 0], // 四个数字分别为上右下左与原位置距离
  127. },
  128. axisLabel: {
  129. show: true,
  130. color: '#AED2E0',
  131. formatter: function (value) {
  132. return value.toFixed(1); // 显示小数点后两位
  133. },
  134. },
  135. splitLine: {
  136. show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
  137. type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
  138. lineStyle: {
  139. color: 'rgba(255,255,255,0.2)',
  140. width: 1, // 设置分割线的粗细为2
  141. },
  142. },
  143. axisLine: {
  144. show: true,
  145. lineStyle: {
  146. show: true, //是否显示坐标轴轴线,
  147. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  148. width: 1, //x轴粗细
  149. },
  150. },
  151. },
  152. series: [
  153. {
  154. name: props.YAxis[0] && props.YAxis[0].name,
  155. type: 'bar',
  156. barWidth: barWidth,
  157. itemStyle: {
  158. // borderRadius: [6, 6, 0, 0],
  159. color: function () {
  160. return new echarts.graphic.LinearGradient(
  161. 0,
  162. 1,
  163. 0,
  164. 0,
  165. [
  166. {
  167. offset: 0,
  168. color: 'rgba(96, 203, 248,1)',
  169. },
  170. {
  171. offset: 1,
  172. color: 'rgba(96, 203, 248,0.1)',
  173. },
  174. ],
  175. false
  176. );
  177. },
  178. },
  179. // showBackground: true,
  180. backgroundStyle: {
  181. color: 'transparent',
  182. borderWidth: 1,
  183. borderColor: 'rgba(148, 250, 65, 0.2)',
  184. },
  185. data: props.YAxis[0] && props.YAxis[0].value,
  186. },
  187. {
  188. data: props.YAxis[0] && props.YAxis[0].value,
  189. name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
  190. type: 'pictorialBar', // 系列类型
  191. symbolSize: [15, 2], // 标记的大小
  192. symbolOffset: [-8.5, 0], // 标记相对于原本位置的偏移
  193. symbolPosition: 'end', // 图形的定位位置。可取值:start、end、center
  194. // 图例的图形样式
  195. itemStyle: {
  196. color: {
  197. type: 'linear',
  198. x: 0,
  199. y: 0,
  200. x2: 1,
  201. y2: 0,
  202. colorStops: [
  203. {
  204. offset: 0,
  205. color: 'rgba(96, 203, 248,1)', // 0% 处的颜色
  206. },
  207. {
  208. offset: 1,
  209. color: 'rgba(96, 203, 248,1)', // 100% 处的颜色
  210. },
  211. ],
  212. },
  213. },
  214. z: 100, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
  215. },
  216. {
  217. name: props.YAxis[1] && props.YAxis[1].name,
  218. type: 'bar',
  219. barWidth: barWidth,
  220. itemStyle: {
  221. color: function () {
  222. return new echarts.graphic.LinearGradient(
  223. 0,
  224. 1,
  225. 0,
  226. 0,
  227. [
  228. {
  229. offset: 0,
  230. color: 'rgba(96, 248, 221,1)',
  231. },
  232. {
  233. offset: 1,
  234. color: 'rgba(96, 248, 221,0.1)',
  235. },
  236. ],
  237. false
  238. );
  239. },
  240. },
  241. // showBackground: true,
  242. backgroundStyle: {
  243. color: 'transparent',
  244. borderWidth: 1,
  245. borderColor: 'rgba(148, 250, 65, 0.2)',
  246. },
  247. data: props.YAxis[1] && props.YAxis[1].value,
  248. },
  249. {
  250. data: props.YAxis[1] && props.YAxis[1].value,
  251. name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
  252. type: 'pictorialBar', // 系列类型
  253. symbolSize: [16, 2], // 标记的大小
  254. symbolOffset: [9, 0], // 标记相对于原本位置的偏移
  255. symbolPosition: 'end', // 图形的定位位置。可取值:start、end、center
  256. // 图例的图形样式
  257. itemStyle: {
  258. color: {
  259. type: 'linear',
  260. x: 0,
  261. y: 0,
  262. x2: 1,
  263. y2: 0,
  264. colorStops: [
  265. {
  266. offset: 0,
  267. color: 'rgba(96, 248, 221,1)', // 0% 处的颜色
  268. },
  269. {
  270. offset: 1,
  271. color: 'rgba(96, 248, 221,1)', // 100% 处的颜色
  272. },
  273. ],
  274. },
  275. },
  276. z: 100, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
  277. },
  278. ],
  279. };
  280.  
  281. option && myChart.value.setOption(option);
  282. }
  283.  
  284. function resizeTheChart() {
  285. if (myChart.value) {
  286. myChart.value.resize();
  287. }
  288. }
  289. onMounted(() => {
  290. nextTick(() => {
  291. init();
  292. window.addEventListener('resize', resizeTheChart);
  293. });
  294. });
  295. </script>