<template>
  <div>
    <div id="myRadar"></div>
  </div>
</template>

<script>
  export default {
    name: "helloLine",
    data() {
      return {
        radarData:[]
      };
    },
    mounted() {
      this.radarData = this.getRadarData;
      this.drawLine(this.radarData);

    },
    methods: {
      drawLine(data) {
        // 基于准备好的dom，初始化echarts实例
        let that = this;
        let myRadar = this.$echarts.init(document.getElementById("myRadar"), 'chalk');

        // 指定图表的配置项和数据
        var option = {
          tooltip: {},
          radar: {
            // shape: 'circle',
            triggerEvent: true,
            name: {
              textStyle: {
                color: "#fff",
                borderRadius: 3,
                fontSize: 14,
                padding: [13, 15]
              }
            },
            tooltip: {
              trigger: 'item'
            },
            indicator: [
              { name:  that.$t('totalAnalysis.ka_radar_text1'), max: 100 },
              { name: that.$t('totalAnalysis.ka_radar_text2'), max: 100 },
              { name: that.$t('totalAnalysis.ka_radar_text3'), max: 100 },
              { name: that.$t('totalAnalysis.ka_radar_text4'), max: 100 },
              { name: that.$t('totalAnalysis.ka_radar_text5'), max: 100 },
              { name: that.$t('totalAnalysis.ka_radar_text6'), max: 100 }
            ],
            splitArea: {
              areaStyle: {
                //color: [
                //  'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
                //  'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
                //  'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
                //].reverse()
              }
            },
            axisLine: { //指向外圈文本的分隔线样式
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            },
            splitLine: {
              lineStyle: {
                width: 2,
                color: [
                  'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
                  'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
                  'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
                ].reverse()
              }
            },
          },
          series: [
            {
              name: "某软件",
              type: "radar",
              itemStyle: {
                color: 'red'
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2cc7cb" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#59b2ef" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                },
              },
              lineStyle: {
                color: '#9FACE6'
              },
              data:  [
                  {
                    value: data,
                    name: that.$t('totalAnalysis.ka_table_text2')
                  }
                ]
            }
          ]
        };

        // 绘制图表
        myRadar.setOption(option);
        // window.addEventListener('resize',function(){
        //     myRadar.resize();
        // })
      }
    },
    //利用计算属性
  computed: {
    getRadarData() {
      return this.$store.state.totalAnalysis.radarData;
    }
  },
  //监听执行
  watch: {
    getRadarData(val) {
      this.drawLine(val);
  }
  }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  #myRadar {
    width: 100%;
    height: 380px;
    margin: 0 auto;
    display: block;
  }
</style>
