<template>
  <div class="component">
    <h6 class="title">{{data.title}}</h6>
    <div :id="'histogram' + index" ref="box"></div>
  </div>
</template>

<script>
import G2 from '@antv/g2'

export default {
  name: '',
  props: ['data', 'index'],
  data () {
    return {
    }
  },
  components: {
    G2,
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  methods: {
    init () {
      var _that = this
      var chart = new G2.Chart({
        container: 'histogram' + _that.index,
        forceFit: true,
        width: _that.$refs.box.clientWidth,
        height: 400
      })
      chart.source(_that.data.value)
      chart.scale('y', {
        tickInterval: 20
      })
      chart.interval().position('x*y')
      chart.render()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
