trend.blade.php 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. @extends('admin/layout')
  2. @section('header_extend')
  3. @endsection
  4. @section('content')
  5. <body class="gray-bg">
  6. <div class="ibox float-e-margins">
  7. <div class="ibox-title">
  8. <h5>趋势图</h5>
  9. </div>
  10. <div class="ibox-content">
  11. <div id="siteStatus" style="width: 100%;height: 300px;"></div>
  12. </div>
  13. </div>
  14. </body>
  15. @endsection
  16. @section('footer')
  17. {{--echarts--}}
  18. <script src="{{asset('js/plugins/echarts/echarts.min.js')}}"></script>
  19. <script src="{{asset('js/plugins/wonderland/wonderland.js?v=1.3')}}"></script>
  20. <script>
  21. // 折线图
  22. var siteStatusLineChart = echarts.init(document.getElementById('siteStatus'),'wonderland');
  23. var siteStatusLineXAxis = JSON.parse('{!! json_encode($line['xAxis']) !!}');
  24. var queryData = JSON.parse('{!! json_encode($line['queryData']) !!}');
  25. var auditData = JSON.parse('{!! json_encode($line['auditData']) !!}');
  26. var siteStatusLineOption = {
  27. tooltip: {
  28. trigger: 'axis',
  29. axisPointer: {
  30. type: 'cross',
  31. crossStyle: {
  32. color: '#999'
  33. }
  34. }
  35. },
  36. toolbox: {
  37. feature: {
  38. dataView: {show: true, readOnly: false},
  39. magicType: {show: true, type: ['bar', 'pie']},
  40. restore: {show: true},
  41. saveAsImage: {show: true}
  42. }
  43. },
  44. legend: {
  45. data: ['充值金额']
  46. },
  47. xAxis: [
  48. {
  49. type: 'category',
  50. data: siteStatusLineXAxis,
  51. axisPointer: {
  52. type: 'shadow'
  53. },
  54. splitLine: {
  55. show: false
  56. }
  57. }
  58. ],
  59. yAxis: [
  60. {
  61. type: 'value',
  62. name: '',
  63. min: 0,
  64. axisLabel: {
  65. formatter: '{value}'
  66. },
  67. axisLine: {
  68. show: false //隐藏Y轴
  69. }
  70. }
  71. ],
  72. series: [
  73. {
  74. name: '软文查找数量',
  75. type: 'line',
  76. data: queryData
  77. },
  78. {
  79. name: '软文审核数量',
  80. type: 'line',
  81. data: auditData
  82. }
  83. ]
  84. };
  85. siteStatusLineChart.setOption(siteStatusLineOption);
  86. </script>
  87. @endsection