center-bottom.vue 4.2 KB

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