Newer
Older
DH_Apicture / src / views / pictureOnMap / page / PublicOpinionAnalysis / components / ChartRy.vue
@zhangqy zhangqy on 29 Nov 4 KB first commit
  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 './nowSize.js';
  8. import moment from 'moment';
  9. const emit = defineEmits(['newsType']);
  10. const props = defineProps({
  11. //刷新标志
  12. refresh: {
  13. type: [String, Number],
  14. default: 1,
  15. },
  16. //数据
  17. echartData: {
  18. type: Object,
  19. default: {},
  20. },
  21. });
  22.  
  23. const id = guid();
  24. const myChart = shallowRef('');
  25.  
  26. watch(
  27. () => props.refresh,
  28. value => {
  29. //先销毁实例
  30. myChart.value && myChart.value.dispose();
  31. intChart();
  32. }
  33. );
  34. //自适应
  35. function resizeTheChart() {
  36. if (myChart.value) {
  37. myChart.value.resize();
  38. }
  39. }
  40. //初始化
  41. function intChart() {
  42. myChart.value = proxy.echarts.init(document.getElementById(id));
  43. myChart.value.clear();
  44. // 绘制图表
  45. myChart.value.setOption({
  46. tooltip: {
  47. trigger: 'axis',
  48. backgroundColor: '#004284',
  49. borderColor: '#0B9BFF',
  50. textStyle: {
  51. // 字体颜色
  52. color: '#FFFFFF',
  53. // 字体大小
  54. fontSize: 14,
  55. },
  56. axisPointer: {
  57. type: 'shadow',
  58. // label: {
  59. // show: true,
  60. // }
  61. },
  62.  
  63. formatter: function (params) {
  64. return params[0].name + ' : ' + params[0].value + '';
  65. },
  66. },
  67. grid: {
  68. top: nowSize(14, 1920),
  69. bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
  70. left: nowSize(80, 1920),
  71. right: nowSize(20, 1920),
  72. },
  73. xAxis: {
  74. max: props.echartData.Maximum,
  75. type: 'value',
  76. axisLine: {
  77. show: false, //隐藏X轴轴线
  78. lineStyle: {
  79. color: 'rgba(44, 110, 189, 1)',
  80. },
  81. },
  82. axisTick: {
  83. show: false, //隐藏X轴刻度
  84. lineStyle: {
  85. color: 'rgba(44, 110, 189, 1)',
  86. },
  87. },
  88. axisLabel: {
  89. show: true,
  90. color: '#AAC1CFFF',
  91. fontSize: nowSize(14, 1920),
  92. },
  93. splitLine: {
  94. //网格线
  95. lineStyle: {
  96. type: 'dashed',
  97. color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
  98. },
  99. show: true, //隐藏或显示
  100. },
  101. },
  102. yAxis: {
  103. type: 'category',
  104. data: props.echartData.xData,
  105. name: '数量(条)',
  106. nameLocation: 'start',
  107. nameTextStyle: {
  108. color: '#AAC1CFFF',
  109. fontSize: nowSize(14, 1920),
  110. padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
  111. },
  112. axisTick: {
  113. show: false, //隐藏X轴刻度
  114. lineStyle: {
  115. color: 'rgba(44, 110, 189, 1)',
  116. },
  117. },
  118. axisLine: {
  119. show: false,
  120. },
  121. axisLabel: {
  122. textStyle: {
  123. // align: 'left', //设置左对齐
  124. // baseline: 'middle',
  125. },
  126. margin: 25,
  127. show: true,
  128. color: 'rgba(255, 255, 255, 1)',
  129. fontSize: nowSize(14, 1920),
  130. },
  131. // splitArea: {
  132. // show: true,
  133. // areaStyle: {
  134. // color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
  135. // }
  136. // }
  137. },
  138. series: [
  139. {
  140. type: 'bar',
  141. name: '',
  142. data: props.echartData.data,
  143. barWidth: nowSize(10, 1920),
  144. zlevel: 1,
  145. itemStyle: {
  146. borderRadius: nowSize(5, 1920),
  147. color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
  148. {
  149. offset: 0,
  150. color: 'rgba(0, 167, 245,1)',
  151. },
  152. {
  153. offset: 1,
  154. color: 'rgba(0, 238, 253,1)',
  155. },
  156. ]),
  157. },
  158. },
  159. {
  160. name: '背景',
  161. type: 'bar',
  162. barWidth: nowSize(10, 1920),
  163. barGap: '-100%',
  164. data: props.echartData.num,
  165. itemStyle: {
  166. borderRadius: nowSize(5, 1920),
  167. color: 'rgba(77, 149, 217, 0.15)',
  168. },
  169. },
  170. ],
  171. });
  172. myChart.value.on('click', params => {
  173. console.log(params.name, 'paramsparamsparams');
  174. emit('newsType', params.name);
  175. myChart.value.resize();
  176. });
  177. }
  178. onMounted(() => {
  179. intChart();
  180. window.addEventListener('resize', resizeTheChart);
  181. });
  182. onBeforeUnmount(() => {
  183. myChart.value && myChart.value.dispose();
  184. });
  185. </script>
  186.  
  187. <style lang="scss" scoped>
  188. .chartBox {
  189. width: 100%;
  190. height: 100%;
  191. }
  192. </style>