完成总览调整

src/App.vue

@@ -17,7 +17,6 @@
 
   left: 0;
   bottom: 0;
-  padding: 6rpx 0 0 0.6rem;
   z-index: 90;
 }
 

src/views/HomeView.vue

@@ -46,20 +46,63 @@
       </div>
 
     </div>
-    <div class="echartzone" id="showorders" style='min-width:100%;overflow-x: auto; height:16rem'></div>
+    <div class="echartzone" id="showorders" style='width:100%;height:14rem;'></div>
 
     <!-- 场馆饱和度 -->
     <div class="cgbox">
+      <!-- 左侧 -->
+      <div class="cglist cgleft">
+        <ul>
+          <li>
+            <span>体育场</span>
+            <span>20%</span>
+            <span><img src="../assets/tyc_icon.png" /></span>
+          </li>
+          <li>
+            <span>体育场</span>
+            <span>20%</span>
+            <span><img src="../assets/tyc_icon.png" /></span>
+          </li>
+          <li>
+            <span>体育场</span>
+            <span>20%</span>
+            <span><img src="../assets/tyc_icon.png" /></span>
+          </li>
+        </ul>
+      </div>
       <!-- 場館圖表 -->
-      <div id="cgchart"></div>
+      <div id="cgchart" class="cgpies"></div>
+      <!-- 右侧 -->
+      <div class="cglist cgright">
+        <ul>
+          <li>
+            <span><img src="../assets/tyc_icon.png" /></span>
+            <span>20%</span>
+            <span>体育场</span>
+          </li>
+          <li>
+            <span><img src="../assets/tyc_icon.png" /></span>
+            <span>20%</span>
+            <span>体育场</span>
+          </li>
+          <li>
+            <span><img src="../assets/tyc_icon.png" /></span>
+            <span>20%</span>
+            <span>体育场</span>
+          </li>
+        </ul>
+      </div>
+
     </div>
 
     <!-- 今日场馆人数 -->
     <div class="today_rs">
-      <div class="tdrs_title">今日各馆趋势</div>
+      <div class="tdrs_title">
-      <div id="tdrs" style="width:100%;height: 26rem;"></div>
+        <p></p>今日各馆趋势
+      </div>
+      <div id="tdrs" style="width:100%;height:12rem;"></div>
     </div>
-    
+
     <!-- 個場館實時進館人數 -->
     <div class="pcgrs">
       <div class="pcgrs_title">各场馆实时进馆人数</div>
@@ -120,6 +163,7 @@ export default {
   mounted() {
     this.showorders()
     this.cgrs_line()
+    this.cgchart()
   },
   // 方法
   methods: {
@@ -127,6 +171,7 @@ export default {
     selitem(type) {
       this.klselt = type;
     },
+    // 圆柱图
     showorders() {
       // 基于准备好的dom，初始化echarts实例
       var chartDom = document.getElementById('showorders');
@@ -134,31 +179,254 @@ export default {
       // 指定图表的配置项和数据
       var option;
 
+      // option = {
+      //   grid: { //整张图的大小，距离left，right，bottom的距离
+      //     left: '3%',
+      //     right: '4%',
+      //     bottom: '3%',
+      //     containLabel: true
+      //   },
+      //   xAxis: {
+      //     type: 'category',
+      //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      //   },
+      //   yAxis: {
+      //     type: 'value'
+      //   },
+
+      //   series: [
+      //     {
+      //       data: [120, 200, 150, 80, 70, 110, 130],
+      //       type: 'bar',
+      //       showBackground: true,
+      //       color: "#2626ff",
+      //       backgroundStyle: {
+      //         color: 'rgba(180, 180, 180, 0.2)'
+      //       },
+
+      //     }
+      //   ]
+      // };
+      var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
+      // var data = [Math.random() * 300]
       option = {
-        grid: { //整张图的大小，距离left，right，bottom的距离
+        // backgroundColor: '#031245',
-          left: '3%',
+        color: [
-          right: '4%',
+          '#63caff',
-          bottom: '3%',
+          '#49beff',
-          containLabel: true
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
         },
         xAxis: {
+          axisLabel: {
+            color: '#FFFFFF',
+            fontSize: 12,
+            interval: 0,
+            // show: false,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#0095FF',
+              width: 1,
+              type: 'solid',
+            },
+            show: true,
+          },
+          data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00', '22:00'],
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
         yAxis: {
-          type: 'value'
+          // show:false,
+          axisLabel: {
+            color: '#0095FF',
+            fontSize: 14,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#0095FF',
+              width: 1,
+            },
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#0095FF',
+              type: 'solid',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#0095FF',
+              width: 1,
+              type: 'solid',
+            },
+            show: false,
+          },
+          name: '',
         },
-
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: data,
             type: 'bar',
-            showBackground: true,
+            barMaxWidth: 'auto',
-            color: "#2626ff",
+            barWidth: 15,
-            backgroundStyle: {
+
-              color: 'rgba(180, 180, 180, 0.2)'
+            itemStyle: {
+              normal: {
+                color: function () {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                    { offset: 0, color: "#00B4FF" },
+                    { offset: 1, color: "#2F00FF" }
+                  ], false)
+                },
+                label: {
+                  show: false,//柱状上的数据
+                }
+              },
+
             },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 15,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'bar',
+            barMaxWidth: '15',
+            symbol: 'circle',
+            symbolOffset: [0, '50%'],
+            symbolSize: [10, 5],
+            color: '#fff',
+          },
+          {
+            data: data,
+            type: 'pictorialBar',
+            barMaxWidth: '15',
+            symbolPosition: 'end',
+            symbol: 'circle',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [15, 7],
+            zlevel: 2,
+          },
+          {
+            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 15,
+            barGap: '-100%',
+            zlevel: -1,
+
+            itemStyle: {
+              normal: {
+              },
+            }
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '15',
+            symbol: 'circle',
+            symbolOffset: [0, '50%'],
+            symbolSize: [15, 7],
+            zlevel: -2,
+          },
+          {
+            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+            type: 'pictorialBar',
+            barMaxWidth: '15',
+            symbolPosition: 'end',
+            symbol: 'circle',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [15, 7],
+            zlevel: -1,
+            itemStyle: {
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+              shadowBlur: 15
+            }
+          },
+        ],
+
+      };
+
+      option && myChart.setOption(option);
+    },
+
+    // 圆饼图
+    cgchart() {
+      var chartDom = document.getElementById('cgchart');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+
+        color: ["#0780e2", "#fdff00"],
 
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['60%', '70%'], //曲线范围
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 40,
+              // borderColor: '#fff',
+              borderWidth: 1
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ]
           }
         ]
       };
