<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
          <h2 style="margin-left: 30%; margin-top: 30px; font-size: 35px">用户总人数</h2>
          <div style="font-family: AlimamaDaoLiTi; font-size: 50px; margin-left: 30px; margin-top: 30%">63542876546098</div>
      </el-col>
      <el-col :span="6">
        <h2 style="margin-left: 30%; margin-top: 30px; font-size: 35px">每日新增人数</h2>
        <div style="font-family: AlimamaDaoLiTi; font-size: 120px; margin-left: 25%; margin-top: 20%">4536</div>
      </el-col>
      <el-col :span="6">
          <h2 style="margin-left: 23%; margin-top: 30px; font-size: 35px">用户等级占比</h2>
          <div id="level" style="width: 500px;height:350px;margin-left: -50px"></div>
      </el-col>
      <el-col :span="6">
        <h2 style="margin-left: 23%; margin-top: 30px; font-size: 35px">用户年龄占比</h2>
        <div id="personAge" style="width: 500px;height:350px; margin-left: -50px"></div>
      </el-col>
    </el-row>

    <el-tabs type="border-card">
      <el-tab-pane label="电  影">
        <div id="film" style="width: 900px;height:430px; margin: 0 auto"></div>
      </el-tab-pane>
      <el-tab-pane label="电视剧">
        <div id="tvPlay" style="width: 900px;height:430px; margin: 0 auto"></div>
      </el-tab-pane>
      <el-tab-pane label="综  艺">
        <div id="variety" style="width: 900px;height:430px; margin: 0 auto"></div>
      </el-tab-pane>
      <el-tab-pane label="动  漫">
        <div id="anime" style="width: 900px;height:430px; margin: 0 auto"></div>
      </el-tab-pane>
      <el-tab-pane label="自  制">
        <div id="selfControl" style="width: 900px;height:430px; margin: 0 auto"></div>
      </el-tab-pane>
      <el-tab-pane label="搬  运">
        <div id="transport" style="width: 900px;height:430px; margin: 0 auto"></div>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
export default {
  name: "adminData",
  data() {
    return {
      activeName: 'first'
    }
  },
  mounted() {
    this.film()
    this.tvPlay()
    this.variety()
    this.anime()
    this.selfControl()
    this.transport()
    this.level()
    this.personAge()

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    film() {
// 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("film")
      );
// 配置option选项
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['观看数', '点赞数', '收藏数', '评论数', '弹幕数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '观看数',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '评论数',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '弹幕数',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
// 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },
    tvPlay() {
// 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("tvPlay")
      );
// 配置option选项
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['观看数', '点赞数', '收藏数', '评论数', '弹幕数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '观看数',
            type: 'line',
            stack: 'Total',
            data: [600, 400, 11, 14, 143, 53, 246]
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '评论数',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '弹幕数',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
// 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },
    variety() {
// 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("variety")
      );
// 配置option选项
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['观看数', '点赞数', '收藏数', '评论数', '弹幕数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '观看数',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '评论数',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '弹幕数',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
// 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },
    anime() {
// 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("anime")
      );
// 配置option选项
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['观看数', '点赞数', '收藏数', '评论数', '弹幕数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '观看数',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '评论数',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '弹幕数',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
// 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },
    selfControl() {
// 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("selfControl")
      );
// 配置option选项
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['观看数', '点赞数', '收藏数', '评论数', '弹幕数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '观看数',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '评论数',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '弹幕数',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
// 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },
    transport() {
// 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("transport")
      );
// 配置option选项
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['观看数', '点赞数', '收藏数', '评论数', '弹幕数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '观看数',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '评论数',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '弹幕数',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
// 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },
    level() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("level")
      );
      // 配置option选项
      let option = {

        tooltip: {
          trigger: 'item'
        },
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 30
        },
        series: [
          {
            name: '用户等级占比',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: '0-10级'},
              {value: 735, name: '11-20级'},
              {value: 580, name: '21-30级'},
              {value: 484, name: '31-40级'},
              {value: 300, name: '41-50级'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },
    personAge() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
          document.getElementById("personAge")
      );
      // 配置option选项
      let option = {
        tooltip: {
          trigger: 'item'
        },
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 30
        },
        series: [
          {
            name: '用户年龄占比',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: '0-18岁'},
              {value: 735, name: '19-225岁'},
              {value: 580, name: '25-35岁'},
              {value: 484, name: '35-45岁'},
              {value: 300, name: '45岁以上'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 把配置option选项用js放进dom节点
      myChart.setOption(option);
    },


  }


}
</script>

<style scoped>

</style>