<template>
  <div id="chartRadarBox">
    <div id="chartRadar" ref="radar_wrap" class="radar-wrap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartRadar: null,
      radarTip: [],
      radarValue: [],
      options: {},
      fakeDataTip: [
        { name: "IPhone 6", max: 6500 },
        { name: "华为 荣耀", max: 16000 },
        { name: "小米 3", max: 30000 },
        { name: "三星 s7", max: 38000 },
        { name: "华为 plus", max: 52000 },
      ],
      fakeDataValue: [0, 0, 0, 0, 0],
    };
  },
  created() {
    this.getDelDate();
  },
  mounted() {},
  methods: {
    // 终端数据
    async getDelDate() {
      let _this = this;
      // 品牌
      const res = await this.$get(this.$guiApi.guideHome.brandQuery);
      if (res.code == 0) {
        console.log(res, 1);
        let arr = [],
          tempArr = res.data;
        if (tempArr.length != 0) {
          tempArr.forEach((item, index) => {
            let obj = {
              name: item.brandModel,
              // max: 100000
            };
            _this.radarTip.push(obj);
            _this.radarValue.push(item.more);
          });
        } else {
          _this.radarTip = _this.fakeDataTip;
          _this.radarValue = _this.fakeDataValue;
        }
        this.setEchartOption();
      }
    },
    drawPieChart() {
      this.chartRadar = this.$echarts.init(this.$refs.radar_wrap);
      this.chartRadar.setOption(this.options);
    },
    //修改echart配制
    setEchartOption() {
      let _this = this;
      const options = {
        title: { text: "" }, // 隐藏图表标题
        tooltip: {
          trigger: "item",
          backgroundColor:'#000',//提示框浮层的背景颜色。
          axisPointer: { //去掉移动的指示线
              type: 'none'
          },
          // formatter: (text) => {
          //       if (text != undefined) {
          //         text = text.replace(/\S{11}/g, function (match) {
          //           return match + "\n";
          //         });
          //         return text;
          //       } else {
          //         return "";
          //       }
          //     },
          // 自定义提示框内容
          formatter: function (params, ticket, callback) {
             if(_this.radarTip.length == 6){
                var text=_this.radarTip[0].name+":"+params.data.value[0]+'<br> '+
                _this.radarTip[1].name+":"+params.data.value[1]+'<br> '+
                _this.radarTip[2].name+":"+params.data.value[2]+'<br> '+
                _this.radarTip[3].name+":"+params.data.value[3]+'<br> '+
                _this.radarTip[4].name+":"+params.data.value[4]+'<br> '+
                _this.radarTip[5].name+":"+params.data.value[5]
                return text;
             }else if(_this.radarTip.length == 10){
               var text=_this.radarTip[0].name+":"+params.data.value[0]+'<br> '+
               _this.radarTip[1].name+":"+params.data.value[1]+'<br> '+
               _this.radarTip[2].name+":"+params.data.value[2]+'<br> '+
               _this.radarTip[3].name+":"+params.data.value[3]+'<br> '+
               _this.radarTip[4].name+":"+params.data.value[4]+'<br> '+
               _this.radarTip[5].name+":"+params.data.value[5]+'<br> '+
               _this.radarTip[6].name+":"+params.data.value[6]+'<br> '+
               _this.radarTip[7].name+":"+params.data.value[7]+'<br> '+
               _this.radarTip[8].name+":"+params.data.value[8]+'<br> '+
               _this.radarTip[9].name+":"+params.data.value[9]
               return text;
             }
          }
        },
        
        // 图表的位置
        grid: {
          position: "center",
        },
        polar: [
          {
            nameGap: 4, // 图中工艺等字距离图的距离
            splitNumber: 4, // 网格线的个数
            center: ["50%", "45%"], // 图的位置
            name: {
              show: true,
              textStyle: {
                with: 300,
              },
              color:"#000000",
              // formatter: (text) => {
              //   if (text != undefined) {
              //     text = text.replace(/\S{10}/g, function (match) {
              //       return match + "\n";
              //     });
              //     return text;
              //   } else {
              //     return "";
              //   }
              // },
              formatter: function(value) {
                  let list = value.split("");
                  let result="";
                  for(let i=1;i<=list.length;i++) {
                    if(!(i%10)&&list[i]!=undefined) {
                      result += list[i-1]+'\n';
                    }else {
                      result += list[i-1];
                    }
                  }
                  return result;
                },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#fff"], // 图表背景网格的颜色
              },
            },
            axisLine: {
              // 坐标轴线
              show: true, // 默认显示，属性show控制显示与否
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "#66abfb",
                width: 1,
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#66abfb",
                width: 1,
              },
            },
            indicator: this.radarTip,
          },
        ],
        calculable: true,
        series: [
          {
            name: "终端分析",
            type: "radar",
            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 8, // 拐点的大小
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#66abfb", // 图表中各个图区域的边框线颜色
                },
                areaStyle: {
                  type: "default",
                },
              },
            },
            data: [
              {
                value: this.radarValue,
                name: "终端分析",
                itemStyle: {
                  normal: {
                    // color: "#66abfb",
                    color: {
                       type: 'linear',
                       x: 0,
                       y: 0,
                       x2: 0,
                       y2: 1,
                       colorStops: [{
                           offset: 0, color: '#5B99FF' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#4674E8' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                    },
                    lineStyle: {
                      show: true,
                      color: "#66abfb",
                    },
                  },
                },
              },
            ],
          },
        ],
      };

      this.options = options;
    },
  },
  watch: {
    options: {
      handler(newval, oldval) {
        if (newval !== oldval) {
          this.$nextTick(() => {
            this.drawPieChart();
          });
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang='scss' scope>
#textDeail {
  font-size: 20px;
  height: 20px;
  font-weight: bold;
  margin-left: 43px;
  margin-top: 32px;
  text-indent: 10px;
  line-height: 20px;
  padding-left: 13px;
  position: relative;
  &::before {
    content: "";
    width: 7px;
    height: 20px;
    position: absolute;
    top: 2px;
    left: 0;
    background: rgba(57, 122, 255, 1);
  }
}

#chartRadarBox {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

#chartRadar {
  height: 90%;
}
</style>