<template>
  <div class="population-screen">
    <div class="chart" />
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'PopulationScreen',
  data() {
    return {
      chart: null,
      option: {
        tooltip: {
          trigger: 'item',
          confine: true,
        },
        series: [
          {
            type: 'sankey',
            // left: 50.0,
            // top: 20.0,
            // right: 150.0,
            // bottom: 25.0,
            data: [],
            links: [],
            lineStyle: {
              color: 'source',
              curveness: 0.5
            },
            itemStyle: {
              color: '#1f77b4',
              borderColor: '#1f77b4'
            },
            label: {
              color: 'rgba(0,0,0,0.7)',
              fontSize: 10
            }
          }
        ],
      }
    }
  },
  mounted() {
    setTimeout(this.init, 0)
  },
  beforeDestroy() {
    this.chart && window.removeEventListener('resize', () => this.chart.resize())
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.chart)
      window.addEventListener('resize', () => this.chart.resize())
      this.chart.setOption(this.option)
    }
  },
}
</script>

<style lang="stylus" scoped>
.population-screen
  z-index 999
</style>