@@ -173,87 +441,130 @@ export default {
       var myChart = echarts.init(chartDom);
       var option;
 
+      var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00'];
+      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+      var name = []
+      var data = [
+        [137, 34, 135, 161, 74, 152, 110, 100, 150, 137, 34, 135, 161],
+        [174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34],
+        [134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135],
+        [147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161],
+        [124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134],
+        [154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175],
+        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
+        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
+        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
+      ]
+
+      var series = [];
+      for (var i = 0; i < 6; i++) {
+        series.push({
+          name: name[i],
+          type: "line",
+          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+          smooth: true, //是否平滑曲线显示
+          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: color[i]
+              }, {
+                offset: 0.8,
+                color: 'rgba(255,255,255,0)'
+              }], false),
+              // shadowColor: 'rgba(255,255,255, 0.1)',
+              shadowBlur: 10,
+              opacity: 0.3,
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: color[i],
+              lineStyle: {
+                width: 1,
+                type: 'solid' //'dotted'虚线 'solid'实线
+              },
+              borderColor: color[i], //图形的描边颜色。支持的格式同 color
+              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
+              barBorderRadius: 0,
+              label: {
+                show: false,
+              },
+              opacity: 0.5,
+            }
+          },
+          data: data[i],
+
+        })
+      }
       option = {
-        toolbox: {
+
-          feature: {
-            saveAsImage: {}
-          }
-        },
         grid: {
-          left: '3%',
+          borderWidth: 0,
-          right: '4%',
+          top: 160,
-          bottom: '3%',
+          bottom: 160,
-          containLabel: true
+          textStyle: {
-        },
+            color: "#fff"
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
           }
-        ],
+        },
-        yAxis: [
+        xAxis: [{
-          {
+          type: "category",
-            type: 'value'
+          axisLine: {
-          }
+            show: false,
-        ],
-        series: [
-          {
-            name: 'Email',
-            type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-              focus: 'series'
-            },
-            data: [120, 132, 101, 134, 90, 230, 210]
           },
-          {
+          splitLine: {
-            name: 'Union Ads',
+            show: true,
-            type: 'line',
+            lineStyle: {
-            stack: 'Total',
+              color: '#0B0765',
-            areaStyle: {},
+            }
-            emphasis: {
-              focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290, 330, 310]
           },
-          {
+          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
-            name: 'Video Ads',
+          axisTick: {
-            type: 'line',
+            show: false
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-              focus: 'series'
-            },
-            data: [150, 232, 201, 154, 190, 330, 410]
           },
-          {
+          splitArea: {
-            name: 'Direct',
+            show: false
-            type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-              focus: 'series'
-            },
-            data: [320, 332, 301, 334, 390, 330, 320]
           },
-          {
+          axisLabel: {
-            name: 'Search Engine',
+            inside: false,
-            type: 'line',
+            textStyle: {
-            stack: 'Total',
+              color: '#FFFFFF',
-            label: {
+              fontWeight: 'normal',
-              show: true,
+              fontSize: '12',
-              position: 'top'
             },
-            areaStyle: {},
+          },
-            emphasis: {
+          data: xData,
-              focus: 'series'
+        }],
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#0B0765 ',
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#0B0765 ',
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#0095FF',
+              fontWeight: 'normal',
+              fontSize: '12',
             },
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
+            formatter: '{value}',
-          }
+          },
-        ]
+        },
-      };
+        series: series,
+      }
 
       option && myChart.setOption(option);
 
