<template>
  <div class="home">
    <div class="topnav">总览</div>
    <!-- 图片 -->
    <div class="gymbox">
      <div class="gympic">
        <img src="../assets/gymbg.png" />
      </div>
      <div class="gymnum">
        <span>年度进馆总人数</span>
        <p>23,556</p>
      </div>
    </div>
    <!-- 今日进馆 -->
    <div class="numbox">
      <span class="numicon"><img src="../assets/icon01.png" /></span>
      <div class="numdiv">
        <p class="ndtitle">23566</p>
        <p class="nddesc">今日进馆总人数</p>
      </div>
    </div>
    <!-- 本周进馆 -->
    <div class="numbox">
      <span class="numicon"><img src="../assets/icon02.png" /></span>
      <div class="numdiv">
        <p class="ndtitle">23566</p>
        <p class="nddesc">本周进馆总人数</p>
      </div>
    </div>
    <!-- 本月进馆 -->
    <div class="numbox">
      <span class="numicon"><img src="../assets/icon03.png" /></span>
      <div class="numdiv">
        <p class="ndtitle">23566</p>
        <p class="nddesc">本月进馆总人数</p>
      </div>
    </div>

    <!-- 客流趋势 -->
    <div class="klqs">
      <div class="klqs_bg">客流趋势</div>
      <div class="klbtn">
        <span :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
        <span :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
        <span :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
      </div>

    </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" 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">
        <p></p>今日各馆趋势
      </div>
      <div id="tdrs" style="width:100%;height:12rem;"></div>
    </div>

    <!-- 個場館實時進館人數 -->
    <div class="pcgrs">
      <div class="pcgrs_title">各场馆实时进馆人数</div>
      <!-- 場館實時 -->
      <div class="pcg_item">
        <span class="pcpos">体育场</span>
        <p class="pcval">23,456</p>
        <span class="pcrate">40%</span>
      </div>
      <!-- #2 -->
      <div class="pcg_item">
        <span class="pcpos">体育场</span>
        <p class="pcval">23,456</p>
        <span class="pcrate">40%</span>
      </div>
      <!-- 3 -->
      <div class="pcg_item">
        <span class="pcpos">体育场</span>
        <p class="pcval">23,456</p>
        <span class="pcrate">40%</span>
      </div>
      <!-- 4 -->
      <div class="pcg_item">
        <span class="pcpos">体育场</span>
        <p class="pcval">23,456</p>
        <span class="pcrate">40%</span>
      </div>
      <!-- 5 -->
      <div class="pcg_item">
        <span class="pcpos">体育场</span>
        <p class="pcval">23,456</p>
        <span class="pcrate">40%</span>
      </div>
      <!-- 6 -->
      <div class="pcg_item">
        <span class="pcpos">体育场</span>
        <p class="pcval">23,456</p>
        <span class="pcrate">40%</span>
      </div>

    </div>


  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'HomeView',
  data() {
    return {
      // 年月日选中的样式,默认日
      klselt: "d",
    }
  },
  mounted() {
    this.showorders()
    this.cgrs_line()
    this.cgchart()
  },
  // 方法
  methods: {
    //选择年月日中的某个
    selitem(type) {
      this.klselt = type;
    },
    // 圆柱图
    showorders() {
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById('showorders');
      var myChart = echarts.init(chartDom);
      // 指定图表的配置项和数据
      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 = {
        // backgroundColor: '#031245',
        color: [
          '#63caff',
          '#49beff',
          '#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',
        },
        yAxis: {
          // 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: data,
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 15,

            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' }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },

    // 场馆入场人数
    cgrs_line() {

      var chartDom = document.getElementById('tdrs');
      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 = {

        grid: {
          borderWidth: 0,
          top: 160,
          bottom: 160,
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: "category",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0B0765',
            }
          },
          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#FFFFFF',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          data: xData,
        }],
        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',
            },
            formatter: '{value}',
          },
        },
        series: series,
      }

      option && myChart.setOption(option);

    },

  }

}
</script>

<style scoped>
.home {
  position: relative;
}

.topnav {
  height: 46px;
  line-height: 46px;
  text-align: center;
  padding: 12rpx;
  width: 100%;
  position: fixed;
  z-index: 90;
  color: #fff;
  left: 0;
  top: 0;
  background-color: #080A25;
  margin-bottom: 30rpx;
}

