Newer
Older
DH_Apicture / src / views / pictureOnMap / page / WaterAssets / MonitoringAssetsRight / guanwangjianceEchart.vue
@zhangqy zhangqy on 29 Nov 5 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. YAxis2: {
  29. type: Array,
  30. default: () => [],
  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 = 13;
  55. let option = {
  56. legend: {
  57. itemStyle: {
  58. color: 'auto',
  59. },
  60. textStyle: {
  61. color: '#fff',
  62. },
  63. itemWidth: 15,
  64. itemHeight: 15,
  65. },
  66. tooltip: {
  67. trigger: 'axis',
  68. backgroundColor: '#004284',
  69. borderColor: '#0B9BFF',
  70. borderRadius: 6, // 设置圆角大小
  71. textStyle: {
  72. // 字体颜色
  73. color: 'white',
  74. // 字体大小
  75. fontSize: 14,
  76. },
  77. formatter: params => {
  78. // console.log(params);
  79. var relVal = '' + params[0].name;
  80. for (var i = 0, l = params.length; i < l; i++) {
  81. if (params[i].seriesName) {
  82. let unit = '';
  83. relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
  84. }
  85. }
  86. return relVal;
  87. },
  88. },
  89. grid: {
  90. left: '10%',
  91. right: '4%',
  92. bottom: '3%',
  93. top: '15%',
  94. containLabel: true,
  95. },
  96. xAxis: {
  97. type: 'value',
  98. boundaryGap: [0, 0.01],
  99. axisLabel: {
  100. show: true,
  101. color: '#AED2E0',
  102. },
  103. splitLine: {
  104. show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
  105. type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
  106. lineStyle: {
  107. color: 'rgba(255,255,255,0.2)',
  108. width: 1, // 设置分割线的粗细为2
  109. },
  110. },
  111. },
  112. yAxis: {
  113. type: 'category',
  114. data: props.XAxis,
  115. name: props.typeName,
  116. nameLocation: 'start',
  117. nameTextStyle: {
  118. color: '#AED2E0',
  119. padding: [-7, 0, 0, -80], // 四个数字分别为上右下左与原位置距离
  120. },
  121. axisLabel: {
  122. show: true,
  123. color: '#fff',
  124. },
  125. axisLine: {
  126. show: false,
  127. },
  128. axisTick: {
  129. show: false, // 不显示坐标轴刻度线
  130. },
  131. },
  132. series: [
  133. {
  134. name: '污水',
  135. type: 'bar',
  136. stack: 'Ad',
  137. barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
  138. barGap: '-100%',
  139. itemStyle: {
  140. borderRadius: [0, 6, 6, 0],
  141. // color: 'rgba(248, 98, 98,1)',
  142. color: {
  143. type: 'linear',
  144. x: 0,
  145. y: 0,
  146. x2: 1,
  147. y2: 0,
  148. colorStops: [
  149. {
  150. offset: 0,
  151. color: 'rgba(248, 98, 98,0.2)', // 0% 处的颜色
  152. },
  153. {
  154. offset: 1,
  155. color: 'rgba(248, 98, 98,1)', // 100% 处的颜色
  156. },
  157. ],
  158. },
  159. },
  160. data: props.YAxis,
  161. },
  162. // 柱状图
  163. {
  164. name: '雨水', // 系列名称, 用于tooltip的显示, legend 的图例筛选
  165. type: 'bar', // 系列类型
  166. barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
  167. barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
  168. // 图例的图形样式
  169. itemStyle: {
  170. borderRadius: [0, 6, 6, 0],
  171. color: {
  172. type: 'linear',
  173. x: 0,
  174. y: 0,
  175. x2: 1,
  176. y2: 0,
  177. colorStops: [
  178. {
  179. offset: 0,
  180. color: 'rgba(83, 180, 232,0.6)', // 0% 处的颜色
  181. },
  182. {
  183. offset: 1,
  184. color: 'rgba(83, 180, 232,1)', // 100% 处的颜色
  185. },
  186. ],
  187. },
  188. },
  189. // label: {
  190. // show: true,
  191. // position: 'top',
  192. // color: '#fff',
  193. // formatter: function (data) {
  194. // return data.value;
  195. // },
  196. // },
  197. data: props.YAxis2,
  198. stack: 'Ad',
  199. },
  200. ],
  201. };
  202.  
  203. option && myChart.value.setOption(option);
  204. }
  205.  
  206. function resizeTheChart() {
  207. if (myChart.value) {
  208. myChart.value.resize();
  209. }
  210. }
  211. onMounted(() => {
  212. nextTick(() => {
  213. init();
  214. window.addEventListener('resize', resizeTheChart);
  215. });
  216. });
  217. </script>