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

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    listy(){

    },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        this.setOptions(this.chartData)
      },
      setOptions({ x,y } = {}) {
        console.log(x,y,98)
        const dats = y
        this.chart.setOption({
          color: ['#4163d1', '#6be442', '#fbbc29', '#e32b3b','#1898d3'],
            title: {
              text: ''
            },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          radar: {
            name:{
               formatter:'{value}',
                              // 字体样式
                // 字体样式
                textStyle:{
                    fontSize:12,
                    color:'#333'
                }
            },
            radius: "66%",
            //图外名称

            center: ['50%', '42%'],
            splitNumber: 4,
            shape: 'circle',
            splitArea: {
              // areaStyle: {
              //   color: 'rgba(127,95,132,.3)',
              //   opacity: 1,
              //   shadowBlur: 45,
              //   shadowColor: 'rgba(0,0,0,.5)',
              //   shadowOffsetX: 0,
              //   shadowOffsetY: 15
              // }
              areaStyle: {
                        color: ['#94aadc', '#a9b9df', '#d5d9e2', '#eaecf0'],
                        shadowColor: 'rgba(0, 0, 0, 0)',
                        shadowBlur: 45
                      },


            },
            axisLine: {
              show: true,
                  lineStyle: {
                    color: '#fff'
                  }
                },
            indicator: [
              { name: '总人数', max: 2500 },
              { name: "绿码人数", max: 2500 },
              { name: '红码人数', max: 2500 },
              { name: '灰码人数', max: 2500 },
              { name: '未申请', max: 2500 }
              // { name: 'Marketing', max: 20000 }
            ]
          },
          legend: {
            left: 'center',
            bottom: '10',
            // data: ['周一', '周二', '周三','周四','周五'],

          },
          series: [{
            type: 'radar',
            symbolSize: 3,

            data: [
              {
                value: y[0].value,
                name: '周一',
              },
              {
                value: y[1].value,
                name: '周二',
              },
              {
                value: y[2].value,
                name: '周三',
              },
              {
                value: y[3].value,
                name: '周四',
              },
              {
                value: [960, 120, 186, 189, 852, 357],
                name: '周五',
              }
            ],
            // data:dats,
            animationDuration: animationDuration
          }]
        })
      }
      // this.chart.setOption({
      //   color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
      //     title: {
      //       text: 'Customized Radar Chart'
      //     },
      //     legend: {},
      //     radar: [
      //       {
      //         indicator: [
      //           { text: 'Indicator1' },
      //           { text: 'Indicator2' },
      //           { text: 'Indicator3' },
      //           { text: 'Indicator4' },
      //           { text: 'Indicator5' }
      //         ],
      //         center: ['50%', '50%'],
      //         radius: 120,
      //         startAngle: 90,
      //         splitNumber: 4,
      //         shape: 'circle',
      //         axisName: {
      //           formatter: '【{value}】',
      //           color: '#428BD4'
      //         },
      //         splitArea: {
      //           areaStyle: {
      //             color: ['#77EADF', '#26C3BE', '#d5d9b2', '#eaecf0'],
      //             shadowColor: 'rgba(0, 0, 0, 0.2)',
      //             shadowBlur: 10
      //           }
      //         },
      //         axisLine: {
      //           lineStyle: {
      //             color: 'rgba(211, 253, 250, 0.8)'
      //           }
      //         },
      //         splitLine: {
      //           lineStyle: {
      //             color: 'rgba(211, 253, 250, 0.8)'
      //           }
      //         }
      //       },
      //       // {
      //       //   indicator: [
      //       //     { text: 'Indicator1', max: 150 },
      //       //     { text: 'Indicator2', max: 150 },
      //       //     { text: 'Indicator3', max: 150 },
      //       //     { text: 'Indicator4', max: 120 },
      //       //     { text: 'Indicator5', max: 108 },
      //       //     { text: 'Indicator6', max: 72 }
      //       //   ],
      //       //   center: ['75%', '50%'],
      //       //   radius: 120,
      //       //   axisName: {
      //       //     color: '#fff',
      //       //     backgroundColor: '#666',
      //       //     borderRadius: 3,
      //       //     padding: [3, 5]
      //       //   }
      //       // }
      //     ],
      //     series: [
      //       {
      //         type: 'radar',
      //         emphasis: {
      //           lineStyle: {
      //             width: 4
      //           }
      //         },
      //         data: [
      //           {
      //             value: [100, 8, 0.4, -80, 2000],
      //             name: 'Data A'
      //           },
      //           {
      //             value: [60, 5, 0.3, -100, 1500],
      //             name: 'Data B',
      //             areaStyle: {
      //               color: 'rgba(255, 228, 52, 0.6)'
      //             }
      //           }
      //         ]
      //       },
      //       // {
      //       //   type: 'radar',
      //       //   radarIndex: 1,
      //       //   data: [
      //       //     {
      //       //       value: [120, 118, 130, 100, 99, 70],
      //       //       name: 'Data C',
      //       //       symbol: 'rect',
      //       //       symbolSize: 12,
      //       //       lineStyle: {
      //       //         type: 'dashed'
      //       //       },
      //       //       label: {
      //       //         show: true,
      //       //         formatter: function (params) {
      //       //           return params.value;
      //       //         }
      //       //       }
      //       //     },
      //       //     {
      //       //       value: [100, 93, 50, 90, 70, 60],
      //       //       name: 'Data D',
      //       //       areaStyle: {
      //       //         color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
      //       //           {
      //       //             color: 'rgba(255, 145, 124, 0.1)',
      //       //             offset: 0
      //       //           },
      //       //           {
      //       //             color: 'rgba(255, 145, 124, 0.9)',
      //       //             offset: 1
      //       //           }
      //       //         ])
      //       //       }
      //       //     }
      //       //   ]
      //       // }
      //     ]
      // })
  }
}
</script>
