Newer
Older
KaiFengPC / src / views / preassess / components / standard_condition.vue
@zhangdeliang zhangdeliang on 23 May 3 KB 初始化项目
  1. <template>
  2. <div class="standard_condition">
  3. <barChart
  4. :echartData="echartData"
  5. yAxisName="百分比/%"
  6. :tooltipFormatter="tooltipFormatter"
  7. ref="barChartRef"
  8. v-if="echartData.xAxisData.length"
  9. />
  10. </div>
  11. </template>
  12.  
  13. <script setup>
  14. import {} from 'vue';
  15. import barChart from '@/components/Echarts/barChart.vue';
  16. const props = defineProps({
  17. data: {
  18. type: Object,
  19. default: () => ({}),
  20. },
  21. });
  22. const { data } = props;
  23. const targetyAxis = data.targetyAxis.map(item => (item * 1 > 0 ? item : 0));
  24. const realityyAxis = data.realityyAxis.map(item => (item * 1 > 0 ? item : 0));
  25. const echartData = {
  26. xAxisData: data.xaxis,
  27. yAxisOption: {
  28. min: 0,
  29. max: Math.ceil(Math.max(...targetyAxis, ...realityyAxis) / 100) * 100 || 10,
  30. },
  31. seriesData: [
  32. {
  33. type: 'bar',
  34. name: '目标',
  35. barWidth: 16,
  36. barMinHeight: 2,
  37. itemStyle: {
  38. color: '#5470c6',
  39. },
  40. label: {
  41. show: true,
  42. color: '#c6c6c6',
  43. position: 'top',
  44. distance: 0,
  45. fontWeight: 'bold',
  46. },
  47. data: targetyAxis,
  48. },
  49. {
  50. type: 'bar',
  51. name: '设计',
  52. barWidth: 16,
  53. barMinHeight: 2,
  54. barGap: '60%',
  55. itemStyle: {
  56. color: '#91cc75',
  57. },
  58. label: {
  59. show: true,
  60. color: '#c6c6c6',
  61. position: 'top',
  62. distance: 0,
  63. fontWeight: 'bold',
  64. },
  65. data: realityyAxis,
  66. },
  67. ],
  68. };
  69.  
  70. const tooltipFormatter = params => {
  71. const dataIndex = params[0].dataIndex;
  72. return `<div style="margin: 0px 0 0;line-height:1;min-width: 140px">
  73. <div>${params[0].axisValue}</div>
  74. <div style="margin-top:10px">
  75. <div style="display: flex;align-items: center;justify-content: space-between">
  76. <div style="display: flex;align-items: center;">
  77. <span style="background-color: ${params[0].color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
  78. <span>${params[0].seriesName}</span>
  79. </div>
  80. <div style="color:#666;font-weight:900;font-size:14px">${params[0].value}</div>
  81. </div>
  82. </div>
  83. <div style="margin-top:10px">
  84. <div style="display: flex;align-items: center;justify-content: space-between">
  85. <div style="display: flex;align-items: center;">
  86. <span style="background-color: ${params[1].color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
  87. <span>${params[1].seriesName}</span>
  88. </div>
  89. <div style="color:#666;font-weight:900;font-size:14px">${params[1].value}</div>
  90. </div>
  91. </div>
  92. <div style="margin-top:10px">
  93. <div style="display: flex;align-items: center;justify-content: space-between">
  94. <div style="display: flex;align-items: center;">
  95. <span style="background-color: #fac858;width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
  96. <span>是否达标</span>
  97. </div>
  98. <div style="color:#666;font-weight:900;font-size:14px">${data.resultyAxis[dataIndex]}</div>
  99. </div>
  100. </div>
  101. </div>`;
  102. };
  103. </script>
  104.  
  105. <style lang="scss" scoped>
  106. .standard_condition {
  107. height: 300px;
  108. }
  109. </style>