CostHistogram.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!--
  2. * @Author: your name
  3. * @Date: 2021-10-12 09:10:42
  4. * @LastEditTime: 2021-12-21 13:29:30
  5. * @LastEditors: Please set LastEditors
  6. * @Description: 成本分析的柱状图
  7. * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostHistogram.vue
  8. -->
  9. <template>
  10. <div class="cost-histogram">
  11. <div id="costHistogram"></div>
  12. </div>
  13. </template>
  14. <script>
  15. import { mapState } from "vuex";
  16. export default {
  17. props: {
  18. timeList: {
  19. type: Array,
  20. default: () => [],
  21. },
  22. dataList: {
  23. type: Array,
  24. default: () => [],
  25. },
  26. },
  27. computed: {
  28. ...mapState(["color"]),
  29. },
  30. data() {
  31. return {
  32. myChart: null,
  33. };
  34. },
  35. methods: {
  36. init() {
  37. let options = {
  38. color: [this.color],
  39. tooltip: {
  40. trigger: "axis",
  41. axisPointer: {
  42. type: "none",
  43. },
  44. },
  45. grid: {
  46. left: "3%",
  47. right: "12%",
  48. bottom: "6%",
  49. containLabel: true,
  50. },
  51. xAxis: {
  52. name: "时间",
  53. type: "category",
  54. data: this.timeList,
  55. axisTick: {
  56. show: false,
  57. },
  58. splitLine: {
  59. show: false,
  60. },
  61. // axisPointer: {
  62. // show: false,
  63. // },
  64. // axisTick: {
  65. // alignWithLabel: true,
  66. // },
  67. },
  68. yAxis: {
  69. name: "人次",
  70. type: "value",
  71. axisTick: {
  72. show: false,
  73. },
  74. splitLine: {
  75. show: false,
  76. },
  77. },
  78. series: [
  79. {
  80. name: "人次",
  81. type: "bar",
  82. barWidth: "15%",
  83. data: this.dataList,
  84. label: {
  85. show: true,
  86. verticalAlign: "bottom",
  87. },
  88. },
  89. ],
  90. };
  91. this.myChart.setOption(options, false);
  92. },
  93. },
  94. mounted() {
  95. this.myChart = this.$echarts.init(document.getElementById("costHistogram"));
  96. this.init();
  97. },
  98. watch: {
  99. color(newVal) {
  100. if (newVal) {
  101. this.myChart.clear();
  102. this.init();
  103. }
  104. },
  105. dataList: {
  106. handler() {
  107. this.myChart.clear();
  108. this.init();
  109. },
  110. },
  111. timeList: {
  112. handler() {
  113. this.myChart.clear();
  114. this.init();
  115. },
  116. },
  117. },
  118. };
  119. </script>
  120. <style scoped>
  121. .cost-histogram {
  122. display: inline-block;
  123. flex: 1;
  124. height: 100%;
  125. }
  126. #costHistogram {
  127. width: 100%;
  128. height: 100%;
  129. }
  130. </style>