left-top.vue 4.1 KB

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