
<template>
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BarChart',
  props:['alldata'],
  data() {
    return {
      chart:null,
      // xAxisData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      // seriesData: [5, 20, 36, 10, 10, 20]
    }
  },
  // mounted() {
  //   this.initChart();
  // },
  watch: {
    alldata: {
      handler(val) {
        console.log('val',val);
        
        if (val.length) {
          let data = val.flat();
          this.initChart(data);
        }
      },
      deep: true,
      immediate: true // 组件创建时立即执行
    }
  },
  methods: {
    initChart(val) {
      
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {  // 新增tooltip配置
          trigger: 'axis',  // 触发类型为坐标轴
          axisPointer: {    // 坐标轴指示器配置
            type: 'shadow'  // 阴影样式
          },
          formatter: function(params) {  // 自定义提示内容
            return `${params[0].name}<br/>数值: ${params[0].value}人`;
          }
        },

        xAxis: {
          data: val.filter(e => e.title).map(e => e.title)
        },
        yAxis: {},
        series: [{
          type: 'bar',
          data: val.filter(e => e.title).map(e => e.total)
        }]
      };
      this.chart.setOption(option);
      window.addEventListener("resize", this.chart.resize);
      
     
    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
      window.removeEventListener("resize", this.handleResize);
      this.chart && this.chart.dispose();
  }
}
</script>
