<template>
  <div class="echart-bar" id="myChart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      options: {
        title: { text: '年龄分布' },
        tooltip: {},
        // legend: {
        //   data: ['基金', '全网分布', '平均温度']
        // },
        grid: {
          top: '20%',
          bottom: 90
        },
        xAxis: {
          data: ['≤19', '20-29', '30-39', '40-49', '≥50'],
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '百分比',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                  color: '#333'
              }
            },
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '基金',
            type: 'bar',
            barWidth: '50%',
            data: [],
            itemStyle: {
              normal: {
                color: '#68B8A4'
              }
            }
          }
        ]
      },
      echart: null
    }
  },
  watch: {
    value: {
      handler(v) {
        if (v.id) {
          console.log(v.options)
          this.options.xAxis.data = v.options.map(item => item.label)
          this.$nextTick(() => {
            this.echart.setOption(this.options)
          })
          this.fetchEchartsData()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.echart = echarts.init(document.getElementById('myChart'))
  },
  methods: {
    drawerEchartBar() {
      myChart.setOption(this.options)
    },
    fetchEchartsData() {
      window.setTimeout(() => {
        this.options.series[0].data = [13, 28, 46, 23, 20]
        this.echart.setOption(this.options)
      }, 1000)
    }
  }
}
</script>
<style scoped>
.echart-bar{
  width:100%;
  height:100%;
}
</style>