<template>
  <div class="barChart" :id="domId" :style="{height:height,width:width}"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    domId: {
      type: String,
      default: 'barChart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    title: String,
    legend: Array,
    catalog: Array,
    data: {
      type: Array,
      default: () => []
    },
    lineOnoff: {
      type: Boolean,
      default: true
    },
    rendering: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null,
      ec: null,
      options: {
        title: {
          text: '访问量前10',
          textStyle: {
            color: '#333',
            fontSize: '16',
            fontFamily: '宋体'
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          show: true,
          formatter: function(data) {
            return data[0].name + '：' + data[0].value
          }
        },
        grid: { // 绘图区调整
          x: 150, // 左留白
          y: 40, // 上留白
          x2: 70, // 右留白
          y2: 17 // 下留白
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0],
          position: 'bottom'
        },
        yAxis: {
          type: 'category',
          data: [], // ['服务1','服务2','服务3','服务4','服务5','服务6','服务7','服务8','服务9','服务10'],
          axisLine: { show: false }, // 坐标轴
          axisTick: [{ // 坐标轴小标记
            show: false
          }],
          inverse: 'true',
          axisLabel: {
            textStyle: {
              fontSize: '14'
            }
          }
        },
        series: {
          name: '',
          type: 'bar',
          barHeight: 20, // 最小柱高
          barWidth: 15, // 柱宽度
          data: [], // [1, 23489, 29034, 104970, 0, 63030,63230,30230,63030,63230],
          itemStyle: {
            normal: { // 柱状图颜色
              color: '#ff6600',
              label: {
                show: false, // 显示文本
                position: 'inside', // 数据值位置
                textStyle: {
                  color: '#000',
                  fontSize: '14'
                }
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          }
        }
      }
    }
  },
  watch: {
    data () {
      this.init()
    },
    lineOnoff (val) {
      if (val) {
        let resizeTimer = null
        clearTimeout(resizeTimer)
        resizeTimer = setTimeout(() => {
          this.init()
          this.widthChange()
        }, 100)
      }
    },
    rendering (val) {
      let resizeTimer = null
      clearTimeout(resizeTimer)
      resizeTimer = setTimeout(() => {
        this.init()
        this.widthChange()
      }, 100)
    }
  },
  mounted () {
    this.init()

    this.widthChange()
    /* window.addEventListener('resize', () => {
      this.init()
      this.widthChange()
    }) */
  },
  methods: {
    widthChange () {
      let winWid = window.document.body.clientWidth
      // this.ec ? this.ec.setOption(this.options, true) : ''
      if (this.ec !== null || this.ec !== undefined) {
        // console.log(111)
        this.ec.setOption(this.options, true)
      }
    },
    init () {
      this.ec = this.ec ? this.ec : echarts.init(document.getElementById(this.domId))

      this.options.title.text = this.title || ''

      this.options.yAxis.data = this.catalog

      if (typeof this.data === 'object') {
        this.options.series.name = this.title
        this.options.series.data = this.data 
      } else {
        this.options.series.name = this.title
        this.options.series.data = this.data     
      }

      this.ec.setOption(this.options, true)
      this.ec.resize(() => {
        this.ec.setOption(this.options, true)
      })
    }
  }
}
</script>
