Newer
Older
DH_Apicture / src / views / pictureOnMap / page / WaterAssets / DrainageFacilitiesLeft / Rain / yushuibengzhanEcharts.vue
@ZZJ ZZJ on 17 Dec 7 KB update
  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. typeName: {
  29. type: [String, Number],
  30. default: '',
  31. },
  32. zoomData: {
  33. type: Array,
  34. default: () => [0, 100],
  35. },
  36. });
  37.  
  38. watch(
  39. () => props.refresh,
  40. value => {
  41. //先销毁实例
  42. myChart.value && myChart.value.dispose();
  43. init();
  44. },
  45. {
  46. deep: true,
  47. }
  48. );
  49.  
  50. function init() {
  51. myChart.value = echarts.init(document.getElementById(id));
  52.  
  53. let newarr = [];
  54. let max = Math.max(...props.YAxis);
  55. // console.log('max', max);
  56. props.YAxis.forEach(item => {
  57. newarr.push(max);
  58. });
  59.  
  60. let barWidth = 6;
  61. let option = {
  62. tooltip: {
  63. trigger: 'axis',
  64. backgroundColor: '#004284',
  65. borderColor: '#0B9BFF',
  66. borderRadius: 6, // 设置圆角大小
  67. textStyle: {
  68. // 字体颜色
  69. color: 'white',
  70. // 字体大小
  71. fontSize: 14,
  72. },
  73. formatter: params => {
  74. // console.log(params);
  75. var relVal = '' + params[0].name;
  76. for (var i = 0, l = params.length; i < l; i++) {
  77. if (params[i].seriesName) {
  78. let unit = params[i].seriesName == props.typeName ? 'mm' : '个';
  79. relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value;
  80. }
  81. }
  82. return relVal;
  83. },
  84. },
  85. grid: {
  86. left: '6%',
  87. right: '4%',
  88. bottom: '3%',
  89. top: '5%',
  90. containLabel: true,
  91. },
  92. xAxis: {
  93. max: Number(max),
  94. type: 'value',
  95. boundaryGap: [0, 0.01],
  96. axisLabel: {
  97. show: true,
  98. color: '#AED2E0',
  99. },
  100. axisLine: {
  101. lineStyle: {
  102. color: '#fff',
  103. },
  104. },
  105. splitLine: {
  106. show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
  107. type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
  108. lineStyle: {
  109. color: 'rgba(255,255,255,0.2)',
  110. width: 1, // 设置分割线的粗细为2
  111. },
  112. },
  113. },
  114. yAxis: {
  115. type: 'category',
  116. axisLabel: {
  117. show: true,
  118. color: '#fff',
  119. },
  120. axisLine: {
  121. show: false,
  122. },
  123. axisTick: {
  124. show: false, // 不显示坐标轴刻度线
  125. },
  126. data: props.XAxis,
  127. name: props.typeName,
  128. nameLocation: 'start',
  129. nameTextStyle: {
  130. color: '#AED2E0',
  131. padding: [-8, 0, 0, -100], // 四个数字分别为上右下左与原位置距离
  132. },
  133. },
  134.  
  135. dataZoom: [
  136. {
  137. type: 'inside', // 支持内部鼠标滚动平移
  138. start: props.zoomData[0],
  139. end: props.zoomData[1],
  140. yAxisIndex: 0,
  141. zoomOnMouseWheel: true, // 关闭滚轮缩放
  142. moveOnMouseWheel: true, // 开启滚轮平移
  143. moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
  144. },
  145. ],
  146. series: [
  147. {
  148. data: props.YAxis,
  149. name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
  150. type: 'pictorialBar', // 系列类型
  151. symbolSize: [barWidth / 1.2, barWidth / 1.2], // 标记的大小
  152. symbolOffset: [barWidth - 7, 0], // 标记相对于原本位置的偏移
  153. symbolPosition: 'end', // 图形的定位位置。可取值:start、end、center
  154. // 图例的图形样式
  155. itemStyle: {
  156. color: {
  157. type: 'linear',
  158. x: 0,
  159. y: 0,
  160. x2: 1,
  161. y2: 0,
  162. colorStops: [
  163. {
  164. offset: 0,
  165. color: 'rgba(255, 255, 255,1)', // 0% 处的颜色
  166. },
  167. {
  168. offset: 1,
  169. color: 'rgba(255, 255, 255,1)', // 100% 处的颜色
  170. },
  171. ],
  172. },
  173. },
  174. z: 100, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
  175. },
  176. {
  177. data: props.YAxis,
  178. name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
  179. type: 'pictorialBar', // 系列类型
  180. symbolSize: function (data) {
  181. let arr = [barWidth + 2, 0];
  182. // 根据数据点的值动态改变图标大小
  183. console.log('data', data);
  184. if (data != 0) {
  185. return [barWidth * 2, barWidth * 2];
  186. } else {
  187. return [0, 0];
  188. }
  189. },
  190. symbolOffset: [barWidth + 2, 0],
  191. symbolPosition: 'end', // 图形的定位位置。可取值:start、end、center
  192. z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
  193. itemStyle: {
  194. color: 'transparent',
  195. borderColor: '#fff',
  196. borderType: 'solid',
  197. borderWidth: 10,
  198. },
  199. },
  200. // 柱状图
  201. {
  202. name: props.typeName, // 系列名称, 用于tooltip的显示, legend 的图例筛选
  203. type: 'bar', // 系列类型
  204. barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
  205. barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
  206. // 图例的图形样式
  207. itemStyle: {
  208. color: {
  209. type: 'linear',
  210. x: 0,
  211. y: 0,
  212. x2: 1,
  213. y2: 0,
  214. colorStops: [
  215. {
  216. offset: 0,
  217. color: 'rgba(83, 180, 232,0.3)', // 0% 处的颜色
  218. },
  219. {
  220. offset: 1,
  221. color: 'rgba(83, 180, 232,1)', // 100% 处的颜色
  222. },
  223. ],
  224. },
  225. },
  226. data: props.YAxis,
  227. },
  228. // 背景
  229. {
  230. name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
  231. type: 'bar', // 系列类型
  232. barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
  233. barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
  234. // 图例的图形样式
  235. itemStyle: {
  236. color: '#335082',
  237. opacity: 0.5,
  238. },
  239. z: 0, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
  240. data: newarr, // 系列中的数据内容数组
  241. },
  242. ],
  243. };
  244. option && myChart.value.setOption(option);
  245. }
  246.  
  247. function resizeTheChart() {
  248. if (myChart.value) {
  249. myChart.value.resize();
  250. }
  251. }
  252.  
  253. onMounted(() => {
  254. nextTick(() => {
  255. init();
  256. window.addEventListener('resize', resizeTheChart);
  257. });
  258. });
  259. </script>