dvcp_v2_wxcp_app/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

<template>
  <div class="AppPropagandaStatistics">
    <div class="calendar_header">
      <u-section title="宣发日历" :show-line="false"  sub-title="查看更多"></u-section>
    </div>
    <div class="threeDays">
      <div class="yesterday">
        <div class="itemYesterday">昨天<span>11:51</span></div>
        <div>晴风小区志愿者活动</div>
      </div>
      <div class="today">
        <div class="itemToday">今天<span>11:51</span></div>
        <div>晴风小区志愿者活动</div>
      </div>
      <div class="tomorrow">
        <div class="itemTomorrow">明天<span>11:51</span></div>
        <div @click="showMore(index)">晴风小区志愿者活动</div>
        <div class="isShow" @click="showMore()">{{ isShow ? '收起' : '展开' }}</div>
        <span ></span>
      </div>
    </div>
    

    <!-- 折线图 -->
    <div class="brokenEcharts">
      <div>
        
      </div>
      <div id="brokenEcharts"></div>
    </div>
    <div class="columnarEcharts">
      <div id="columnarEcharts"></div>
    </div>
    <div class="pieEcharts">
      <div id="pieEcharts"></div>
    </div>
  </div>
</template>

<script>

import echarts from 'echarts';
export default {
  name: 'AppPropagandaStatistics',
  appName: '宣发统计',
  data() {
    return {
      isShow: false,
      brokenEcharts: null,
      columnarEcharts: null,
      pieEcharts: null,
    }
  },
  
  onShow() {
    document.title = '宣发统计'
  },
  mounted() {
    this.getBrokenEcharts()
    this.getColumnarEcharts()
    this.getPieEcharts()
  },
  methods: {
    showMore() {},
    
    // 折线图
    getBrokenEcharts() {
      this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
      this.brokenEcharts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          selectedMode: false,
          orient: 'horizontal',
          data: ['触达人次', '宣发次数', '宣发任务数']
        },
        grid: {
          left: '2%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '触达人次',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: '宣发次数',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330]
          },
          {
            name: '宣发任务数',
            type: 'line',
            data: [1000, 232, 201, 154, 190, 330]
          },
        ]
      })
    },
    // 柱状图
    getColumnarEcharts() {
      this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
      this.columnarEcharts.setOption({
        title: {
          text: '宣发明细'
        },
        xAxis: {
          type: 'category',
          data: ['卫健委', '法院', '团委', '扶贫办', '警察局']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            itemStyle:{
              normal:{
                  color:'#5087ec'
              }
            },
            type: 'bar'
          }
        ]
      })
    },
    // 带百分比饼图
    getPieEcharts() {
      this.pieEcharts = echarts.init(document.getElementById('pieEcharts'))
      this.pieEcharts.setOption( {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color:['#1684fc','#ccc'], 
        series: [
          {
            name: '群发送达率',
            type: 'pie',
            radius: ['60', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 10, name: '群发送达率', label:{
                normal:{ 
                  show:true,
                  formatter: '{d}%\n群发送达率',
                  textStyle: {
                    fontSize: 16,
                  },
                }}
              },
              {value: 120, name: '邮件营销'}
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.AppPropagandaStatistics {

  .calendar_header {
    padding: 26px 32px;
    box-sizing: border-box;
    background: #FFF;
    ::v-deep .u-section__title__text {
      font-size: 32px;
    }
  }
  .threeDays {
    background: #FFF;
    padding: 8px 32px 12px 32px;
    box-sizing: border-box;
    .yesterday,
    .today,
    .tomorrow {
      background: #F7F8FA;
      margin-bottom: 32px;
      padding: 30px 0 30px 40px;
      box-sizing: border-box;
      .isShow {
        color: #3AA0FF;
      }
      .itemYesterday,
      .itemToday,
      .itemTomorrow {
        color: #999999;
        span {
          margin-left: 20px;
        }
        
      }
    }
    .yesterday {
      border-left: 6px solid #FBD444;
    }
    .today {
      border-left: 6px solid #50CB74;
    }
    .tomorrow {
      border-left: 6px solid #3AA0FF;
    }
  }
  
  
  .brokenEcharts {
    padding: 32px 0 60px 0,
    
  }

  .brokenEcharts,
  .columnarEcharts,
  .pieEcharts {
    background: #FFF;

    #brokenEcharts,
    #columnarEcharts,
    #pieEcharts {
      width: 100%;
      height: 400px;
      
    }
  }
}

</style>