dvcp_v2_webapp/project/pingchang/apps/AppGeneralElection/components/Statistics.vue

<template>
  <section>
    <ai-detail class="Statistics">
      <template slot="title">
        <ai-title title="投票实况" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
      </template>
      <template slot="content">
        <ai-title title="本届任职" isShowBottomBorder></ai-title>
        <div class="basicinfo-box">
          <div><span>已投人数：</span><span>{{ data.alreadyCount || 0 }}</span></div>
          <div><span>未投人数：</span><span>{{ data.notYetCount || 0 }}</span></div>
          <div><span>日期：</span><span>{{ data.dateTime || '' }}</span></div>
        </div>

        <ai-title title="候选人选票统计" isShowBottomBorder></ai-title>

        <div class="echarts-box">
          <div id="echarts-bar"></div>
          <!-- <ai-empty class="empty"></ai-empty> -->
        </div>
      </template>
    </ai-detail>
  </section>
</template>

<script>
;
export default {
  name: "Statistics",
  props: {
    instance: Function,
    dict: Object,
    params: Object,
  },
  data() {
    return {
      data: {},
      myChart: null,
    }
  },
  created() {
    this.getStatistics()
  },
  mounted() {
    this.getStaBar()
  },
  methods: {
    cancel (isRefresh) {
      this.$emit('change', {
        type: 'electionList',
        isRefresh: !!isRefresh
      })
    },
    getStatistics() {
      this.instance.post(`/app/appgeneralelectioninfo/statistics?id=${this.params.id}`).then(res=> {
        if(res?.data) {
          this.data = res.data
          this.statistics = res.data.statistics
          let xData = res.data.statistics.map(e=> e.candidate_user_name)
          let yData1 = res.data.statistics.map(e=> e.c1)
          let yData2 = res.data.statistics.map(e=> e.c2)
          let yData3 = res.data.statistics.map(e=> e.c3)
          this.getStaBar(xData,yData1,yData2,yData3)
        }
      })
    },
    getStaBar(xData,yData1,yData2,yData3) {
      let chartDom = document.getElementById('echarts-bar')
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption({
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: [0],
            filterMode: "filter",
          },
        ],
        legend: {
          data: ['支持', '反对', '弃票']
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
          alignTicks: true,
        },
        series: [    // 支持、反对、弃票
          {
            name: '支持',
            data: yData1,
            type: 'bar',
            
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            barWidth: 22,
            barGap: '20%',
          },
          {
            name: '反对',
            data: yData2,
            type: 'bar',
            
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            barWidth: 22,
            barGap: '20%',
          },
          {
            name: '弃票',
            data: yData3,
            type: 'bar',
            
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            barWidth: 22,
            barGap: '20%',
          }
        ]
      })
    }
  },

}
</script>

<style lang="scss" scoped>
.Statistics {
  .basicinfo-box {
    display: flex;
    margin: 20px 0;
    div {
      flex: 1;
    }
  }
  .echarts-box {
    // width: 100%;

    #echarts-bar {
      width: 1200px;
      height: 400px;
    }
  }
}
</style>