Newer
Older
KaiFengPC / src / views / spongePerformance / mainIndex / footLeft.vue
@zhangdeliang zhangdeliang on 9 Oct 2 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. const assetEchart = ref(null);
  9. let { yData, bottom, xData, data } = defineProps(['data', 'bottom', 'xData', 'yData']);
  10.  
  11. const initM = () => {
  12. const chart = init(assetEchart.value);
  13. window.addEventListener('resize', () => {
  14. chart.resize();
  15. });
  16. chart.setOption({
  17. grid: {
  18. top: '0%',
  19. right: '0%',
  20. left: '-10%',
  21. bottom: '0%',
  22. containLabel: true,
  23. },
  24. tooltip: {
  25. show: true,
  26. trigger: 'axis',
  27. axisPointer: {
  28. type: 'shadow',
  29. },
  30. textStyle: {
  31. fontSize: 12,
  32. },
  33. formatter: function (params) {
  34. let dom = `${params[0].name}
  35. <br/>`;
  36. for (let i of params) {
  37. dom += `${i.marker}
  38. ${i.seriesName}
  39. :
  40. ${i.value}
  41. <br/>`;
  42. }
  43. return dom;
  44. },
  45. },
  46. legend: {
  47. show: false,
  48. itemWidth: 14,
  49. top: '0',
  50. left: 'center',
  51. data: data.titleArray,
  52. textStyle: {
  53. color: '#c6c6c6',
  54. },
  55. },
  56. xAxis: [
  57. {
  58. type: 'category',
  59. color: '#c6c6c6',
  60. data: xData,
  61. axisLabel: {
  62. margin: 10,
  63. color: '#c6c6c6',
  64. textStyle: {
  65. fontSize: 13,
  66. },
  67. },
  68. axisLine: {
  69. lineStyle: {
  70. color: '#c6c6c6',
  71. },
  72. },
  73. axisTick: {
  74. show: true,
  75. lineStyle: {
  76. color: '#ddd',
  77. },
  78. },
  79. },
  80. ],
  81. yAxis: [
  82. {
  83. min: 0,
  84. show: false,
  85. axisLabel: {
  86. color: '#c6c6c6',
  87. textStyle: {
  88. fontSize: 16,
  89. },
  90. },
  91. axisLine: {
  92. lineStyle: {
  93. color: '#c6c6c6',
  94. },
  95. },
  96. axisTick: {
  97. show: false,
  98. },
  99. splitLine: {
  100. lineStyle: {
  101. color: '#ddd',
  102. type: 'dashed',
  103. },
  104. },
  105. },
  106. ],
  107. series: [
  108. {
  109. name: data.titleArray[0],
  110. type: 'bar',
  111. data: yData,
  112. barWidth: '30px',
  113. itemStyle: {
  114. color: function (params) {
  115. return data.colorList[params.dataIndex];
  116. },
  117. barBorderRadius: [0, 0, 0, 0],
  118. },
  119. },
  120. ],
  121. });
  122. };
  123.  
  124. onMounted(() => {
  125. initM();
  126. });
  127. </script>
  128.  
  129. <style lang="scss" scoped>
  130. .asset_echart {
  131. width: 318px;
  132. height: 116px;
  133. // margin: 10px 14px 0 16px;
  134. &_echart {
  135. width: 100%;
  136. height: 100%;
  137. }
  138. }
  139. </style>