<template>
  <div class="scoreBar_panel">
    <p class="normal-title normal-margin">评分数据</p>
    <div id="noticeBar"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';

export default {
  data () {
    return {
      analysis_data:{},
      columnPlot () {}
    }
  },
  methods:{
    async getScoreData() {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.notice.statistics.agent",
        "method": "getAgentScoreData",
        "content": {
          "sat_noticeid": this.$route.query.id
        }
      })
      this.analysis_data = res.data
 
      this.columnPlot.changeData(res.data)
    },
    renderBar () {
      this.columnPlot = new Column('noticeBar', {
        data:[],
        xField: 'score',
        yField: 'num',
        height:350,
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          score: {
            alias: '评分',
          },
          num: {
            alias: '人数',
          },
        },
      });
      this.columnPlot.render(); 
    },
  },
  mounted () {
    this.renderBar()
    this.getScoreData()
  }
}

</script>
<style>
</style>
<style scoped>
.scoreBar_panel{
  align-self: stretch;
}
</style>