left-top.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div style="height:100%">
  3. <div class="loading" v-if="loading"><a-spin /></div>
  4. <Echart id="leftTop" :options="options" class="left_top_inner" 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 { queryAreaSaleAmount } from '@/api/bigScreen.js'
  12. export default {
  13. data () {
  14. return {
  15. options: {},
  16. pageflag: true,
  17. timer: null,
  18. loading: false
  19. }
  20. },
  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. this.loading = true
  38. queryAreaSaleAmount({}).then(res => {
  39. // 只打印一次
  40. if (!this.timer) {
  41. console.log('区域销售金额占比', res)
  42. }
  43. if (res.status == 200) {
  44. const listData = []
  45. res.data.map(item => {
  46. listData.push({
  47. name: item.subareaNames,
  48. value: item.resultAmount
  49. })
  50. })
  51. this.$nextTick(() => {
  52. this.init(listData)
  53. this.switper()
  54. })
  55. } else {
  56. this.pageflag = false
  57. }
  58. this.loading = false
  59. })
  60. },
  61. // 轮询
  62. switper () {
  63. if (this.timer) {
  64. return
  65. }
  66. const looper = (a) => {
  67. this.getData()
  68. }
  69. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  70. const myChart = this.$refs.charts.chart
  71. myChart.on('mouseover', params => {
  72. this.clearData()
  73. })
  74. myChart.on('mouseout', params => {
  75. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  76. })
  77. },
  78. init (list) {
  79. const piedata = {
  80. name: '区域销售金额占比',
  81. type: 'pie',
  82. radius: ['42%', '65%'],
  83. avoidLabelOverlap: false,
  84. itemStyle: {
  85. borderRadius: 4,
  86. borderColor: 'rgba(0,0,0,0)',
  87. borderWidth: 2
  88. },
  89. data: list
  90. }
  91. this.options = {
  92. tooltip: {
  93. trigger: 'item',
  94. backgroundColor: 'rgba(0,0,0,.6)',
  95. borderColor: 'rgba(147, 235, 248, .8)',
  96. textStyle: {
  97. color: '#FFF'
  98. }
  99. },
  100. legend: {
  101. show: false,
  102. top: '5%',
  103. left: 'center'
  104. },
  105. series: [
  106. // 展示圆点
  107. {
  108. ...piedata,
  109. tooltip: { show: true },
  110. label: {
  111. formatter: ' {b|{b}} {per|{d}%} ',
  112. // position: "outside",
  113. rich: {
  114. b: {
  115. color: '#fff',
  116. fontSize: 12,
  117. lineHeight: 26
  118. },
  119. c: {
  120. color: '#31ABE3',
  121. fontSize: 14
  122. },
  123. per: {
  124. color: '#31ABE3',
  125. fontSize: 14
  126. }
  127. }
  128. },
  129. labelLine: {
  130. length: 30, // 第一段线 长度
  131. length2: 10, // 第二段线 长度
  132. show: true
  133. },
  134. emphasis: {
  135. show: true
  136. }
  137. },
  138. {
  139. ...piedata,
  140. tooltip: { show: true },
  141. itemStyle: {},
  142. label: {
  143. backgroundColor: 'inherit', // 圆点颜色,auto:映射的系列色
  144. height: 0,
  145. width: 0,
  146. lineHeight: 0,
  147. borderRadius: 2.5,
  148. shadowBlur: 8,
  149. shadowColor: 'auto',
  150. padding: [2.5, -2.5, 2.5, -2.5]
  151. },
  152. labelLine: {
  153. length: 30, // 第一段线 长度
  154. length2: 10, // 第二段线 长度
  155. show: false
  156. }
  157. }
  158. ]
  159. }
  160. }
  161. }
  162. }
  163. </script>
  164. <style lang="less" scoped>
  165. </style>