<template>
  <div :id="domId" style="height: 100%;"></div>
</template>

<script>
import { generateUUID } from '@/utils/index'
export default {
  name: 'category-chart',
  props: {
    legend: {
      type: Boolean,
      default: true
    },
    dataItem: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      domId: generateUUID(),
      chart: null,
      option: {
        title: {
          text: '业务种类排名',
          top: '5',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#0D47A1'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '20',
          right: '50',
          bottom: '20',
          top: '40',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['网络支付', '社保卡', '第三方托管', '信用卡', '对公', '储蓄']
        },
        series: [
          {
            name: '数据',
            type: 'bar',
            data: [60, 50, 40, 30, 20, 10]
          }
        ]
      }
    }
  },
  created () {

  },
  mounted () {
    this.initMap()
    this.chart.on('click', (param) => {
      this.$emit('click', param)
    })
  },
  methods: {
    initMap () {
      this.chart = this.$echarts.init(document.getElementById(this.domId), null, { renderer: 'svg' })
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
