进出场

liuqimichale
1 parent 5fed471f
Showing 3 changed files with 56 additions and 37 deletions
src/components/lineChart.vue
src/views/mainContainer.vue
src/views/outsection.vue
@@ -5,7 +5,6 @@
 <script>
 import echarts from 'echarts'
  
-require('echarts/theme/macarons') // echarts theme
 import {debounce} from '../utils/debounce'
  
 export default {
@@ -21,7 +20,7 @@ export default {
     },
     height: {
       type: String,
-      default: '205px'
+      default: '100%'
     },
     autoResize: {
       type: Boolean,
@@ -71,61 +70,85 @@ export default {
         tooltip: {
           trigger: 'axis'
         },
+        color:['#FFB130','#01AEFE'],
         legend: {
-          data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
+          data:['出场','入场'],
+          bottom:'2%',
+          textStyle: {
+            color: '#59AAF7'
+          }
         },
         grid: {
+          top:'8%',
           left: '3%',
           right: '4%',
-          bottom: '3%',
+          bottom: '14%',
           containLabel: true
         },
  
         xAxis: {
-          type: 'category',
-          boundaryGap: false,
+          axisLabel : {
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisLine:{
+            lineStyle:{
+              color:'rgba(89,170,247,.3)'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
           data: ['周一','周二','周三','周四','周五','周六','周日']
         },
         yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            name:'邮件营销',
-            type:'line',
-            stack: '总量',
-            data:[120, 132, 101, 134, 90, 230, 210]
+          type: 'value',
+          axisLabel : {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff'
+            }
           },
-          {
-            name:'联盟广告',
-            type:'line',
-            stack: '总量',
-            data:[220, 182, 191, 234, 290, 330, 310]
+          axisLine:{
+            lineStyle:{
+              color:'rgba(89,170,247,.3)'
+            }
           },
-          {
-            name:'视频广告',
-            type:'line',
-            stack: '总量',
-            data:[150, 232, 201, 154, 190, 330, 410]
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
           },
+          splitNumber:3
+        },
+        series: [
           {
-            name:'直接访问',
+            name:'出场',
             type:'line',
-            stack: '总量',
-            data:[320, 332, 301, 334, 390, 330, 320]
+            data:[120, 132, 101, 134, 90, 230, 210],
+            lineStyle: {
+              color: '#FFB130'
+            }
           },
           {
-            name:'搜索引擎',
+            name:'入场',
             type:'line',
-            stack: '总量',
-            data:[820, 932, 901, 934, 1290, 1330, 1320]
+            data:[220, 182, 191, 234, 290, 330, 310],
+            lineStyle: {
+              color: '#08B9FC'
+            }
           }
         ]
  
       })
     },
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el)
       this.setOptions(this.chartData)
     }
   }
@@ -9,8 +9,8 @@
       <li class="margin0-12">
         <div class="heightper-top"></div>
         <div class="heightper-bottom">
-          <outsection style="width: 50%;float: left"></outsection>
-          <vehiclesection style="width: 50%;float: left"></vehiclesection>
+          <outsection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></outsection>
+          <vehiclesection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></vehiclesection>
         </div>
       </li>
       <li>
@@ -47,8 +47,4 @@ export default {
 </script>
  
 <style lang="scss"  scoped>
-  .inout-wrap{
-    display: flex;
-
-  }
 </style>