Newer
Older
urbanLifeline_YanAn / src / views / oneMap / ConstructionEvaluation / ChartNlfz.vue
@鲁yixuan 鲁yixuan on 12 Oct 3 KB updata
  1. <template>
  2. <div class="chartBox" :id="id"></div>
  3. </template>
  4. <script setup name="pieChartGszl">
  5. import { guid } from '@/utils/ruoyi';
  6. const { proxy } = getCurrentInstance();
  7. import { nowSize } from '@/utils/util.js';
  8. import moment from 'moment';
  9. const props = defineProps({
  10. //刷新标志
  11. refresh: {
  12. type: [String, Number],
  13. default: 1,
  14. },
  15. //数据
  16. echartData: {
  17. type: Object,
  18. default: {},
  19. },
  20. });
  21.  
  22. const id = guid();
  23. const myChart = shallowRef('');
  24.  
  25. watch(
  26. () => props.refresh,
  27. value => {
  28. //先销毁实例
  29. myChart.value && myChart.value.dispose();
  30. intChart();
  31. }
  32. );
  33. //自适应
  34. function resizeTheChart() {
  35. if (myChart.value) {
  36. myChart.value.resize();
  37. }
  38. }
  39. //初始化
  40. function intChart() {
  41. myChart.value = proxy.echarts.init(document.getElementById(id));
  42. myChart.value.clear();
  43. // 绘制图表
  44. myChart.value.setOption({
  45. tooltip: {
  46. trigger: 'axis',
  47. axisPointer: {
  48. type: 'shadow',
  49. // label: {
  50. // show: true,
  51. // }
  52. },
  53. formatter: function (params) {
  54. return params[0].name + ' : ' + params[0].value + 'km²';
  55. },
  56. },
  57. grid: {
  58. top: nowSize(14, 1920),
  59. bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
  60. left: nowSize(100, 1920),
  61. right: nowSize(20, 1920),
  62. },
  63. xAxis: {
  64. type: 'value',
  65. axisLine: {
  66. show: false, //隐藏X轴轴线
  67. lineStyle: {
  68. color: 'rgba(44, 110, 189, 1)',
  69. },
  70. },
  71. axisTick: {
  72. show: false, //隐藏X轴刻度
  73. lineStyle: {
  74. color: 'rgba(44, 110, 189, 1)',
  75. },
  76. },
  77. axisLabel: {
  78. show: true,
  79. color: '#39F7FF',
  80. fontSize: nowSize(14, 1920),
  81. },
  82. splitLine: {
  83. //网格线
  84. lineStyle: {
  85. type: 'dashed',
  86. color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
  87. },
  88. show: true, //隐藏或显示
  89. },
  90. },
  91. yAxis: {
  92. type: 'category',
  93. data: props.echartData.xData,
  94. name: '面积/km²',
  95. nameLocation: 'start',
  96. nameTextStyle: {
  97. color: '#39F7FF',
  98. fontSize: nowSize(14, 1920),
  99. padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
  100. },
  101. axisTick: {
  102. show: false, //隐藏X轴刻度
  103. lineStyle: {
  104. color: 'rgba(44, 110, 189, 1)',
  105. },
  106. },
  107. axisLine: {
  108. show: false,
  109. },
  110. axisLabel: {
  111. show: true,
  112. color: 'rgba(255, 255, 255, 1)',
  113. fontSize: nowSize(13, 1920),
  114. },
  115. // splitArea: {
  116. // show: true,
  117. // areaStyle: {
  118. // color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
  119. // }
  120. // }
  121. },
  122. series: [
  123. {
  124. type: 'bar',
  125. name: '面积/km²',
  126. data: props.echartData.data,
  127. barWidth: nowSize(10, 1920),
  128. zlevel: 1,
  129. itemStyle: {
  130. barBorderRadius: nowSize(5, 1920),
  131. color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
  132. {
  133. offset: 0,
  134. color: 'rgba(0, 167, 245,1)',
  135. },
  136. {
  137. offset: 1,
  138. color: 'rgba(0, 238, 253,1)',
  139. },
  140. ]),
  141. },
  142. },
  143. {
  144. name: '背景',
  145. type: 'bar',
  146. barWidth: nowSize(10, 1920),
  147. barGap: '-100%',
  148. data: props.echartData.num,
  149. itemStyle: {
  150. barBorderRadius: nowSize(5, 1920),
  151. color: 'rgba(77, 149, 217, 0.15)',
  152. },
  153. },
  154. ],
  155. });
  156. }
  157. onMounted(() => {
  158. intChart();
  159. window.addEventListener('resize', resizeTheChart);
  160. });
  161. </script>
  162.  
  163. <style lang="scss" scoped>
  164. .chartBox {
  165. width: 100%;
  166. height: 100%;
  167. }
  168. </style>