<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="3rem"
      width="6rem"
    ></Echart>
  </div>
</template>

<script>
import Echart from '../../../common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        var data = this.cdata.data
        var indicatorname = this.cdata.name
        var maxdata = [];
        data.map((item)=>{
          maxdata.push(Math.max(...data)+2)
        })
        function contains(arrays, obj) {
            var i = arrays.length;
            while (i--) {
                if (arrays[i] === obj) {
                    return i;
                }
            }
            return false;
        }

        var indicator = [];
        for (var i = 0; i < indicatorname.length; i++) {
            indicator.push({
                name: indicatorname[i],
                max: maxdata[i]
            })
        }
        this.options = {
           // backgroundColor:"#23243a",
              // legend: {
              //     data: ['成都AG超玩会六角图', '类目2'],
              //     icon: 'circle',
              //     right: '10',
              //     textStyle: {
              //         color: "rgba(250,250,250,0.6)",
              //         fontSize: 16
              //     }
              // },
              tooltip: {
                  formatter: function() {
                      var html = '';
                      for (var i = 0; i < data.length; i++) {
                          html += indicatorname[i] + ' : ' + data[i] + '%<br>'
                      }
                      return html
                  }
              },
              grid: { // 控制图的大小，调整下面这些值就可以，
                  x: 40,
                  x2: 100,
                  y2: 150// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
              },
              radar: [{
                  radius: '60%',
                  name: {
                      textStyle: {
                        padding: [-20, 0],
                          rich: {
                              a: {
                                  fontSize: '8',
                                  color: '#fff',
                                  align: 'left',
                                  lineHeight: '20',
                                  fontWeight: 'bold',
                              },
                              b: {
                                  fontSize: '10',
                                  color: '#26939d',
                                  align: 'left',
                              }
                          },
                      },
                      formatter: function(params, index) {
                          var i = contains(indicatorname, params);
                          var percent = data[i] / 100 * 100;
                          return '{b|' + params + '}\n' + '{a|' + percent.toFixed(2) + '%}'
                      }
                  },
                  indicator: indicator,
                  center: ['50%', '50%'], // 位置
                  shape: 'circle', //形状
                  splitArea: {
                      areaStyle: {
                          color: 'rgba(0,23,123,.1)', //圆环颜色
                          shadowColor: 'aqua', // 圆颜色
                          shadowBlur: 10
                      }
                  },
                  axisLine: {
                      lineStyle: {
                          color: '#08585F' // 分割线
                      }
                  },
                  splitLine: {
                      lineStyle: {
                          color: '#08585F', //圆线
                          width: 2
                      }
                  }
              }],
              series: [{
                  type: 'radar',
                  data: [{
                          value:data,
                          name: '',
                          itemStyle: {
                              color: '#327BFA',
                              opacity: 0
                          },
                          lineStyle: {
                              width: 0,
                              type: 'dotted'
                          },
                          areaStyle: {
                              normal: {
                                  color: {
                                      type: 'radial',
                                      x: 0.5,
                                      y: 0.5,
                                      r: 0.5,
                                      colorStops: [{
                                          offset: 0,
                                          color: 'rgba(50, 123, 250, 0.7)' // 0% 处的颜色
                                      }, {
                                          offset: 1,
                                          color: 'rgba(50, 123, 250, 0.3)' // 100% 处的颜色
                                      }],
                                      global: false // 缺省为 false
                                  }
                              }
                          }
                      },
                      {
                          value: data,

                      }
                  ]
              }]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
