首页echarts图表交互部分

view/templates/tpl/home.html

@@ -16,6 +16,77 @@
     <![endif]-->
   {literal}
   <style>
+    .admin-index-top-item-header{
+      width: 100%;
+      height: 46px;
+      line-height: 46px;
+      padding-left: 12px;
+      padding-right: 12px;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 16px;
+      font-family: PingFangSC-Regular;
+      text-align: left;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+    .admin-index-top-item-header-line{
+      width: 100%;
+      height: 1px;
+      background-color: rgba(232, 232, 232, 1);
+    }
+    .admin-index-top-item-header-left{
+      display: block;
+      float: left;
+      height: 100%;
+      width: auto;
+    }
+    .admin-index-top-item-header-left li{
+      display: inline-block;
+      float: left;
+      font-size: 16px;
+      font-family: PingFangSC-Regular;
+      color: rgba(0,0,0,0.65);
+      margin-right: 64px;
+      cursor: pointer;
+    }
+    .admin-index-top-item-header-left li.active{
+      font-family: PingFangSC-Medium !important;
+      color: #1890FF !important;
+      position: relative;
+    }
+    .admin-index-top-item-header-left li.active::after{
+      content: '';
+      width: 100%;
+      height: 2px;
+      border-radius: 1px;
+      background: #1890FF;
+      display: block;
+    }
+    .admin-index-top-item-header-right{
+      display: block;
+      float: right;
+      height: 100%;
+      width: auto;
+    }
+    .admin-index-top-item-header-right li{
+      display: inline-block;
+      float: left;
+      margin-left: 24px;
+      line-height: 55px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular;
+      color: #595959;
+      cursor: pointer;
+    }
+    .admin-index-top-item-header-right li.active{
+      color: #1890FF !important;
+    }
+    #admin-map-container{
+      width: 100%;
+      box-sizing: border-box;
+      height: 325px;
+      overflow: hidden;
+    }
   </style>
   {/literal}
 </head>
@@ -77,8 +148,23 @@
 
         </div>
       </div>
-      <div class="layui-col-lg9 admin-layui-col-top-right">
-        <div class="admin-index-top-item">2</div>
+      <div class="layui-col-lg7 admin-layui-col-top-right">
+        <div class="admin-index-top-item">
+          <div class="admin-index-top-item-header">
+            <ul class="admin-index-top-item-header-left">
+              <li class="active">销售额</li>
+              <li>退货订单数</li>
+            </ul>
+
+            <ul class="admin-index-top-item-header-right">
+              <li>本周</li>
+              <li>本月</li>
+              <li class="active">全年</li>
+            </ul>
+          </div>
+          <div class="admin-index-top-item-header-line"></div>
+          <div id="admin-map-container"></div>
+        </div>
       </div>
     </div>
 
@@ -139,6 +225,7 @@
   </div> -->
 </div>
 <script src="/js/layui.js"></script>
+<script src="/js/echarts_5.5.3.min.js"></script>
 {literal}
 <script>
 layui.use(['element', 'layer', 'util'], function(){
@@ -165,6 +252,83 @@ layui.use(['element', 'layer', 'util'], function(){
     }
   });
 });
+
+// width: 70px;
+// height: 22px;
+// font-size: 14px;
+// font-family: PingFangSC-Medium, PingFang SC;
+// font-weight: 500;
+// line-height: 22px;
+
+var myChart = echarts.init(document.getElementById('admin-map-container'));
+var monthList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+var option = {
+  title: {
+    text: '  销售额趋势',
+    textStyle:{
+      color: 'rgba(0,0,0,0.85)',
+      fontFamily:'PingFangSC-Medium',
+      fontSize: 14,
+      lineHeight:55,
+    },
+  },
+  grid:{
+    left:55,
+    top:74,
+    width:'90%',
+    height:226,
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  xAxis: {
+    data: monthList,
+    axisLabel:{
+      show:true,
+      color:'rgba(0,0,0,0.65)',
+      fontSize:12,
+      fontFamily: 'HelveticaNeue'
+    },
+    axisLine:{
+      show:true,
+      lineStyle:{
+        color:'#D9D9D9',
+      }
+    },
+    axisTick:{
+      show:true,
+      alignWithLabel:true,
+      length:5,
+    }
+  },
+  yAxis: {
+    splitLine:{
+      show:true,
+      lineStyle:{
+        color:['rgba(232, 232, 232, 1)'],
+        type:'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '销量',
+      type: 'bar',
+      data: [100, 1000, 256, 488, 588, 189, 110, 100, 556, 188, 888, 289],
+      itemStyle:{
+        color:'rgba(24, 144, 255)',
+        opacity:0.85
+      }
+    }
+  ]
+};
+
+// 使用刚指定的配置项和数据显示图表。
+myChart.setOption(option);
+
 </script>
 {/literal}
 </body>