dvcp_v2_wxcp_app/src/apps/AppMarryAndDie/AppMarryAndDie.vue

<template>
  <div class="AppMarryAndDie">
    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>

    <div v-if="currentTabs == 0" class="msg">
      <div class="box">
        <div class="card">
          <div class="imgleft">
            <span class="titles">活动登记情况</span>
            <span class="titlesContent">查看全部活动和本月新增</span>
          </div>

          <img src="./yan.jpg" alt="" />
        </div>

        <div class="card">
          <div class="imgleft">
            <span class="titles">干部参与情况</span>
            <span class="titlesContent">查看全部参与操办信息和本月新增</span>
          </div>

          <img src="./yan.jpg" alt="" />
        </div>

        <div class="card">
          <div class="imgleft">
            <span class="titles">婚礼登记情况</span>
            <span class="titlesContent">查看全部婚礼和本月新增</span>
          </div>

          <img src="./yan.jpg" alt="" />
        </div>

        <div class="card">
          <div class="imgleft">
            <span class="titles">丧礼登记情况</span>
            <span class="titlesContent">查看全部丧礼和本月新增</span>
          </div>

          <img src="./yan.jpg" alt="" />
        </div>
      </div>

      <div class="line"></div>

      <div class="chart">
        <p>本年统计</p>

        <div class="yearStatistics" id="yearStatistic" style="height: 300px"></div>
      </div>
    </div>

    <div v-if="currentTabs == 1" class="myReport">1</div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'AppMarryAndDie',
  appName: '婚丧嫁娶',
  components: {},
  props: {},
  data() {
    return {
      keyword: '',
      currentTabs: 0,
      tabList: [
        {
          name: '统计信息',
        },
        {
          name: '我的上报',
        },
      ],
      Echart: null,
    }
  },
  computed: {},
  watch: {},
  onLoad() {
    this.getList()
    this.getEchart()
  },
  mounted() {
    this.Echart = echarts.init(document.getElementById('yearStatistic'))
  },
  methods: {
    getList() {},

    change(index) {
      this.keyword = ''
      this.currentTabs = index
      this.getList()
    },

    getEchart() {
      this.$http.post(`/app/appmarriagefuneralinfo/queryDataStatistics`).then((res) => {
        if (res.code === 0) {
          this.initEchart(res.data)
        }
      })
    },

    initEchart(data) {
      console.log(data)

      var option = {
        xAxis: {
          type: 'category',
          data: data.map((v) => v.name.replace('数量', '')),
          // boundaryGap: false,
          axisLine: {
            lineStyle: { color: '#157EFF' },
          },
          axisTick: {
            show: false,
            alignWithLabel: false,
            lineStyle: {
              width: 100,
            },
          },
          axisLabel: {
            show: true, //是否显示刻度标签
            interval: 0, //坐标轴刻度标签的显示间隔   0强制显示所有标签，1表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
            rotate: 50, //x轴数据太多可以尝试旋转一定角度，不至于太难看
            //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
          },
          axisTick: {
            //坐标轴刻度相关设置
            // show: true, //是否显示坐标轴刻度。
            // inside: false, //坐标轴刻度是否朝内，默认朝外。
            // length: 7, //坐标轴刻度的长度。
          },
          axisLabel: { color: '#666', margin: 19 },
          // axisTick: {
          //   alignWithLabel: false,
          // },

          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     width: 0,
          //     type: 'solid',
          //     color: '#f5f5f5',
          //   },
          // },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 0, //不间隔显示x轴上的文字，否则文字放不下时，将会自动间隔显示

            textStyle: {
              // color: '#fff',
            },
          },
          axisLine: {
            //轴线颜色
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          splitLine: {
            //分割线样式
            show: true,
            lineStyle: {
              color: '#D8DDE6',
            },
          },
        },
        series: [
          {
            color: '#0072FF',
            barWidth: 30,
            data: data.map((v) => v.v1),
            type: 'bar',
          },
        ],
      }

      option && this.Echart.setOption(option)
    },
  },
}
</script>

<style scoped lang="scss">
uni-page-body {
  height: 100%;
}
.AppMarryAndDie {
  height: 100%;
  background: #fff;
  .msg {
    .box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 32px;
      .card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 49%;
        margin-top: 8px;
        padding: 18px 24px 34px;
        box-sizing: border-box;
        .imgleft {
          display: flex;
          flex-direction: column;
          margin-right: 20px;
          .titles {
            font-size: 30px;
            font-weight: 500;
          }
          .titlesContent {
            font-size: 24px;
            color: #999999;
          }
        }
        img {
          width: 60px;
          height: 68px;
        }
      }

      .card:nth-child(-n + 2) {
        margin-top: 0;
      }
    }

    .line {
      height: 16px;
      background: #f3f6f9;
    }

    .chart {
      .yearStatistics {
        width: 100%;
        // height: 500px;
        // background: pink;
      }
    }
  }
}
</style>