.gymbox {
  margin-top: 3.2rem;
  width: 100%;
  background-image: url("../assets/gymbox_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  padding-top: 2.26rem;
  height: 20rem;
}

.gymbox .gympic {
  margin-left: auto;
  margin-right: auto;
  padding-top: 0rem;
  height: 12.68rem;
  width: 100%;
}

.gymbox .gympic img {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  display: block;
  padding-top: 0.2rem;
  height: 16rem;
}

.gymbox .gymnum {
  width: 60%;
  margin: 0.6rem auto;
  text-align: center;
  height: 3rem;
  padding-top: 1.4rem;
}

.gymbox .gymnum span {
  font-size: 0.86rem;
  display: block;
  line-height: 1.2rem;
}

.gymbox .gymnum p {
  line-height: 1.2;
  height: 26px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}

/* 數據box */
.numbox {
  width: 100%;
  height: 4rem;
  line-height: 1.2;
  margin-top: 2.6rem;
}

.numbox .numicon {
  display: block;
  width: 20%;
  height: 3.2rem;
  float: left;
}

.numbox .numdiv {
  width: 72%;
  background-image: url("../assets/num_bg.png");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 100%;
  float: left;
  margin-left: 0.68rem;
  height: 4rem;
  text-align: center;
}

.numbox .numdiv p {
  display: block;
  float: left;
  width: 100%;
  line-height: 0;
}

.numbox .numdiv .ndtitle {
  padding-top: 0.4rem;
  font-size: 1.08rem;
}

.numbox .numdiv .nddesc {
  color: #ccc;
  font-size: 0.4rem;
  padding-bottom: 0.2rem;
}

/** 客流趋势 */
.klqs {
  margin-top: 3rem;
  background-image: url("../assets/klqs_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 3.8rem;
  background-position: -1.04rem 0.2rem;
}

.klqs .klqs_bg {
  float: left;
  /* width: 80%; */
  margin-left: 4rem;
  /* padding-left: 6.4rem; */
  font-size: 1.6rem;
}

.klqs .klbtn {
  float: left;
  margin-left: 1.06rem;
}

.klqs .klbtn span {
  display: block;
  float: left;
  width: 2.2rem;
  height: 2.2rem;
  margin-left: 0.4rem;
  line-height: 2.2rem;
  text-align: center;
  border: 1px solid #006bff;
  cursor: pointer;
}

/* 选择年月日后的样式变化 */
.klqs .klbtn span.spactive {
  background-image: url('../assets/sactive_bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
}

/**  場館飽和度 */
.cgbox {
  background-image: url("../assets/cgbox_bg.png");
  width: 100%;
  height: 12rem;
  background-position: center center;
  background-size: 100% 100%;
  margin-top: 2.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;
}

/* 今日人數 */
.today_rs {
  margin-top: 2.6rem;
  width: 100%;
}

.today_rs .tdrs_title {
  background-image: url("../assets/klqs_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  height: 3.2rem;
  line-height: 2.86rem;
  background-position: -1.04rem 0.2rem;
  padding-left: 4.6rem;
  font-size: 1.6rem;
}

/** 各場館實時 */
.pcgrs {
  clear: both;
  margin-top: 2.6rem;
  width: 100%;
}

.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;
  padding-left: 4.6rem;
  font-size: 1.6rem;
}

.pcgrs .pcg_item {
  margin-top: 0.4rem;
  background-image: url("../assets/pcg_bg.png");
  background-repeat: no-repeat;
  height: 12rem;
  width: 48%;
  float: left;
  margin-left: 2%;
}

.pcgrs .pcg_item .pcpos {
  text-align: right;
  font-size: 0.68rem;
  display: block;
  float: right;
  margin-top: 1.6rem;
  padding-right: 1.18rem;
}

.pcgrs .pcg_item .pcval {
  font-size: 1.086rem;
  margin-top: 6rem;
  width: 68%;
  display: block;
  float: left;
  text-align: center;
}

.pcgrs .pcg_item .pcrate {
  /* width: 32%; */
  display: block;
  float: left;
  font-size: 0.86rem;
  margin-top: 4rem;
  text-align: center;
}</style>