left-top.vue 4.1 KB

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