<template>
  <Echart ref="chart" :options="option" height="100%" width="100%" />
</template>
  <script>
/**雷达图 */
import Echart from "./../index";
export default {
  name: "baseRardarChart",
  components: { Echart },
  props: {
    colors: {
      // 颜色
      type: Array,
      default: () => {
        return ["#01b4ff", "#0337ff"];
      },
    },
    axisLineColor: {
      // 轴线颜色
      type: String,
      default: "#101d5d",
    },
    fontColor: {
      // 轴线上文字颜色
      type: String,
      default: "#000fff",
    },
    labelColor: {
      // 图形上文本标签颜色
      type: String,
      default: "#47c8b2",
    },
    seriesData: {
      // 数据
      type: Array,
      default: () => {
        return [];
      },
    },
    indicator: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        legend: {
          type: "plain",
          orient: "horizontal",
          bottom: "auto",
          top: "bottom",
          itemWidth: 12,
          itemHeight: 12,
          icon: "rect",
          textStyle: {
            width: "300",
            color: "#000",
            fontSize: 12,
          },
        },
        grid: {
          left: 30,
          right: 30,
          bottom: 30,
          top: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: "16",
          },
          axisPointer: {
            type: "line",
            label: {
              fontSize: "16",
            },
          },
        },
        radar: {
          shape: "circle",
          axisLine:{
            show:false
          },
          axisLabel:{
            // show:true
          },
          splitArea:{
            // show:false,
            areaStyle:{
              color:'#fff'
            }
          },
          indicator: [],
        },
        series: [],
      },
    };
  },
  watch: {
    legend(newVal) {
      this.option.legend.data = newVal;
      //   this.refreshEchart();
    },
    seriesData: {
      handler(newVal) {
        const newSeries = [];
        for (const item of newVal) {
          const series = {
            name: item.name,
            type: "radar",
            data: item.data,
            areaStyle:{}
          };
          newSeries.push(series);
        }
        this.$set(this.option, "series", newSeries);
        // this.refreshChart();
      },
      deep: true,
    },
    indicator: {
      deep: true,
      handler(newVal) {
        this.option.radar.indicator = newVal;
        // this.refreshChart();
      },
    },
  },
  //   mounted() {
  //     this.refreshChart();
  //   },
  //   methods: {
  //     refreshChart() {
  //       if (this.xAxisData.length) {
  //         this.option.legend.data = this.legend;
  //         this.option.xAxis[0].data = this.xAxisData;
  //         const newSeries = [];
  //         for (const item of this.seriesData) {
  //           const series = {
  //             name: item.name,
  //             type: "line",
  //             symbol: "none", // 去掉折线节点
  //             smooth: this.smooth, // 曲线变平滑
  //             itemStyle: {
  //               color: `rgb(${item.color})`,
  //             },
  //             lineStyle: {
  //               width: 1,
  //             },
  //             areaStyle: {
  //               color: new this.$echarts.graphic.LinearGradient(
  //                 0,
  //                 0,
  //                 0,
  //                 1, // 变化度 //三种由深及浅的颜色
  //                 [
  //                   {
  //                     offset: 0.1,
  //                     color: `rgba(${item.color},.6)`,
  //                   },
  //                   {
  //                     offset: 1,
  //                     color: "rgba(0,0,0,.0)",
  //                   },
  //                 ]
  //               ),
  //             },
  //             data: item.data,
  //           };
  //           newSeries.push(series);
  //         }
  //         this.$set(this.option, "series", newSeries);
  //       }
  //     },
  //   },
};
</script>
  
  <style scoped>
</style>