Newer
Older
KaiFengPC / src / components / Echarts / riverPorfileChart.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <!-- 河道横断面分析echarts -->
  3. <div :id="id" style="width: 100%; height: 100%"></div>
  4. </template>
  5. <script setup>
  6. import { guid } from '@/utils/ruoyi';
  7. import useUserStore from '@/store/modules/user';
  8. const pinias = useUserStore();
  9. const { proxy } = getCurrentInstance();
  10. const id = guid();
  11. const myChart = shallowRef('');
  12.  
  13. const props = defineProps({
  14. //刷新标志
  15. refresh: {
  16. type: [String, Number],
  17. default: 1,
  18. },
  19. //数据
  20. echartData: {
  21. type: Object,
  22. default: {},
  23. },
  24. });
  25. watch(
  26. () => props.refresh,
  27. value => {
  28. //先销毁实例
  29. myChart.value && myChart.value.dispose();
  30. setTimeout(() => {
  31. intChart();
  32. });
  33. },
  34. { immediate: true }
  35. );
  36.  
  37. //自适应
  38. function resizeTheChart() {
  39. if (myChart.value) {
  40. myChart.value.resize();
  41. }
  42. }
  43. function intChart() {
  44. myChart.value = proxy.echarts.init(document.getElementById(id));
  45. myChart.value.clear();
  46. // 绘制图表
  47. myChart.value.setOption({
  48. color: pinias.$state.chartColor,
  49. tooltip: {
  50. trigger: 'axis',
  51. confine: true, //是否将 tooltip 框限制在图表的区域内
  52. axisPointer: {
  53. type: 'shadow',
  54. },
  55. formatter: function (params) {
  56. var res = '<div><p>里程:' + params[0].name + ' m</div>'; // 字符串形式的html标签会被echarts转换渲染成数据,这个res主要是画的tooltip里的上部分的标题部分
  57. for (var i = 0; i < params.length; i++) {
  58. if (params[i].seriesName == '排口街道') {
  59. res += '<div><p>' + '';
  60. (' m</p></div>');
  61. } else {
  62. //因为是个数组,所以要遍历拿到里面的数据,并加入到tooltip的数据内容部分里面去
  63. res += `<div style="color: #004565;font-size: 14px; padding:0 12px;line-height: 24px">
  64. <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
  65. params[i].color, // 默认是小圆点,我们将其修改成有圆角的正方形,这里用的是模板字符串。并拿到对应颜色、名字、数据
  66. ]};"></span>
  67. ${params[i].seriesName}
  68. ${params[i].data} m
  69. </div>`;
  70. }
  71. }
  72.  
  73. return res;
  74. },
  75. },
  76. // 显示暂无数据
  77. graphic: {
  78. type: 'text', // 类型:文本
  79. left: 'center',
  80. top: 'middle',
  81. silent: true, // 不响应事件
  82. invisible: props.echartData.xAxisData.length > 0 ? true : false, // 有数据就隐藏
  83. style: {
  84. fill: '#c6c6c6',
  85. fontWeight: 'bold',
  86. text: '暂无数据',
  87. fontFamily: 'Microsoft YaHei',
  88. fontSize: '18px',
  89. },
  90. },
  91. grid: {
  92. left: '5%',
  93. right: '5%',
  94. top: '15%',
  95. bottom: '8%',
  96. containLabel: true,
  97. },
  98. legend: {
  99. top: '0',
  100. orient: 'horizontal', //horizontal
  101. left: 'center', //left ,center
  102. textStyle: {
  103. color: 'inherit',
  104. },
  105. },
  106. xAxis: [
  107. {
  108. type: 'category',
  109. name: '里程(m)',
  110. nameTextStyle: {
  111. color: '#c6c6c6', //字体颜色
  112. fontSize: 12, //字体大小
  113. },
  114. boundaryGap: false,
  115. data: props.echartData.xAxisData,
  116. axisLabel: {
  117. color: '#c6c6c6',
  118. },
  119. axisLine: {
  120. lineStyle: {
  121. color: '#066592',
  122. },
  123. },
  124. },
  125. ],
  126. yAxis: [
  127. {
  128. name: 'm',
  129. type: 'value',
  130. min: '15',
  131. nameLocation: 'end', // 坐标轴名称显示位置
  132. nameGap: 15, // 坐标轴名称与轴线之间的距离
  133. nameTextStyle: {
  134. color: '#c6c6c6', //字体颜色
  135. fontSize: 12, //字体大小
  136. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  137. },
  138. axisLabel: {
  139. color: '#c6c6c6',
  140. },
  141. splitLine: {
  142. lineStyle: {
  143. type: 'dashed',
  144. color: '#066592',
  145. },
  146. },
  147. },
  148. ],
  149. series: props.echartData.seriesData,
  150. });
  151.  
  152. myChart.value.on('click', function (params) {
  153. if (params.componentType === 'markPoint') {
  154. // 点击到了 markPoint 上
  155. console.log(params.data.lonLat, 222);
  156. let lonLat = params.data.lonLat.split(',');
  157. newfiberMapbox.map.easeTo({
  158. center: [Number(lonLat[0]), Number(lonLat[1]) - 0.005],
  159. zoom: 16,
  160. });
  161. }
  162. });
  163. }
  164. onMounted(() => {
  165. window.addEventListener('resize', resizeTheChart);
  166. });
  167. onBeforeUnmount(() => {
  168. document.removeEventListener('resize', resizeTheChart());
  169. });
  170. </script>