<template>
  <div id="node5"/>
</template>

<script>
import G2 from '@antv/g2'
// import DataSet from '@antv/data-set'
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('trunkIndex', {
      signUser: item => item.trunkIndex.signUser
    })
  },
  mounted() {
    this.GetSignUser().then(() => {
      this.rander()
    })
  },
  methods: {
    ...mapActions('trunkIndex', [
      'GetSignUser'
    ]),
    rander() {
      console.log(this.signUser)
      var data = this.signUser
      var chart = new G2.Chart({
        container: 'node5',
        forceFit: true,
        height: 282,
        padding: [80, 20, 30, 40]
      })
      chart.source(data)
      console.log(chart)
      chart.axis('count', {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: '#a4b6c5' // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            textAlign: 'end', // 文本对齐方向，可取值为： start middle end
            fill: '#a4b6c5', // 文本的颜色
            fontSize: '12', // 文本大小
            textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
          }
        }
      })
      chart.axis('message', {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: '#a4b6c5' // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            fill: '#a4b6c5', // 文本的颜色
            fontSize: '12' // 文本大小
          }
        }
      })
      chart.scale('', {
        tickInterval: 200
      })
      chart.guide().html({
        position: ['5%', '-25%'],
        html: '<div class="chart5-title"><p class="title">注册用户统计</p></div>'
      })
      chart.guide().html({
        position: ['90%', '-15%'],
        html: `<div class="chart-right-btn"><span>18/11/27</span>&nbsp;<i class='el-icon-date'></i></div>`
      })

      chart.interval().position('message*count').color('message', function(val) {
        if (val === '业主总数' || val === '家属总数') {
          return '#53F9FF'
        }
        return '#FF5367'
      })
      chart.render()
    }
  }
}
</script>

<style lang="scss">
.chart5-title {
  .title {
    font-size: 13px;
    color: #a4b6c5;
  }
}
.chart-right-btn{
  padding: 0px 8px;
  display: flex;
  border: 1px solid #a4b6c5;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  span,i{
    font-size: 10px;
    color: #a4b6c5;
  }
}
</style>
