right-top.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <template>
  2. <div>
  3. <div class="loading" v-if="loading"><a-spin /></div>
  4. <Echart
  5. id="rightTop"
  6. :options="option"
  7. class="right_top_inner"
  8. v-if="pageflag"
  9. ref="charts"
  10. />
  11. <Reacquire v-else @onclick="getData" style="line-height: 200px">
  12. 重新获取
  13. </Reacquire>
  14. </div>
  15. </template>
  16. <script>
  17. import { graphic } from 'echarts'
  18. import { querySaleTrend } from '@/api/bigScreen.js'
  19. import getDate from '@/libs/getDate.js'
  20. export default {
  21. props: {
  22. curYear: {
  23. type: [Number, String],
  24. default: ''
  25. }
  26. },
  27. data () {
  28. return {
  29. option: {},
  30. pageflag: true,
  31. timer: null,
  32. loading: false
  33. }
  34. },
  35. mounted () {
  36. this.getData()
  37. },
  38. watch:{
  39. curYear (a,b){
  40. this.getData()
  41. }
  42. },
  43. beforeDestroy () {
  44. this.clearData()
  45. },
  46. methods: {
  47. clearData () {
  48. if (this.timer) {
  49. clearInterval(this.timer)
  50. this.timer = null
  51. }
  52. },
  53. getData () {
  54. this.loading = true
  55. querySaleTrend(getDate.getBeDateByYear(this.curYear)).then((res) => {
  56. if (!this.timer) {
  57. console.log('销售趋势分析', res)
  58. }
  59. if (res.status == 200) {
  60. this.$nextTick(() => {
  61. this.init(res.data.dateList, res.data.amountList, res.data.qtyList)
  62. this.switper()
  63. })
  64. } else {
  65. this.pageflag = false
  66. }
  67. this.loading = false
  68. })
  69. },
  70. // 轮询
  71. switper () {
  72. if (this.timer) {
  73. return
  74. }
  75. const looper = (a) => {
  76. this.getData()
  77. }
  78. this.timer = setInterval(
  79. looper,
  80. this.$store.state.setting.echartsAutoTime
  81. )
  82. const myChart = this.$refs.charts.chart
  83. myChart.on('mouseover', (params) => {
  84. this.clearData()
  85. })
  86. myChart.on('mouseout', (params) => {
  87. this.timer = setInterval(
  88. looper,
  89. this.$store.state.setting.echartsAutoTime
  90. )
  91. })
  92. },
  93. init (xData, yData, yData2) {
  94. const colorList = ['#ffaa00', '#34c2ff', '#fe9a8b', '#F56948', '#9E87FF']
  95. this.option = {
  96. tooltip: {
  97. trigger: 'axis',
  98. backgroundColor: 'rgba(0,0,0,.6)',
  99. borderColor: 'rgba(147, 235, 248, .8)',
  100. textStyle: {
  101. color: '#FFF'
  102. },
  103. formatter: function (params) {
  104. return params[0].seriesName + ': ' + (params[0].value / 10000).toFixed(2) + '万元' + '<br>' + (params[1] ? (params[1].seriesName + ': ' + params[1].value) : '')
  105. }
  106. },
  107. legend: {
  108. show: true,
  109. top: '0',
  110. left: 'center',
  111. textStyle: {
  112. color: '#eee'
  113. }
  114. },
  115. grid: {
  116. // 布局
  117. show: true,
  118. left: '5px',
  119. right: '5px',
  120. bottom: '5px',
  121. top: '35px',
  122. containLabel: true,
  123. borderColor: 'rgba(31,99,163,.1)'
  124. },
  125. xAxis: [{
  126. type: 'category',
  127. data: xData,
  128. axisLine: {
  129. lineStyle: {
  130. color: 'rgba(31,99,163,1)'
  131. }
  132. },
  133. axisTick: {
  134. show: false
  135. },
  136. axisLabel: {
  137. interval: 0,
  138. textStyle: {
  139. color: '#eee',
  140. fontWeight: '500'
  141. },
  142. // 默认x轴字体大小
  143. fontSize: 12,
  144. // margin:文字到x轴的距离
  145. margin: 15
  146. },
  147. boundaryGap: false
  148. }],
  149. yAxis: [{
  150. type: 'value',
  151. name: '销售金额',
  152. axisTick: {
  153. show: false
  154. },
  155. axisLine: {
  156. show: true,
  157. lineStyle: {
  158. color: colorList[0]
  159. }
  160. },
  161. axisLabel: {
  162. color: colorList[0],
  163. fontWeight: '500',
  164. formatter: function (value) {
  165. return (value / 10000) + '万'
  166. }
  167. },
  168. splitLine: {
  169. show: false
  170. }
  171. }, {
  172. type: 'value',
  173. position: 'right',
  174. name: '销售数量',
  175. axisTick: {
  176. show: false
  177. },
  178. axisLabel: {
  179. color: colorList[1],
  180. fontWeight: '500',
  181. formatter: '{value}'
  182. },
  183. axisLine: {
  184. show: true,
  185. lineStyle: {
  186. color: colorList[1]
  187. }
  188. },
  189. splitLine: {
  190. show: false
  191. }
  192. }],
  193. series: [{
  194. name: '销售金额',
  195. type: 'line',
  196. data: yData,
  197. symbolSize: 1,
  198. symbol: 'circle',
  199. smooth: true,
  200. yAxisIndex: 0,
  201. showSymbol: false,
  202. lineStyle: {
  203. width: 1,
  204. color: new graphic.LinearGradient(0, 1, 0, 0, [{
  205. offset: 0,
  206. color: colorList[0]
  207. },
  208. {
  209. offset: 1,
  210. color: colorList[0]
  211. }
  212. ]),
  213. shadowColor: 'rgba(158,135,255, 0.3)',
  214. shadowBlur: 10,
  215. shadowOffsetY: 20
  216. },
  217. itemStyle: {
  218. normal: {
  219. color: colorList[0],
  220. borderColor: colorList[0]
  221. }
  222. }
  223. },
  224. {
  225. name: '销售数量',
  226. type: 'line',
  227. data: yData2,
  228. symbolSize: 1,
  229. yAxisIndex: 1,
  230. symbol: 'circle',
  231. smooth: true,
  232. showSymbol: false,
  233. lineStyle: {
  234. width: 1,
  235. color: new graphic.LinearGradient(0, 0, 1, 0, [{
  236. offset: 0,
  237. color: colorList[1]
  238. },
  239. {
  240. offset: 1,
  241. color: colorList[1]
  242. }
  243. ]),
  244. shadowColor: 'rgba(254,154,139, 0.3)',
  245. shadowBlur: 10,
  246. shadowOffsetY: 20
  247. },
  248. itemStyle: {
  249. normal: {
  250. color: colorList[1],
  251. borderColor: colorList[1]
  252. }
  253. }
  254. }
  255. ]
  256. }
  257. }
  258. }
  259. }
  260. </script>
  261. <style lang="less" scoped>
  262. .right_top_inner {
  263. margin-top: 0;
  264. }
  265. </style>