<template>
    <div class="charts" style="">
      <div id="project" style="height: 350px;width: 50%;float: left"></div>
      <div id="activeProject" style="height: 350px;width: 50%;float: left"></div>
      <div id="user" style="height: 350px;width: 50%;float: left"></div>
      <div id="activeUser" style="height: 350px;width: 50%;float: left"></div>
    </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/chart/pie');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  export default {
    name: "mutiChart",
    data () {
      return {
        projectX:[1,2,3],
        projectY:[1,2,3],
        activeProX:[1,2,3],
        activeProY:[1,2,3],
        userX:[1,2,3],
        userY:[1,2,3],
        activeUserX:[1,2,3],
        activeUserY:[1,2,3],
        chartData: [],
      }
    },
    props:{
      chartData:[],
    },
    mounted(){
      this.drawProject();
      this.drawActiveProject();
      this.drawUser();
      this.drawActiveUser();
      this.setData();
    },
    created () {
      this.setData();
    },

    methods:{
      drawProject(){
        let barGraph = echarts.init(document.getElementById('project'));
        if(this.projectX.length ==0 && this.projectY.length ==0 ){
          barGraph.showLoading(
            {
              text: '暂无数据',
              color: '#ffffff',
              textColor: '#000',
              maskColor: 'rgba(255, 255, 255, 0.8)',
              zlevel: 0,
            }
          );
        }
        barGraph.setOption({
          title: {
            text: '有效项目(累计)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            left: 'center',
            data: ['有效项目',],
            bottom:0
          },
          xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data: this.projectX
          },
          //网格配置 
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            containLabel: true//显示刻度标签
          },
          yAxis: {
            type: 'value',
            name: 'y',
            splitLine: {show: true},

          },
          series: [
            {
              name: '有效项目',
              type: 'line',
              data: this.projectY,
            },
          ]
        })
      },
      drawActiveProject(){
        let barGraph = echarts.init(document.getElementById('activeProject'));
        if(this.activeProX.length ==0 && this.activeProY.length ==0 ){
          barGraph.showLoading(
            {
              text: '暂无数据',
              color: '#ffffff',
              textColor: '#000',
              maskColor: 'rgba(255, 255, 255, 0.8)',
              zlevel: 0,
            }
          );
        }
        barGraph.setOption({
          title: {
            text: '月活项目(当月)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            left: 'center',
            data: ['月活项目',],
            bottom:0
          },
          xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data:this.activeProX,
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: 'y',
            splitLine: {show: true},
          },
          series: [
            {
              name: '月活项目',
              type: 'line',
              data: this.activeProY,
            },
          ]
        })
      },
      drawUser(){
        let barGraph = echarts.init(document.getElementById('user'));
        if(this.userX.length ==0 && this.userY.length ==0 ){
          barGraph.showLoading(
            {
              text: '暂无数据',
              color: '#ffffff',
              textColor: '#000',
              maskColor: 'rgba(255, 255, 255, 0.8)',
              zlevel: 0,
            }
          );
        }
        barGraph.setOption({
          title: {
            text: '用户总数(累计)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            left: 'center',
            data: ['用户总数',],
            bottom:0
          },
          xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data: this.userX,
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: 'y',
            splitLine: {show: true},
          },
          series: [
            {
              name: '用户总数',
              type: 'line',
              data: this.userY,
            },
          ]
        })
      },
      drawActiveUser(){
        let barGraph = echarts.init(document.getElementById('activeUser'));
        if(this.activeUserX.length ==0 && this.activeUserY.length ==0 ){
          barGraph.showLoading(
            {
              text: '暂无数据',
              color: '#ffffff',
              textColor: '#000',
              maskColor: 'rgba(255, 255, 255, 0.8)',
              zlevel: 0,
            }
          );
        }
        barGraph.setOption({
          title: {
            text: '活跃用户(当月)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            left: 'center',
            data: ['活跃用户',],
            bottom:0
          },
          xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data: this.activeUserX
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: 'y',
            splitLine: {show: true},
          },
          series: [
            {
              name: '活跃用户',
              type: 'line',
              data: this.activeUserY,
            },
          ]
        })
      },
      setData(){
        let projectAll = this.chartData[0];
        let projectAct = this.chartData[1];
        let userAll = this.chartData[2];
        let userAct = this.chartData[3];
        for(let sing of projectAll) {
          this.projectX.push(sing["formatD"])
          this.projectY.push(sing["count"])
        }
        console.log(this.projectX)
        console.log(this.projectY)
        for(let sing of projectAct) {
          this.activeProX.push(sing["formatD"])
          this.activeProY.push(sing["count"])
        }
        for(let sing of userAll) {
          this.userX.push(sing["formatD"])
          this.userY.push(sing["count"])
        }
        for(let sing of userAct) {
          this.activeUserX.push(sing["formatD"])
          this.activeUserY.push(sing["count"])
        }
      }
    }
  }
</script>

<style scoped>

</style>
