dc49d34fe4f1bc1d79889ff5a9363fd8-js.php 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <?php /*a:2:{s:57:"D:\phpEnv\www\SCM-API\app\admin\view\dashboard\index.html";i:1750736984;s:52:"D:\phpEnv\www\SCM-API\app\admin\view\layout\vue.html";i:1750736984;}*/ ?>
  2. export default{
  3. data:{
  4. echarts:'',
  5. panel:[],
  6. line:{
  7. date:[],
  8. data:[]
  9. },
  10. table:[],
  11. bar:{
  12. date:[],
  13. name:[],
  14. data:[]
  15. },
  16. pie:[],
  17. order:{
  18. percentage:[0,0]
  19. },
  20. filterForm:{
  21. table:'all',
  22. select:'one',
  23. datepicker:['2023-01-01','2023-02-01'],
  24. }
  25. },
  26. onLoad:function (){
  27. Yunqi.use('/assets/js/echarts.min.js').then(res=>{
  28. this.echarts=res;
  29. this.parseData();
  30. });
  31. },
  32. methods:{
  33. parseData:function (){
  34. Yunqi.ajax.get('dashboard/index',{}).then(res=>{
  35. this.panel=res.panel;
  36. this.line=res.line;
  37. this.table=res.table;
  38. this.bar=res.bar;
  39. this.pie=res.pie;
  40. this.order=res.order;
  41. this.chart1();
  42. this.chart2();
  43. this.chart3();
  44. });
  45. },
  46. chart1:function () {
  47. let mychart = this.echarts.init(document.getElementById('chart1'), 'walden');
  48. mychart.setOption({
  49. title: {text: '每日新增用户数',left: 'center'},
  50. tooltip: {
  51. trigger: 'axis'
  52. },
  53. toolbox: {
  54. show: false,
  55. feature: {
  56. magicType: {show: true, type: ['stack', 'tiled']},
  57. saveAsImage: {show: true}
  58. }
  59. },
  60. xAxis: {
  61. type: 'category',
  62. boundaryGap: false,
  63. data: this.line.date
  64. },
  65. yAxis: {},
  66. grid: [{
  67. left: 40,
  68. top: 40,
  69. right: 0,
  70. bottom:30
  71. }],
  72. series: [{
  73. name: '注册用户',
  74. type: 'line',
  75. smooth: true,
  76. areaStyle: {
  77. normal: {}
  78. },
  79. lineStyle: {
  80. normal: {
  81. width: 1.5
  82. }
  83. },
  84. data: this.line.data
  85. }]
  86. });
  87. window.addEventListener('resize',()=>{
  88. mychart.resize();
  89. });
  90. },
  91. chart2:function (){
  92. let mychart = this.echarts.init(document.getElementById('chart2'))
  93. mychart.setOption({
  94. title: {text: '消费比例图',left: 'center'},
  95. legend: {
  96. orient: 'horizontal',
  97. bottom: 0,
  98. },
  99. series: [{
  100. type: 'pie',
  101. data:this.pie,
  102. label: {
  103. normal: {
  104. show: true,
  105. formatter: "¥{c}",
  106. }
  107. }
  108. }]
  109. });
  110. window.addEventListener('resize',()=>{
  111. mychart.resize();
  112. });
  113. },
  114. chart3:function (){
  115. let mychart = this.echarts.init(document.getElementById('chart3'))
  116. mychart.setOption({
  117. title: {text: '消费日历图',left: 'center'},
  118. legend: {
  119. orient: 'vertical',
  120. left: 'left',
  121. },
  122. yAxis: {},
  123. xAxis: {
  124. data: this.bar.date
  125. },
  126. grid: [{
  127. left: 100,
  128. top: 40,
  129. right: 40,
  130. bottom:20
  131. }],
  132. series: [
  133. {
  134. type: 'bar',
  135. name:this.bar.name[0],
  136. data: this.bar.data[0]
  137. },
  138. {
  139. type: 'bar',
  140. name:this.bar.name[1],
  141. data: this.bar.data[1]
  142. },
  143. {
  144. type: 'bar',
  145. name:this.bar.name[2],
  146. data: this.bar.data[2]
  147. }
  148. ]
  149. });
  150. window.addEventListener('resize',()=>{
  151. mychart.resize();
  152. });
  153. },
  154. changeForm:function (type){
  155. if(type){
  156. this.filterForm.table=type;
  157. }
  158. this.parseData();
  159. }
  160. }
  161. }