left-top.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!--
  2. * @Author: daidai
  3. * @Date: 2022-02-28 16:16:42
  4. * @LastEditors: Please set LastEditors
  5. * @LastEditTime: 2022-10-25 09:18:22
  6. * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
  7. -->
  8. <template>
  9. <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
  10. <Reacquire v-else @onclick="getData" style="line-height:200px">
  11. 重新获取
  12. </Reacquire>
  13. </template>
  14. <script>
  15. import { countSubareaDealerQty } from '@/api/bigScreen'
  16. export default {
  17. data () {
  18. return {
  19. options: {},
  20. listData: [],
  21. pageflag: true,
  22. timer: null
  23. }
  24. },
  25. created () {
  26. this.getData()
  27. },
  28. mounted () {
  29. },
  30. beforeDestroy () {
  31. this.clearData()
  32. },
  33. methods: {
  34. clearData () {
  35. if (this.timer) {
  36. clearInterval(this.timer)
  37. this.timer = null
  38. }
  39. },
  40. getData () {
  41. this.listData = []
  42. countSubareaDealerQty().then(res => {
  43. // 只打印一次
  44. if (!this.timer) {
  45. console.log('加盟商总数量', res)
  46. }
  47. if (res.status == 200) {
  48. let totalQty = 0
  49. res.data.map(item => {
  50. if (item.subareaName != 'totalQty') {
  51. this.listData.push({
  52. value: item.dealerQty,
  53. name: item.subareaName
  54. })
  55. } else {
  56. totalQty = item.dealerQty
  57. }
  58. })
  59. this.$emit('total', totalQty)
  60. this.$nextTick(() => {
  61. this.init()
  62. this.switper()
  63. })
  64. } else {
  65. this.pageflag = false
  66. }
  67. })
  68. },
  69. // 轮询
  70. switper () {
  71. if (this.timer) {
  72. return
  73. }
  74. const looper = (a) => {
  75. this.getData()
  76. }
  77. console.log(this.$store.state.setting)
  78. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  79. const myChart = this.$refs.charts.chart
  80. myChart.on('mouseover', params => {
  81. this.clearData()
  82. })
  83. myChart.on('mouseout', params => {
  84. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  85. })
  86. },
  87. init () {
  88. const piedata = {
  89. name: '加盟商数量',
  90. type: 'pie',
  91. radius: ['42%', '65%'],
  92. avoidLabelOverlap: false,
  93. itemStyle: {
  94. borderRadius: 4,
  95. borderColor: 'rgba(0,0,0,0)',
  96. borderWidth: 2
  97. },
  98. data: this.listData
  99. }
  100. this.options = {
  101. tooltip: {
  102. trigger: 'item',
  103. backgroundColor: 'rgba(0,0,0,.6)',
  104. borderColor: 'rgba(147, 235, 248, .8)',
  105. textStyle: {
  106. color: '#FFF'
  107. }
  108. },
  109. legend: {
  110. show: false,
  111. top: '5%',
  112. left: 'center'
  113. },
  114. series: [
  115. // 展示圆点
  116. {
  117. ...piedata,
  118. tooltip: { show: true },
  119. label: {
  120. formatter: ' {b|{b}} \n {c|{c}个} {per|{d}%} ',
  121. position: 'outside',
  122. rich: {
  123. b: {
  124. color: '#fff',
  125. fontSize: 12,
  126. lineHeight: 26
  127. },
  128. c: {
  129. color: '#31ABE3',
  130. fontSize: 14
  131. },
  132. per: {
  133. color: '#31ABE3',
  134. fontSize: 14
  135. }
  136. }
  137. },
  138. labelLine: {
  139. length: 40, // 第一段线 长度
  140. length2: 10, // 第二段线 长度
  141. show: true
  142. },
  143. emphasis: {
  144. show: true
  145. }
  146. }
  147. ]
  148. }
  149. }
  150. }
  151. }
  152. </script>
  153. <style lang="less" scoped>
  154. </style>