<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
import chartMixin from '@/mixins/ChartMixin';
export default {
  mixins: [chartMixin],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
	chartData: {
	  type: Object,
	  required: true
	}
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
		this.setOptions(this.chartData) 
    },
	setOptions({ date,gjzs,} = {}) {
	  this.chart.setOption({
		   color: ['#FFBB37',],
		   // title: {
		   //    text: 'Basic Radar Chart'
		   //  },
		    // legend: {
		    //   data: ['Allocated Budget', 'Actual Spending']
		    // },
		    radar: {
		      // shape: 'circle',
			  indicator: [
			          { text: date[0] },
			          { text: date[1] },
			          { text: date[2] },
			          { text: date[3] },
			          { text: date[4] }
			  ],
				splitLine : { //网格颜色设置
			        show : true,
			        lineStyle : {
			            width : 1,
			             color : 'rgba(194, 201, 230, 0.2)',
			         },
			   },
			   splitArea : { //网格颜色设置
			        show : true,
			        lineStyle : {
			            width : 1,
			             color : 'rgba(194, 201, 230, 0.2)',
			         },
			   },
			   splitArea : {  //设置图表颜色，show的值为true
			        show : false,
			    },
				nameGap : 2,
				
		    },
		    series: [	
		      {
		        type: 'radar',
				 emphasis: {
				        lineStyle: {
				          width: 4
				        }
				      },
				symbol:'none',
		        data: [
		          {
		            value: gjzs,
		            name: 'Allocated Budget',
					areaStyle: {
					   color: 'rgba(255, 228, 52, 0.6)'
					}
		          },
		        ],
		      }
		    ]
	  },true)
	}
  }
}
</script>
<style lang="less" scoped>

</style>
