<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"];
      },
    },
    fontColor: {
      // 轴线上文字颜色
      type: String,
      default: "#000fff",
    },
    labelColor: {
      // 图形上文本标签颜色
      type: String,
      default: "#47c8b2",
    },
    seriesData: {
      // 数据
      type: Array,
      default: () => {
        return [];
      },
    },
    title:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        title:{
          text:'',
          textStyle:{
            color:'#000',
            fontSize:14,
            fontWeight:500
          },
          left:'center',
          top:'center'
        },
        legend: {
          orient: "horizontal",
          type:'plain',
          bottom: "auto",
          // data:[],
          top: "bottom",
          itemWidth: 12,
          itemHeight: 12,
          icon: "rect",
          textStyle: {
            width: "300",
            color: "#000",
            fontSize: 12,
          },
        },
        grid: {
          left: 15,
          right: 15,
          bottom: 30,
          top: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: "16",
          },
          axisPointer: {
            type: "line",
            label: {
              fontSize: "16",
            },
          },
        },
        radar: {
          shape: "circle",
          indicator: [],
        },
        series: [],
      },
    };
  },
  watch: {
    legend(newVal) {
      this.option.legend.data = newVal;
      //   this.refreshEchart();
    },
    title(newVal) {
      this.option.title.text = newVal;
      //   this.refreshEchart();
    },
    seriesData: {
      handler(newVal) {
          const series = {
            type: "pie",
            data: newVal,
            radius: ["40%", "60%"],
            labelLine: {
              show: true,
              length2: 0
            },
            emphasis:{
              scale:false,
              focus:'self',
              itemStyle:{
                borderColor:'#000',
                borderWidth:1,
                borderType:'solid'
              }
            },
            label:{
              show:true,
              formatter: '{d}%'
            },
            selectedOffset:0,  // 选中时移动的距离
            avoidLabelOverlap: true,
          };
        this.$set(this.option, "series", series);
        // this.refreshChart();
      },
      deep: true,
    },
  },
  //   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>