<template>
  <el-card class="img-card-item">
    <div slot="header" class="clearfix">
      <span>案例</span>
    </div>
    <div ref="barChart" style="height: 300px"></div>
  </el-card>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    barData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    chartsData() {
      return this.barData
    },
  },
  watch: {
    barData: {
      handler() {
        this.setOptions()
      },
      deep: true,
    },
  },
  mounted() {
    this.initCharts()
  },
  beforeDestroy: function() {
    window.removeEventListener('resize', this.barChart.resize)
  },
  methods: {
    handleDay() {},
    handleChange() {},
    initCharts() {
      this.barChart = echarts.init(this.$refs.barChart)
      this.setOptions()
      window.addEventListener('resize', this.barChart.resize)
    },
    setOptions() {
      //let that = this
      this.barChart.setOption({
        backgroundColor: '#FFF',
        grid: {
          top: '10%',
          bottom: '10%',
          left: '10%',
          right: '4%',
        },
        tooltip: {
          trigger: 'item',
          label: {
            show: true,
          },
        },
        xAxis: {
          boundaryGap: true, //默认，坐标轴留白策略
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          data: this.chartsData.dataName,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(33,148,246,0.2)',
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: 'rgb(33,148,246)',
              borderWidth: 1,
              borderColor: '#FFF',
              barBorderRadius: [8, 8, 0, 0],
            },
            barWidth: 25,

            label: {
              show: false,
              distance: 1,
            },
            data: this.chartsData.dataList,
          },
        ],
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.img-card-item {
  ::v-deep .el-card__body {
    padding: 10px;
  }
  .header-r {
    float: right;
  }
}
</style>