order_total.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. {extend name="common/common2" /}
  2. {block name="main"}
  3. <div class="row">
  4. <div class="col-sm-12">
  5. <div class="ibox float-e-margins">
  6. <div class="ibox-title">
  7. <h5>{$meta_title}</h5>
  8. </div>
  9. <div class="ibox-content">
  10. <div class="panel-body" id="printer">
  11. <div class="form-horizontal">
  12. <div>
  13. <fieldset>
  14. <div class="col-xs-6">
  15. {foreach $data as $k=>$v}
  16. <div class="form-group">
  17. <label class="col-sm-3 control-label">{$v.name}订单数</label>
  18. <div class="col-sm-5"><input class="form-control" value='{$v.value}' readonly ></div>
  19. </div>
  20. {/foreach}
  21. </div>
  22. <div class="col-xs-6">
  23. <div id="orders-chart" style="height:400px;"></div>
  24. </div>
  25. </fieldset>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. {/block}
  34. {block name="script"}
  35. <script src="/static/echarts.js"></script>
  36. <script type="text/javascript">
  37. var dom = document.getElementById("orders-chart");
  38. var myChart = echarts.init(dom);
  39. var labels = {:json_encode($data)};
  40. var datas = [];
  41. for (let o in labels){
  42. datas.push({
  43. name: labels[o].name,
  44. value:labels[o].value
  45. })
  46. }
  47. option = null;
  48. option = {
  49. title: {
  50. text: '订单情况',
  51. subtext: '',
  52. left: 'center'
  53. },
  54. tooltip: {
  55. trigger: 'item'
  56. },
  57. legend: {
  58. orient: 'vertical',
  59. left: 'left',
  60. },
  61. series: [
  62. {
  63. name: '订单量',
  64. type: 'pie',
  65. radius: '50%',
  66. data:datas,
  67. emphasis: {
  68. itemStyle: {
  69. shadowBlur: 10,
  70. shadowOffsetX: 0,
  71. shadowColor: 'rgba(0, 0, 0, 0.5)'
  72. }
  73. }
  74. }
  75. ]
  76. };
  77. if (option && typeof option === "object") {
  78. myChart.setOption(option, true);
  79. }
  80. </script>
  81. {/block}