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

<script>
import { generateUUID } from '@/utils/index'
export default {
  name: 'radar-chart',
  props: {
    dataItem: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      domId: generateUUID(),
      chart: null,
      option: {
        title: {
          text: '网点人员配置',
          top: '5',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#0D47A1'
          }
        },
        radar: {
          radius: '65%',
          center: ['50%', '50%'],
          splitLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisName: {
            color: '#666'
          },
          indicator: [
            { name: '网点负责人', max: 100 },
            { name: '厅堂', max: 1000 },
            { name: '柜面其他', max: 2000 },
            { name: '柜面对公', max: 500 },
            { name: '柜面现金', max: 500 },
            { name: '运营主管', max: 100 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            itemStyle: {
              color: '#FF9800'
            },
            lineStyle: {
              color: '#FF9800'
            },
            data: [
              {
                value: [80, 860, 1500, 380, 440, 100],
                name: '人数'
              }
            ]
          }
        ]
      }
    }
  },
  created () {
    // this.option.series[0].data = this.dataItem
  },
  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>
