analysisPage.vue

<template>
  <div class="analysisPage H100">
    <div class="form_box">
      <el-form :inline="true"  class="search-form">
        <el-form-item>
          <span>查询条件</span>
        </el-form-item>
        <el-form-item>
          <el-date-picker style="margin: 10px 0px 0px;"
            v-model="value7"
            type="daterange"
            @change="getProcessDateItem"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="r-float">
          <el-button size="mini" type="primary" @click="onSearchs()">查询</el-button>
          <el-button size="mini" :type="primary1"   @click="onSearch('year')">年</el-button>
          <el-button size="mini" :type="primary2"   @click="onSearch('month')">月</el-button>
          <el-button size="mini" :type="primary3"   @click="onSearch('day')">日</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="myChart" ></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {
        value7: '',
        primary1:'primary',
        primary2:'',
        primary3:'',
        series:{},
        dateType:[],
        typeName:[],
        startDate: '',
        endDate: '',
        statisticsType: '',
        timeType: '',
      }
    },
    computed: {},
    mounted() {
      this.onSearch('year');
    },
    components: {},
    methods: {
      getProcessDateItem(val){
        if(val){
          if(val.length !== 0){
            this.startDate = val[0];
            this.endDate = val[1];}
        }else{
          this.startDate = '';
          this.endDate = '';
        }
      },
      onSearchs(){
        this.onSearch(this.statisticsType);
      },
      initGenderChart(){
        let myChart = echarts.init(document.getElementById('myChart'));
        const option= {
          title: {
            text: '页面访问量统计'
          },
          grid: {
            bottom: 80
          },
          // tooltip: {
          //   trigger: 'axis'
          // },
          tooltip : {
            trigger: 'axis',
          },
          legend: {
            top: 5,
            // data: ['业务办理助手','网点服务地图','热门产品','热门活动'],
            data: this.typeName,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dateType,
            name: '日期('+this.timeType+')',
            minInterval: 1,
            axisTick: {
              show: false
            },
          },
          yAxis: {
            type: 'value',
            name: '访问量：',
            minInterval: 1,
            axisTick: {
              show: false
            },
          },
          dataZoom: [
            {
              type: 'slider',//图表下方的伸缩条
              show : true,  //是否显示
              realtime : true,  //
              start : 0,  //伸缩条开始位置（1-100），可以随时更改
              end : 100,  //伸缩条结束位置（1-100），可以随时更改
            },
          ],
          series: [{
            // name:'业务办理助手',
            name:this.typeName[0],
            data: this.series[0].data,
            type: 'line',
            smooth: true,
            color: '#E6A23C',
            areaStyle: {
              color: '#E6A23C',
            }
          },{
            // name:'网点服务地图',
            name:this.typeName[1],
            data: this.series[1].data,
            type: 'line',
            smooth: true,
            color: '#aaC7E2',
            areaStyle: {
              color: '#aaC7E2',
            }
          },{
            // name:'热门产品',
            name:this.typeName[2],
            data: this.series[2].data,
            type: 'line',
            smooth: true,
            color: '#67C23A',
            areaStyle: {
              color: '#67C23A',
            }
          },{
            // name:'热门活动',
            name:this.typeName[3],
            data: this.series[3].data,
            type: 'line',
            smooth: true,
            color: '#dd5861',
            areaStyle: {
              color: '#dd5861',
            }
          }]
        };
        myChart.setOption(option);
      },
      onSearch(statisticsType){
        if(statisticsType == 'year'){
          this.primary1='primary';
          this.primary2='';
          this.primary3='';
        }else if(statisticsType == 'month') {
          this.primary2='primary';
          this.primary1='';
          this.primary3='';
        }else{
          this.primary3='primary';
          this.primary1='';
          this.primary2='';
        }

        let vm = this;
        vm.statisticsType = statisticsType;
        vm.timeType = vm.statisticsType == 'year'? '年':(vm.statisticsType == 'month'? '月':'日');
        let param ={
          startDate:vm.startDate,
          endDate:vm.endDate,
          statisticsType: vm.statisticsType,}
        vm.$https({
          url : "pageViews/statisticsPageViews",
          method: 'get',
          authType: this.backToken
        },param).then((res)=>{
          let data = res.data;
          vm.typeName =data.legend.data;
          vm.series = data.series;
          vm.dateType = data.xAxis.data;
          this.initGenderChart();
        }).catch(function(err){
          console.log(err);
        })
      },
    }

  }
</script>

<style lang="less">
  @import '../../style/common';
  .analysisPage{
    .form_box{
      padding: 15px 20px;
      min-width: 460px;
      .search-form{
        padding: 0px 20%;
        min-width: 900px;
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner,
        .el-input--mini .el-input__inner{
          width: 230px!important;
        }
        .el-form-item .el-form-item__content .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange{
          margin: 4px 0px 0px!important;
        }
        .el-date-editor .el-range-input{
          width: 100%;
        }
        .el-range-separator{
          width: 30px;
          line-height: 25px;
        }
        .el-date-editor .el-range__icon,.el-date-editor .el-range__close-icon{
          line-height: 25px;
        }
      }
    }
    #myChart{
      width: 100%;
      height: 500px;
      canvas{
        width: 100% !important;
      }
    }
  }



</style>