4.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div class="box">
  3. <div class="tupian"></div>
  4. <div id="zz" style="width: 70%; height: 100%; "></div>
  5. </div>
  6. </template>
  7. <script>
  8. import { oldPersonVisitWay } from '../../api'
  9. export default {
  10. //巡防员巡防方式统计
  11. name: "PatrolmanPatrolModeCount",
  12. data() {
  13. return {
  14. dataArr: [],
  15. myChart: null
  16. }
  17. },
  18. methods: {
  19. async draw() {
  20. const result = await oldPersonVisitWay({}, 'POST');
  21. this.dataArr = result;
  22. const seriesArr = [];
  23. for(let i = 0; i < this.dataArr.length; i++) {
  24. const d = this.dataArr[i];
  25. const borderArr = new Array(this.dataArr.length).fill({});
  26. borderArr[i] = { value: 269, symbolPosition: 'start' };
  27. seriesArr.push({
  28. type: 'pictorialBar',
  29. symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
  30. symbolSize: [269, 32],
  31. symbolOffset: [0, 0],
  32. data: borderArr,
  33. label: {
  34. show: true,
  35. position: 'right',
  36. offset: [-120, -40],
  37. color: '#71dbff',
  38. fontSize: this.fontSize(0.2),
  39. formatter: (params) => {
  40. return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].value }%`;
  41. }
  42. },
  43. z: 1
  44. });
  45. const borderBgArr = new Array(this.dataArr.length).fill({});
  46. borderBgArr[i] = { value: 251, symbolPosition: 'start' };
  47. seriesArr.push({
  48. type: 'pictorialBar',
  49. symbol: `image://${require('../../assets/PatrolmanStatistics/border-bg.png')}`,
  50. symbolSize: [251, 21],
  51. symbolOffset: [10, 0],
  52. data: borderBgArr,
  53. label: {
  54. show: true,
  55. position: 'right',
  56. offset: [-280, -40],
  57. color: '#fff',
  58. fontSize: this.fontSize(0.18),
  59. formatter: (params) => {
  60. return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].label }`;
  61. }
  62. },
  63. z: 2
  64. });
  65. const step = (Math.floor(d.value / 10) < 1 ? 1 : Math.floor(d.value / 10));
  66. for(let j = 0; j < step; j++) {
  67. const blockArr = new Array(this.dataArr.length).fill({});
  68. blockArr[this.dataArr.length - 1 - i] = { value: 251, symbolPosition: 'start' };
  69. seriesArr.push({
  70. type: 'pictorialBar',
  71. symbol: `image://${require('../../assets/PatrolmanStatistics/block-' + j + '.png')}`,
  72. symbolSize: [20, 19],
  73. symbolOffset: [10 + j * 25.6, 0],
  74. data: blockArr,
  75. z: 10
  76. });
  77. }
  78. const kkArr = new Array(length).fill({});
  79. kkArr[i] = { value: 300, symbolPosition: 'start' };
  80. // seriesArr.push({
  81. // type: 'pictorialBar',
  82. // symbol: `image://${require('../../assets/PatrolmanStatistics/big-img-' + (this.dataArr.length - 1 - i) + '.png')}`,
  83. // symbolSize: [157, 134],
  84. // symbolOffset: [-140, -10],
  85. // data: kkArr,
  86. // z: 2
  87. // });
  88. }
  89. if(this.myChart != null) {
  90. this.myChart.clear();
  91. }
  92. this.myChart = this.$echarts.init(document.getElementById('zz'));
  93. this.myChart.setOption({
  94. grid:{
  95. left:"6%",
  96. right:"2%",
  97. top:"2%",
  98. bottom:"2%",
  99. },
  100. xAxis: {
  101. max: 300,
  102. splitLine: {
  103. show: false
  104. },
  105. axisLine: {
  106. show: false
  107. },
  108. axisLabel: {
  109. show: false
  110. },
  111. axisTick: {
  112. show: false
  113. }
  114. },
  115. yAxis: {
  116. type: 'category',
  117. splitLine: {
  118. show: false
  119. },
  120. axisLine: {
  121. show: false
  122. },
  123. axisLabel: {
  124. show: false
  125. },
  126. axisTick: {
  127. show: false
  128. }
  129. },
  130. series: seriesArr
  131. });
  132. },
  133. fontSize(res) {
  134. let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  135. if (!clientWidth) return;
  136. let fontSize = 100 * (clientWidth / 1920);
  137. return res * fontSize;
  138. }
  139. },
  140. mounted() {
  141. this.draw();
  142. }
  143. }
  144. </script>
  145. <style scoped>
  146. .box {
  147. width: 100%;
  148. height: 100%;
  149. display: flex;
  150. }
  151. .tupian {
  152. width: 40%;
  153. background: url("../../assets/PatrolmanStatistics/people.png") no-repeat ;
  154. background-size: 100% 100%;
  155. height: 100%;
  156. }
  157. </style>