center-bottom.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <div class="center_bottom">
  3. <Echart id="bottomLeftChart" :options="options" class="echarts_bottom" v-if="pageflag" ref="charts" />
  4. <Reacquire v-else @onclick="getData" style="line-height:200px">
  5. 重新获取
  6. </Reacquire>
  7. </div>
  8. </template>
  9. <script>
  10. import { countLevelProductQty } from '@/api/bigScreen'
  11. import { graphic } from 'echarts'
  12. export default {
  13. data () {
  14. return {
  15. options: {},
  16. pageflag: true,
  17. timer: null
  18. }
  19. },
  20. props: {},
  21. created () {
  22. this.getData()
  23. },
  24. mounted () {
  25. },
  26. beforeDestroy () {
  27. this.clearData()
  28. },
  29. methods: {
  30. clearData () {
  31. if (this.timer) {
  32. clearInterval(this.timer)
  33. this.timer = null
  34. }
  35. },
  36. getData () {
  37. countLevelProductQty({}).then((res) => {
  38. console.log('产品总数量', res)
  39. if (res.status == 200) {
  40. const ret = { category: [], barData: [] }
  41. let totalQty = 0
  42. res.data.map(item => {
  43. if (item.productLevel != 'totalQty') {
  44. ret.category.push(item.productLevel + '级')
  45. ret.barData.push(item.productQty)
  46. } else {
  47. totalQty = item.productQty
  48. }
  49. })
  50. this.$emit('total', totalQty)
  51. this.$nextTick(() => {
  52. this.init(ret)
  53. this.switper()
  54. })
  55. } else {
  56. this.pageflag = false
  57. }
  58. })
  59. },
  60. // 轮询
  61. switper () {
  62. if (this.timer) {
  63. return
  64. }
  65. const looper = (a) => {
  66. this.getData()
  67. }
  68. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  69. const myChart = this.$refs.charts.chart
  70. myChart.on('mouseover', params => {
  71. this.clearData()
  72. })
  73. myChart.on('mouseout', params => {
  74. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  75. })
  76. },
  77. init (newData) {
  78. this.options = {
  79. tooltip: {
  80. trigger: 'axis',
  81. backgroundColor: 'rgba(0,0,0,.6)',
  82. borderColor: 'rgba(147, 235, 248, .8)',
  83. textStyle: {
  84. color: '#FFF'
  85. },
  86. formatter: function (params) {
  87. // 添加单位
  88. var result = params[0].name + '<br>'
  89. params.forEach(function (item) {
  90. if (item.value) {
  91. result +=
  92. item.marker +
  93. ' ' +
  94. item.seriesName +
  95. ' : ' +
  96. item.value +
  97. '个</br>'
  98. } else {
  99. result += item.marker + ' ' + item.seriesName + ' : - </br>'
  100. }
  101. })
  102. return result
  103. }
  104. },
  105. legend: {
  106. data: ['品类销售分布'],
  107. textStyle: {
  108. color: '#B4B4B4'
  109. },
  110. top: '0'
  111. },
  112. grid: {
  113. left: '70px',
  114. right: '10px',
  115. bottom: '30px',
  116. top: '30px'
  117. },
  118. xAxis: {
  119. data: newData.category,
  120. axisLine: {
  121. lineStyle: {
  122. color: '#B4B4B4'
  123. }
  124. },
  125. axisTick: {
  126. show: false
  127. }
  128. },
  129. yAxis: [
  130. {
  131. splitLine: { show: false },
  132. axisLine: {
  133. lineStyle: {
  134. color: '#B4B4B4'
  135. }
  136. },
  137. axisLabel: {
  138. formatter: '{value}'
  139. }
  140. }
  141. ],
  142. series: [
  143. {
  144. name: '数量',
  145. type: 'bar',
  146. barWidth: 30,
  147. itemStyle: {
  148. borderRadius: 0,
  149. color: new graphic.LinearGradient(0, 0, 0, 1, [
  150. { offset: 0, color: '#956FD4' },
  151. { offset: 1, color: '#3EACE5' }
  152. ])
  153. },
  154. label: {
  155. show: true,
  156. position: 'outside',
  157. color: '#fff'
  158. },
  159. data: newData.barData
  160. }
  161. ]
  162. }
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="less" scoped>
  168. .center_bottom {
  169. width: 100%;
  170. height: 95%;
  171. .echarts_bottom {
  172. width: 100%;
  173. height: 100%;
  174. }
  175. }
  176. </style>