Newer
Older
DH_Apicture / src / views / pictureOnMap / page / WaterAssets / MonitoringAssetsRight / neilaojishuidianEcharts.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. //类型
  29. typeName: {
  30. type: String,
  31. default: '',
  32. },
  33. });
  34.  
  35. watch(
  36. () => props.refresh,
  37. value => {
  38. //先销毁实例
  39. myChart.value && myChart.value.dispose();
  40. init();
  41. },
  42. {
  43. deep: true,
  44. }
  45. );
  46.  
  47. function init() {
  48. myChart.value = echarts.init(document.getElementById(id));
  49.  
  50. let option = {
  51. tooltip: {
  52. trigger: 'axis',
  53. backgroundColor: '#004284',
  54. borderColor: '#0B9BFF',
  55. borderRadius: 6, // 设置圆角大小
  56. textStyle: {
  57. // 字体颜色
  58. color: 'white',
  59. // 字体大小
  60. fontSize: 14,
  61. },
  62. formatter: params => {
  63. // console.log(params);
  64. var relVal = '' + params[0].name;
  65. for (var i = 0, l = params.length; i < l; i++) {
  66. if (params[i].seriesName) {
  67. let unit = '';
  68. relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
  69. }
  70. }
  71. return relVal;
  72. },
  73. },
  74. grid: {
  75. left: '8%',
  76. right: '4%',
  77. bottom: '3%',
  78. top: '10%',
  79. containLabel: true,
  80. },
  81. xAxis: {
  82. boundaryGap: true,
  83. type: 'category',
  84. data: props.XAxis,
  85. axisLabel: {
  86. show: true,
  87. color: '#fff',
  88. // interval: 0,
  89. formatter: function (params) {
  90. let one = params.substring(0, 3);
  91. let two = params.substring(3, 6);
  92. let three = params.substring(6, 8);
  93. let four = params.substring(8) ? '...' : '';
  94.  
  95. let newParamsName = one + '\n' + two + '\n' + three + four;
  96. return newParamsName;
  97. },
  98. },
  99. axisLine: {
  100. show: true,
  101. lineStyle: {
  102. show: true, //是否显示坐标轴轴线,
  103. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  104. width: 1, //x轴粗细
  105. },
  106. },
  107. axisTick: {
  108. show: false, //是否显示刻度
  109. },
  110. },
  111. yAxis: {
  112. type: 'value',
  113. name: props.typeName,
  114. nameLocation: 'start',
  115. nameTextStyle: {
  116. color: '#AED2E0',
  117. padding: [-5, 28, 0, 0], // 四个数字分别为上右下左与原位置距离
  118. },
  119. axisLabel: {
  120. show: true,
  121. color: '#AED2E0',
  122. formatter: function (value) {
  123. return value.toFixed(0); // 显示小数点后两位
  124. },
  125. },
  126. axisLine: {
  127. show: true,
  128. lineStyle: {
  129. show: true, //是否显示坐标轴轴线,
  130. color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
  131. width: 1, //x轴粗细
  132. },
  133. },
  134. splitLine: {
  135. show: true,
  136. lineStyle: {
  137. color: 'rgba(255,255,255,0.2)',
  138. },
  139. },
  140. },
  141. series: [
  142. {
  143. name: props.typeName,
  144. type: 'bar',
  145. barWidth: 15,
  146. itemStyle: {
  147. borderRadius: [6, 6, 0, 0],
  148. color: function () {
  149. return new echarts.graphic.LinearGradient(
  150. 0,
  151. 1,
  152. 0,
  153. 0,
  154. [
  155. {
  156. offset: 0,
  157. color: 'rgba(43, 174, 227,0.4)',
  158. },
  159. {
  160. offset: 1,
  161. color: 'rgba(43, 174, 227,1)',
  162. },
  163. ],
  164. false
  165. );
  166. },
  167. },
  168. // showBackground: true,
  169. backgroundStyle: {
  170. color: 'transparent',
  171. borderWidth: 1,
  172. borderColor: 'rgba(148, 250, 65, 0.2)',
  173. },
  174. data: props.YAxis,
  175. },
  176. {
  177. data: props.YAxis,
  178. name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
  179. type: 'pictorialBar', // 系列类型
  180. symbolSize: [15, 8], // 标记的大小
  181. symbolOffset: [0, 0], // 标记相对于原本位置的偏移
  182. symbolPosition: 'end', // 图形的定位位置。可取值:start、end、center
  183. // 图例的图形样式
  184. itemStyle: {
  185. color: {
  186. type: 'linear',
  187. x: 0,
  188. y: 0,
  189. x2: 1,
  190. y2: 0,
  191. colorStops: [
  192. {
  193. offset: 0,
  194. color: '#63ccf8', // 0% 处的颜色
  195. },
  196. {
  197. offset: 1,
  198. color: '#63ccf8', // 100% 处的颜色
  199. },
  200. ],
  201. },
  202. },
  203. z: 100, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
  204. },
  205. ],
  206. };
  207.  
  208. option && myChart.value.setOption(option);
  209. }
  210.  
  211. function resizeTheChart() {
  212. if (myChart.value) {
  213. myChart.value.resize();
  214. }
  215. }
  216. onMounted(() => {
  217. nextTick(() => {
  218. init();
  219. window.addEventListener('resize', resizeTheChart);
  220. });
  221. });
  222. </script>