<template>
  <div class="charts chart-radar" ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
// import tdTheme from './theme.json'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartRadar',
  data () {
    return {
      option: {}
    }
  },
  props: {
    indicatorArray: {
      type: Array
    },
    realDataArray: {
      type: Array
    }
  },
  watch: {
    realDataArray (newVal, oldVal) {
      this.$nextTick(() => {
        if (!newVal || newVal.length === 0) {
          return
        }
        this.render()
      })
    }
  },
  methods: {
    render () {
      this.option = {
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#B50029',
              //backgroundColor: '#17508A',
              borderRadius: 3,
              padding: [3, 5]
            }
            // formatter: function (value, indicator) {
            //   let scale = (indicator.max / 100000) * 100
            //   console.log(scale)
            //   return value + '(' + scale.toFixed(2) + '%' + ')'
            // }
          },
          nameGap: 20,
          indicator: this.indicatorArray
        },
        series: [
          {
            // name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            itemStyle: {
              normal: { areaStyle: { type: 'default', opacity: 0.2 } }
            },
            name: '详情:',
            data: [
              {
                // value: [5000, 14000, 28000, 31000, 42000, 21000]
                value: this.realDataArray,
                label: {
                  normal: {
                    show: true,
                    formatter: function (params) {
                      return params.value
                    }
                  }
                }
              }
            ]
          }
        ]
      }
      let dom = echarts.init(this.$refs.dom)
      dom.setOption(this.option)
    }
  }
}
</script>
<style scoped>
</style>