@@ -415,7 +726,8 @@ export default {
   cursor: pointer;
 }
 
-.klqs .klbtn span.spactive{
+/* 选择年月日后的样式变化 */
+.klqs .klbtn span.spactive {
   background-image: url('../assets/sactive_bg.png');
   background-repeat: no-repeat;
   background-size: 100%;
@@ -426,11 +738,66 @@ export default {
 .cgbox {
   background-image: url("../assets/cgbox_bg.png");
   width: 100%;
-  height: 8.6rem;
+  height: 12rem;
-  background-position: 0 0;
+  background-position: center center;
-  background-size: 100%;
+  background-size: 100% 100%;
   margin-top: 2.4rem;
-  padding: 0.4rem;
+}
+
+/* 饼图 */
+.cgbox .cgpies {
+  width: 40%;
+  height: 12rem;
+  float: left;
+}
+
+.cgbox .cgleft {
+  width: 30%;
+  height: 12rem;
+  float: left;
+}
+
+.cgbox .cgleft>ul{
+  padding-left: 0.66rem;
+}
+.cgbox .cgright {
+  width: 30%;
+  height: 12rem;
+  float: left;
+}
+.cgbox .cgright>ul{
+  padding-left: 0.66rem;
+}
+.cgbox .cglist{
+  margin-top: 3rem;
+}
+.cgbox .cglist ul{
+  display: block;
+  width: 100%;
+}
+.cgbox .cglist ul li{
+  width: 100%;
+  list-style: none;
+  height: 0.66rem;
+  line-height: 0.66rem;
+  font-size: 0.66rem;
+  margin-top: 1rem;
+}
+.cgbox .cglist ul li span{
+  display: block;
+  float: left;
+  margin-left: 0.46rem;
+}
+
+.cgbox .cglist ul li span img{
+  width: 0.68rem;
+  height: 0.68rem;
+}
+
+.cgbox .cgright {
+  width: 30%;
+  height: 12rem;
+  float: left;
 }
 
 /* 今日人數 */
@@ -442,31 +809,33 @@ export default {
 .today_rs .tdrs_title {
   background-image: url("../assets/klqs_bg.png");
   background-repeat: no-repeat;
-  background-size: 100%;
+  background-size: 100% 100%;
-  height: 3.8rem;
+  background-position: 0 0;
+  height: 3.2rem;
+  line-height: 2.86rem;
   background-position: -1.04rem 0.2rem;
-  float: left;
+  padding-left: 4.6rem;
-  padding-left: 4rem;
   font-size: 1.6rem;
 }
 
 /** 各場館實時 */
-.pcgrs{
+.pcgrs {
   clear: both;
   margin-top: 2.6rem;
   width: 100%;
 }
-.pcgrs .pcgrs_title{
+
+.pcgrs .pcgrs_title {
   background-image: url("../assets/klqs_bg.png");
   background-repeat: no-repeat;
   background-size: 100%;
   height: 3.8rem;
   background-position: -1.04rem 0.2rem;
-  float: left;
+  padding-left: 4.6rem;
-  padding-left: 4rem;
   font-size: 1.6rem;
 }
-.pcgrs .pcg_item{
+
+.pcgrs .pcg_item {
   margin-top: 0.4rem;
   background-image: url("../assets/pcg_bg.png");
   background-repeat: no-repeat;
@@ -475,15 +844,17 @@ export default {
   float: left;
   margin-left: 2%;
 }
-.pcgrs .pcg_item .pcpos{
+
+.pcgrs .pcg_item .pcpos {
   text-align: right;
   font-size: 0.68rem;
   display: block;
   float: right;
   margin-top: 1.6rem;
-  padding-right: 0.6rem;
+  padding-right: 1.18rem;
 }
-.pcgrs .pcg_item .pcval{
+
+.pcgrs .pcg_item .pcval {
   font-size: 1.086rem;
   margin-top: 6rem;
   width: 68%;
@@ -491,12 +862,12 @@ export default {
   float: left;
   text-align: center;
 }
-.pcgrs .pcg_item .pcrate{
+
-  width: 32%;
+.pcgrs .pcg_item .pcrate {
+  /* width: 32%; */
   display: block;
   float: left;
   font-size: 0.86rem;
   margin-top: 4rem;
   text-align: center;
-}
+}</style>
-</style>