<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { fontSize } from '@/views/groupPage/util'
export default {
  name: 'ComRadarChart', //设计施工综合图表
  props: {
    chartData: {
      default: () => {
        return [20, 12, 17, 18, 10]
      }
    },
    title: {}
  },
  data() {
    return { myChart: null, symbol: 0 }
  },
  watch: {
    chartData(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      var that = this
      var indicator = [
        {
          text: '合同',
          max: 30
        },
        {
          text: '进度',
          max: 30
        },
        {
          text: '安全',
          max: 30
        },
        {
          text: '监测',
          max: 30
        },
        {
          text: '质量',
          max: 30
        }
      ]
      var dataArr = [
        {
          name: '数量',
          symbolSize: 6,
          symbol: 'circle',
          itemStyle: {
            color: '#FFFFFF',
            borderWidth: 1,
            borderColor: '#1DDCFF',
            shadowColor: '#1DDCFF',
            shadowBlur: 30
          },
          lineStyle: {
            color: '#1DDCFF',
            shadowColor: '#1DDCFF',
            shadowBlur: 30
          },
          areaStyle: {
            // 单项区域填充样式
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#1DDCFF'
                },
                {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                },
                {
                  offset: 1,
                  color: '#1DDCFF'
                }
              ],
              globalCoord: false
            },
            opacity: 1 // 区域透明度
          },
          value: this.chartData
        }
      ]
      let option = {
        color: ['#1DDCFF'],
        tooltip: {
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          confine: true
        },
        radar: {
          radius: '62%',
          center: ['50%', '55%'],
          axisName: {
            color: '#fff',
            fontSize: fontSize(12),
            formatter: function (name) {
              let res = name + that.chartData[that.symbol] + '个'
              that.symbol++
              return res
            }
          },
          indicator: indicator,
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(60,172,247,0.8)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(60,172,247,0.8)', // 分隔线颜色
              width: 1 // 分隔线线宽
            }
          }
        },
        series: [
          {
            type: 'radar',
            data: dataArr
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang='scss' scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>