Newer
Older
KaiFengPC / src / views / spongePerformance / ManagingPerformance / projectCompletionStatus / echart.vue
@zhangdeliang zhangdeliang on 30 Sep 3 KB update
  1. <template>
  2. <div>
  3. <div ref="assetEchart" class="asset_echart"></div>
  4. </div>
  5. </template>
  6. <script setup>
  7. import { init } from 'echarts';
  8. import { ref, onMounted } from 'vue';
  9. const assetEchart = ref(null);
  10. let echartsInstance = null;
  11. let curIndex = -1;
  12. let { xdata, data, color, name, data1, namme1 } = defineProps(['data']);
  13. console.log(data1, 'data1');
  14. const emit = defineEmits(['select-echart']);
  15. const initM = () => {
  16. const chart = init(assetEchart.value);
  17. echartsInstance = chart;
  18. window.addEventListener('resize', () => {
  19. chart.resize();
  20. });
  21. chart.setOption({
  22. title: {
  23. text: name,
  24. textStyle: {
  25. align: 'center',
  26. color: '#c6c6c6',
  27. fontSize: 13,
  28. },
  29. top: '3%',
  30. left: '10%',
  31. },
  32. grid: {
  33. top: '12%',
  34. right: '5%',
  35. left: '5%',
  36. bottom: '5%',
  37. containLabel: true,
  38. },
  39. backgroundColor: '#00314e',
  40. tooltip: {
  41. text: '1212',
  42. trigger: 'axis',
  43. axisPointer: {
  44. type: 'shadow',
  45. label: {
  46. show: true,
  47. },
  48. },
  49. },
  50. xAxis: {
  51. data: xdata,
  52. axisTick: {
  53. show: true, //隐藏X轴刻度
  54. },
  55. axisLabel: {
  56. show: true,
  57. textStyle: {
  58. color: '#c6c6c6', //X轴文字颜色
  59. fontSize: 12,
  60. },
  61. },
  62. },
  63. yAxis: [
  64. {
  65. type: 'value',
  66. /*name: "亿元",*/
  67. minInterval: 1,
  68. nameTextStyle: {
  69. fontSize: 14,
  70. },
  71. splitLine: {
  72. show: true, // 显示网格线
  73. lineStyle: {
  74. type: 'dashed',
  75. color: '#066592',
  76. },
  77. },
  78. axisTick: {
  79. show: true,
  80. },
  81. axisLine: {
  82. show: true,
  83. lineStyle: {
  84. // color: '#26D9FF',
  85. width: 2,
  86. },
  87. },
  88. axisLabel: {
  89. show: true,
  90. textStyle: {
  91. color: '#c6c6c6',
  92. fontSize: 12,
  93. },
  94. },
  95. },
  96. ],
  97. series: [
  98. {
  99. name,
  100. type: 'bar',
  101. select: {
  102. itemStyle: {
  103. borderWidth: 2,
  104. },
  105. },
  106. selectedMode: true,
  107. barWidth: 15,
  108. color,
  109. data,
  110. },
  111. {
  112. name: namme1,
  113. type: 'bar',
  114. select: {
  115. itemStyle: {
  116. borderWidth: 2,
  117. color: '#ddd',
  118. },
  119. },
  120. selectedMode: true,
  121. barWidth: 15,
  122. color,
  123. data: data1,
  124. },
  125. ],
  126. });
  127. chart.on('click', params => {
  128. console.log(params);
  129. const index = curIndex;
  130. emit('select-echart', {
  131. name: index === params.dataIndex ? '' : params.name,
  132. callback: () => {
  133. if (index === params.dataIndex) return;
  134. curIndex = params.dataIndex;
  135. chart.dispatchAction({
  136. type: 'select',
  137. dataIndex: params.dataIndex,
  138. });
  139. },
  140. });
  141. });
  142. };
  143.  
  144. function restSelect() {
  145. if (curIndex === -1) return;
  146. echartsInstance.dispatchAction({ type: 'unselect', dataIndex: curIndex });
  147. curIndex = -1;
  148. }
  149. onMounted(() => {
  150. initM();
  151. });
  152. defineExpose({
  153. restSelect,
  154. });
  155. </script>
  156.  
  157. <style lang="scss" scoped>
  158. .asset_echart {
  159. width: 400px;
  160. height: 240px;
  161. &_echart {
  162. width: 100%;
  163. height: 100%;
  164. }
  165. }
  166. </style>