<template>
  <div id="HealthChart" style="width:100%; height:100% ;padding: 0px 15%;">
  </div>
</template>

<script type="text/ecmascript-6">
import * as echarts from 'echarts'
export default {
  name: 'HealthChart',
   props: {
    chartColumns: {
      type: Array,
      default() {
        return []
      }
    },
    chartData: {
      type: Array,
      default() {
        return []
      }
    },
    chartColor: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      echartImg: null
    }
  },
  mounted() {
    this.initEchartsData()
  },
  methods: {
    initEchartsData() {
      const myChart = echarts.init(document.getElementById('HealthChart'))
      const option = {
        color: this.chartColor,
        tooltip: {
           trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
           height: '70%'
        },
        xAxis: {
          type: 'category',
          data: this.chartColumns,
          axisLabel: {
            fontSize: 16,
            fontStyle: 'italic',
            fontFamily: 'sans-serif',
            verticalAlign: 'top',
            interval: 0,
            inside: false,
            // rotate: -31,
            width: this.widthNum(),
            // height: 150,
            overflow: 'break'

        }
        },
        yAxis: {
          type: 'value',
          offset: 30
        },
        series: [
          {
            animation: false,
            barWidth: '50%',
            data: this.chartData,
            type: 'bar',
            colorBy: 'data',
            label: {
              show: true
            }
            // itemStyle: {
            //   color: 'rgba(62, 207, 49, 0.6)'
            // }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
      const opt = {
      // 注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用
      type: 'png',
      // 导出的图片分辨率比例，默认为 1。
      ixelRatio: 1
      // 导出的图片背景色，默认使用 option 里的 backgroundColor
      // backgroundColor: '#ff6700'
      // 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
      // excludeComponents: Array.<string>
      }
      this.echartImg = myChart.getDataURL(opt)
    },
    widthNum() {
      if (this.chartColumns.length > 8) {
         return 75
      } else if (this.chartColumns.length <= 8 && this.chartColumns.length > 4) {
        return 100
      } else if (this.chartColumns.length <= 4) {
        return 150
      }
    }
  },
  watch: {
      chartData: {
        handler() {
          this.initEchartsData()
        },
        deep: true
      }
    }

}
</script>
