Newer
Older
DH_Apicture / src / views / pictureOnMap / page / WaterAssets / DrainageFacilitiesLeft / sewage / wushuichulichangEcharts.vue
@zhangqy zhangqy on 29 Nov 6 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. typeName2: {
  38. type: String,
  39. default: '',
  40. },
  41. });
  42.  
  43. watch(
  44. () => props.refresh,
  45. value => {
  46. //先销毁实例
  47. myChart.value && myChart.value.dispose();
  48. init();
  49. },
  50. {
  51. deep: true,
  52. }
  53. );
  54.  
  55. function init() {
  56. myChart.value = echarts.init(document.getElementById(id));
  57.  
  58. let barWidth = 12;
  59. let option = {
  60. color: ['rgba(96, 203, 248,1)', 'rgba(124, 255, 186,1)'],
  61. legend: {
  62. // selectedMode: false,
  63. icon: 'rect',
  64. itemStyle: {
  65. color: 'inherit',
  66. },
  67. textStyle: {
  68. color: '#fff',
  69. },
  70. itemWidth: 13,
  71. itemHeight: 13,
  72. },
  73. tooltip: {
  74. trigger: 'axis',
  75. backgroundColor: '#004284',
  76. borderColor: '#0B9BFF',
  77. borderRadius: 6, // 设置圆角大小
  78. textStyle: {
  79. // 字体颜色
  80. color: 'white',
  81. // 字体大小
  82. fontSize: 14,
  83. },
  84. formatter: params => {
  85. var relVal = '' + params[0].name;
  86. for (var i = 0, l = params.length; i < l; i++) {
  87. if (params[i].seriesName) {
  88. let unit = '';
  89. relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
  90. }
  91. }
  92. return relVal;
  93. },
  94. },
  95. grid: {
  96. left: '8%',
  97. right: '4%',
  98. bottom: '3%',
  99. top: '20%',
  100. containLabel: true,
  101. },
  102. xAxis: {
  103. boundaryGap: true,
  104. type: 'category',
  105. data: props.XAxis,
  106. axisLabel: {
  107. show: true,
  108. color: '#fff',
  109. // interval: 0,
  110. formatter: function (params) {
  111. let one = params.substring(0, 3);
  112. let two = params.substring(3, 6);
  113. let three = params.substring(6, 8);
  114. let four = params.substring(8) ? '...' : '';
  115.  
  116. let newParamsName = one + '\n' + two + '\n' + three + four;
  117. return newParamsName;
  118. },
  119. },
  120. axisLine: {
  121. show: true,
  122. lineStyle: {
  123. show: true, //是否显示坐标轴轴线,
  124. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  125. width: 1, //x轴粗细
  126. },
  127. },
  128. axisTick: {
  129. show: false, //是否显示刻度
  130. },
  131. },
  132. yAxis: [
  133. {
  134. position: 'left',
  135. type: 'value',
  136. name: props.typeName,
  137. nameLocation: 'end',
  138. nameTextStyle: {
  139. color: '#AED2E0',
  140. padding: [-5, 60, 0, 0], // 四个数字分别为上右下左与原位置距离
  141. },
  142. axisLabel: {
  143. show: true,
  144. color: '#AED2E0',
  145. formatter: function (value) {
  146. return value.toFixed(1); // 显示小数点后两位
  147. },
  148. },
  149. axisLine: {
  150. show: true,
  151. lineStyle: {
  152. show: true, //是否显示坐标轴轴线,
  153. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  154. width: 1, //x轴粗细
  155. },
  156. },
  157. splitLine: {
  158. show: true,
  159. lineStyle: {
  160. color: 'rgba(255,255,255,0.2)',
  161. },
  162. },
  163. },
  164. {
  165. position: 'right',
  166. type: 'value',
  167. name: props.typeName2,
  168. nameLocation: 'end',
  169. nameTextStyle: {
  170. color: '#AED2E0',
  171. padding: [0, -40, 0, 0], // 四个数字分别为上右下左与原位置距离
  172. },
  173. axisLabel: {
  174. show: true,
  175. color: '#AED2E0',
  176. formatter: function (value) {
  177. return value.toFixed(1); // 显示小数点后两位
  178. },
  179. },
  180. axisLine: {
  181. show: true,
  182. lineStyle: {
  183. show: true, //是否显示坐标轴轴线,
  184. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  185. width: 1, //x轴粗细
  186. },
  187. },
  188. splitLine: {
  189. show: true,
  190. lineStyle: {
  191. color: 'rgba(255,255,255,0.2)',
  192. },
  193. },
  194. },
  195. ],
  196. series: [
  197. {
  198. yAxisIndex: 0,
  199. name: '现状规模',
  200. type: 'bar',
  201. barWidth: barWidth,
  202. itemStyle: {
  203. borderRadius: [6, 6, 6, 6],
  204. color: function () {
  205. return new echarts.graphic.LinearGradient(
  206. 0,
  207. 1,
  208. 0,
  209. 0,
  210. [
  211. {
  212. offset: 0,
  213. color: 'rgba(43, 174, 227,0.5)',
  214. },
  215. {
  216. offset: 1,
  217. color: 'rgba(43, 174, 227,1)',
  218. },
  219. ],
  220. false
  221. );
  222. },
  223. },
  224. // showBackground: true,
  225. backgroundStyle: {
  226. color: 'transparent',
  227. borderWidth: 1,
  228. borderColor: 'rgba(148, 250, 65, 0.2)',
  229. },
  230. data: props.YAxis,
  231. },
  232. {
  233. yAxisIndex: 1,
  234. itemStyle: {
  235. color: 'rgba(124, 255, 186,1)',
  236. },
  237. name: '服务面积',
  238. data: props.YAxis2,
  239. // data: [12223, 24444, 322222, 4, 5, 6, 74, 33, 44],
  240. type: 'line',
  241. smooth: true,
  242. lineStyle: {
  243. // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
  244. // color: "#CB2F0C",
  245. color: 'rgba(124, 255, 186,1)',
  246. width: 1,
  247. },
  248. },
  249. ],
  250. };
  251.  
  252. option && myChart.value.setOption(option);
  253. }
  254.  
  255. function resizeTheChart() {
  256. if (myChart.value) {
  257. myChart.value.resize();
  258. }
  259. }
  260. onMounted(() => {
  261. nextTick(() => {
  262. init();
  263. window.addEventListener('resize', resizeTheChart);
  264. });
  265. });
  266. </script>