index.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. {extend name='admin@main'}
  2. {block name='content'}
  3. <style>
  4. .store-total-container {
  5. font-size: 14px;
  6. margin-bottom: 20px;
  7. letter-spacing: 1px;
  8. }
  9. .store-total-container .store-total-icon {
  10. top: 45%;
  11. right: 8%;
  12. font-size: 65px;
  13. position: absolute;
  14. color: rgba(255, 255, 255, 0.4);
  15. }
  16. .store-total-container .store-total-item {
  17. color: #fff;
  18. line-height: 4em;
  19. padding: 15px 25px;
  20. position: relative;
  21. }
  22. .store-total-container .store-total-item > div:nth-child(2) {
  23. font-size: 46px;
  24. line-height: 46px;
  25. }
  26. </style>
  27. <div class="think-box-shadow store-total-container notselect">
  28. <div class="margin-bottom-15">微信统计</div>
  29. <div class="layui-row layui-col-space15">
  30. <div class="layui-col-sm6 layui-col-md3">
  31. <div class="store-total-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
  32. <div>粉丝数量</div>
  33. <div>{$totalFans|default='0'}</div>
  34. <div>关注的粉丝数量</div>
  35. </div>
  36. <i class="store-total-icon layui-icon layui-icon-user"></i>
  37. </div>
  38. <div class="layui-col-sm6 layui-col-md3">
  39. <div class="store-total-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
  40. <div>黑粉数量</div>
  41. <div>{$totalBlack|default='0'}</div>
  42. <div>拉黑的粉丝数量</div>
  43. </div>
  44. <i class="store-total-icon layui-icon layui-icon-auz"></i>
  45. </div>
  46. <div class="layui-col-sm6 layui-col-md3">
  47. <div class="store-total-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
  48. <div>图文总数</div>
  49. <div>{$totalNews|default='0'}</div>
  50. <div>图文素材数量</div>
  51. </div>
  52. <i class="store-total-icon layui-icon layui-icon-read"></i>
  53. </div>
  54. <div class="layui-col-sm6 layui-col-md3">
  55. <div class="store-total-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
  56. <div>回复数量</div>
  57. <div>{$totalRule|default='0'}</div>
  58. <div>回复规则数量</div>
  59. </div>
  60. <i class="store-total-icon layui-icon layui-icon-survey"></i>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="think-box-shadow store-total-container">
  65. <div class="margin-bottom-15">近六月粉丝趋势</div>
  66. <div id="main" style="height:390px"></div>
  67. </div>
  68. <script>
  69. require(['echarts'], function (echarts, chart) {
  70. chart = echarts.init(document.getElementById('main'));
  71. window.onresize = chart.resize;
  72. chart.setOption({
  73. tooltip: {trigger: 'axis'},
  74. grid: {top: '10%', left: '3%', right: '8%', bottom: '3%', containLabel: true},
  75. xAxis: [{
  76. type: 'category', scale: false,
  77. boundaryGap: false,
  78. axisLabel: {
  79. color: '#2f9de2',
  80. },
  81. data: eval('{:json_encode($totalJson.xs)}')
  82. }],
  83. yAxis: [{
  84. type: 'value',
  85. scale: true,
  86. max: function (value) {
  87. return Math.ceil(value.max / 50) * 50 + 100;
  88. },
  89. axisLabel: {
  90. color: '#2f9de2',
  91. formatter: "{value}人"
  92. },
  93. splitLine: {
  94. lineStyle: {
  95. type: 'dashed',
  96. color: '#cccccc'
  97. }
  98. }
  99. }],
  100. legend: {data: ['粉丝数量', '拉黑粉丝']},
  101. series: [
  102. {
  103. type: 'line',
  104. name: '粉丝数量',
  105. label: {normal: {show: true, position: ['30%', '-100%'], offset: [10, -10], formatter: "粉丝{c}人"}},
  106. data: eval('{:json_encode($totalJson.ys._0)}')
  107. },
  108. {
  109. type: 'line',
  110. name: '拉黑粉丝',
  111. label: {normal: {show: true, position: ['30%', '-100%'], offset: [10, -10], formatter: "拉黑{c}人"}},
  112. data: eval('{:json_encode($totalJson.ys._1)}')
  113. }
  114. ]
  115. });
  116. });
  117. </script>
  118. {/block}