dvcp_v2_wxcp_app/library/apps/AppPovertyAlleviation/povertyMonitor/Statistics.vue

<template>
  <div class="statistics">
    <div class="block"></div>
    <div class="charts-wrapper">
      <div class="total">
        <!-- <div class="total-item">
          <h2>2</h2>
          <p>高返贫风险人数</p>
        </div> -->
        <div class="total-item">
          <h2>{{ info.fxyjCount }}</h2>
          <p>监测对象风险预警</p>
        </div>
      </div>
      <div class="charts" v-if="false">
        <h2>本月高风险预警转换统计</h2>
        <div id="chart1" style="height: 400rpx"></div>
      </div>
      <div class="charts">
        <h2>本月纳入监测人群属性分析</h2>
        <div id="chart2" style="height: 400rpx"></div>
      </div>
      <div class="charts">
        <h2>本月风险消除方式统计</h2>
        <div id="chart3" style="height: 400rpx"></div>
      </div>
      <div class="charts">
        <h2>本月监测对象预警转换统计</h2>
        <div id="chart4" style="height: 400rpx"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'statistics',

  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      info: {}
    }
  },

  mounted() {
    window.scrollTo(0, 0)
    // this.chart1 = echarts.init(document.getElementById('chart1'))
    this.chart4 = echarts.init(document.getElementById('chart4'))
    this.chart2 = echarts.init(document.getElementById('chart2'))
    this.chart3 = echarts.init(document.getElementById('chart3'))
    this.$dict.load(['fpType', 'fpRiskEliminationMethod'])
    this.getInfo()
  },

  methods: {
    getInfo() {
      this.$http.post(`/app/apppreventionreturntopoverty/statistics-h5`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.initChart2(res.data.byxzMap)
          this.initChart3(res.data.byxcMap)
          this.initChart4(res.data.fxxcCount, res.data.fxyjCount)
        }
      })
    },

    initChart1() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '0%',
            top: 0,
            bottom: 0,
            width: '100%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              {value: 60, name: '总上报'},
              {value: 40, name: '纳入监测'},
              {value: 20, name: '已处理'}
            ]
          }
        ]
      }

      this.chart1.setOption(option)
    },

    initChart2(data) {
      const values = data.map(item => {
        return {
          value: item.typeCount,
          name: this.$dict.getLabel('fpType', item.type)
        }
      })
      const option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '40px',
          containLabel: true
        },
        color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
        series: [
          {
            name: '本月纳入监测人群属性分析',
            type: 'pie',
            radius: ['40%', '70%'],
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: values
          }
        ]
      }

      this.chart2.setOption(option)
    },

    initChart3(data) {
      const values = data.map(item => {
        return {
          value: item.typeCount,
          name: this.$dict.getLabel('fpRiskEliminationMethod', item.risk_elimination_method)
        }
      })
      const option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '40px',
          containLabel: true
        },
        color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
        series: [
          {
            name: '本月纳入监测人群属性分析',
            type: 'pie',
            radius: ['40%', '70%'],
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: values
          }
        ]
      }

      this.chart3.setOption(option)
    },

    initChart4(x, y) {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
        series: [
          {
            name: '',
            type: 'funnel',
            left: '0%',
            top: 0,
            bottom: 0,
            width: '100%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              {value: y, name: '纳入监测'},
              {value: x, name: '消除监测'}
            ]
          }
        ]
      }

      this.chart4.setOption(option)
    }
  }
}
</script>

<style lang="scss">
.statistics {
  padding: 40px 0 120px;

  .block {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 140px;
    background: #3975C6;
  }

  .charts-wrapper {
    position: relative;
    z-index: 1;
    padding: 0 32px;

    .total {
      display: flex;
      align-items: center;
      height: 200px;
      background: #FFFFFF;
      border-radius: 8px;

      .total-item {
        flex: 1;
        text-align: center;

        h2 {
          font-size: 64px;
          color: #3192F4;
        }

        p {
          margin-top: 10px;
          color: #999999;
          font-size: 28px;
        }

        &:last-child {
          h2 {
            color: #F09535;
          }
        }
      }
    }

    .charts {
      margin-top: 32px;
      background: #FFFFFF;
      border-radius: 8px;

      & > h2 {
        height: 96px;
        line-height: 96px;
        padding: 0 32px;
        color: #333333;
        font-size: 32px;
        border-bottom: 1px solid #DDDDDD;
      }

      & > div {
        width: 686px;
        margin: 0 auto;
        padding: 32px 0;
      }
    }
  }
}
</style>