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

<template>
  <div class="AppPropagandaStatistics">
    
    <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>

    <!-- 折线图 -->
    <div class="brokenEcharts">
      <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 { uniCalendar } from "@dcloudio/uni-ui"
import echarts from 'echarts';
export default {
  name: 'AppPropagandaStatistics',
  appName: '宣发统计',
  data() {
    return {
      date: '',
      selected: [{date: '2022-07-08',}],
      brokenEcharts: null,
      columnarEcharts: null,
      pieEcharts: null,
    }
  },
  components: {
    uniCalendar
  },
  onShow() {
    document.title = '宣发统计'
    
  },
  mounted() {
    this.getBrokenEcharts()
    this.getColumnarEcharts()
    this.getPieEcharts()
  },
  methods: {
    change(val) {
      this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
    },
    // 折线图
    getBrokenEcharts() {
      this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
      this.brokenEcharts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['触达人次', '宣发次数', '宣发任务数']
        },
        grid: {
          left: '2%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2022.02', '2202.03', '2202.04', '2202.05', '2202.06', '2202.07']
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '触达人次',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: '宣发次数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330]
          },
          {
            name: '宣发任务数',
            type: 'line',
            stack: 'Total',
            data: [800, 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: 5, name: '群发送达率',label:{
                normal:{ 
                  show:true,
                  formatter: '{d}%',
                  textStyle: {
                    fontSize: 16,
                  },
                }}},
              {value: 120, name: '邮件营销'}
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.AppPropagandaStatistics {
  ::v-deep .uni-calendar-item__weeks-box-circle {
    top: 77%;
    right: 45%;
    border-radius: 12px;
  }
  ::v-deep .uni-calendar__header {
    height: 76px;
  }
  ::v-deep .uni-calendar__backtoday {
    display: none
  }

  .brokenEcharts {
    margin: 32px 0,
  }

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

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

</style>