Newer
Older
KaiFengPC / src / views / spongePerformance / mainIndex / footCenter.vue
@zhangdeliang zhangdeliang on 9 Oct 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 'echarts-liquidfill/src/liquidFill.js';
  9.  
  10. const assetEchart = ref(null);
  11. const props = defineProps({
  12. data: {
  13. type: Array,
  14. },
  15. });
  16. props.data.xData.reduce((n, v) => {
  17. return n + v.itemScore;
  18. }, 0);
  19. const initM = () => {
  20. const chart = init(assetEchart.value);
  21. window.addEventListener('resize', () => {
  22. chart.resize();
  23. });
  24. chart.setOption({
  25. title: [
  26. {
  27. text: props.data.xData[0]?.itemContent,
  28. x: '10%',
  29. y: '79%',
  30. textStyle: {
  31. fontSize: 14,
  32. fontWeight: '100',
  33. color: '#fff',
  34. lineHeight: 16,
  35. textAlign: 'center',
  36. },
  37. },
  38. {
  39. text: props.data.xData[1]?.itemContent,
  40. x: '61%',
  41. y: '79%',
  42. textStyle: {
  43. fontSize: 14,
  44. fontWeight: '100',
  45. color: '#fff',
  46. lineHeight: 16,
  47. textAlign: 'center',
  48. },
  49. },
  50. ],
  51. series: [
  52. {
  53. type: 'liquidFill',
  54. radius: '57%',
  55. center: ['25%', '45%'],
  56. color: [
  57. {
  58. type: 'linear',
  59. x: 0,
  60. y: 0,
  61. x2: 0,
  62. y2: 1,
  63. colorStops: [
  64. {
  65. offset: 0,
  66. color: '#0e3f6a ',
  67. opacity: '0.6',
  68. },
  69. {
  70. offset: 1,
  71. color: '#2ecefc ',
  72. opacity: '0.9',
  73. },
  74. ],
  75. globalCoord: true,
  76. },
  77. ],
  78. data: [props.data.xData[0]?.realScore], // data个数代表波浪数
  79. backgroundStyle: {
  80. borderWidth: 1,
  81. color: '#1e5187',
  82. opacity: '0.3',
  83. },
  84. label: {
  85. textStyle: {
  86. fontSize: 14,
  87. color: '#0f406a',
  88. },
  89. formatter: function (param) {
  90. return props.data.xData[0]?.standardFlag == 1 ? '已完成' : '未完成' + '\n' + '总数' + (props.data.xData[0]?.itemScore || 0);
  91. },
  92. },
  93. outline: {
  94. borderDistance: 12,
  95. itemStyle: {
  96. borderWidth: 7,
  97. borderColor: '#3077a7',
  98. opacity: '0.9',
  99. },
  100. },
  101. },
  102. {
  103. //第二个球的填充
  104. type: 'liquidFill',
  105. radius: '57%',
  106. center: ['80%', '45%'],
  107. color: [
  108. {
  109. type: 'linear',
  110. x: 0,
  111. y: 0,
  112. x2: 0,
  113. y2: 1,
  114. colorStops: [
  115. {
  116. offset: 0,
  117. color: '#0e3f6a',
  118. opacity: '0.6',
  119. },
  120. {
  121. offset: 1,
  122. color: '#2ecefc',
  123. opacity: '0.9',
  124. },
  125. ],
  126. globalCoord: false,
  127. },
  128. ],
  129. data: [props.data.xData[1]?.standardFlag == 1 ? 1 : 0], // data个数代表波浪数
  130. // data: [props.data[1]?.realValue/props.data[1]?.itemScore], // data个数代表波浪数
  131. backgroundStyle: {
  132. borderWidth: 1,
  133. color: '#1e5187',
  134. opacity: '0.3',
  135. },
  136. label: {
  137. textStyle: {
  138. fontSize: 14,
  139. color: '#fff',
  140. },
  141. formatter: function (param) {
  142. return (param.value * 100 || 0) + '%' + '\n' + '总数' + (props.data.xData[1]?.itemScore || 0);
  143. },
  144. },
  145. outline: {
  146. // show: false
  147. borderDistance: 12,
  148. itemStyle: {
  149. borderWidth: 7,
  150. borderColor: '#3077a7',
  151. opacity: '0.9',
  152. },
  153. },
  154. },
  155. ],
  156. });
  157. };
  158.  
  159. onMounted(() => {
  160. setTimeout(() => {
  161. initM();
  162. }, 100);
  163. });
  164. </script>
  165.  
  166. <style lang="scss" scoped>
  167. .asset_echart {
  168. width: 480px;
  169. height: 280px;
  170. // margin: 10px 14px 0 16px;
  171. &_echart {
  172. width: 100%;
  173. height: 100%;
  174. }
  175. }
  176. </style>