<template>
  <div :id="yylx_asy" class="dashboard"></div>
</template>

<script>
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
  props: ['data','text'],
  components: {},
  data() {
    return {
      yylx_asy: uuidv1(),
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.init_yylx_asy(this.data,this.text)
  },
  methods: {
    init_yylx_asy(data,text) {
      var options = this.init_circle(data,text);
      window[this.yylx_asy] = echarts.init(
        document.getElementById(this.yylx_asy)
      );
      window[this.yylx_asy].setOption(options, true);
    },
    init_circle(data_val,text) {
      // var data_val = data_val;
      var rich = {
        white: {
          color: "#ddd",
          align: "center",
          padding: [3, 0],
        },
      };
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };
      var data = [];
      var total = 4;
      var color = ["#515fe7", "#36a5ec", "#da9f2a", "#23b2a7", "#d46002"];
      var legendarr = [];
      var temp2_data = 0;
      data_val.forEach((e) => {
        temp2_data = temp2_data + e.value;
      });
      for (var i = 0; i < data_val.length; i++) {
        data.push(
          {
            value: data_val[i].value,
            name: data_val[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                // shadowBlur: 20,
                borderColor: color[i],
                // shadowColor: color[i],
              },
            },
          },
          {
            value: temp2_data / 30,
            name: "",
            itemStyle: placeHolderStyle,
          }
        );
        legendarr.push(data_val[i].name);
      }
      for (var i = 0; i < data_val.length; i++) {
        total += data_val[i].value;
      }
      var seriesObj = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [65, 68],
          center: ["51%", "50%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#58617a",
                formatter: (params)=> {
                  var percent = 0;
                  
                  percent = ((params.value / total) * 100).toFixed(2);
                  if (params.name !== "") {
                    return percent+"%";
                  } else {
                    return "";
                  }
                },
                rich: rich,
              },
            },
          },
          data: data,
        },
      ];

      var options = {
        title: {
          text: total,
          textStyle: {
            color: "#000",
            fontSize: 40,
            fontWeight: 200,
          },
          subtext: text,
          subtextStyle: {
            color: "#c9cedd",
          },
          itemGap: -10, // 主副标题距离
          left: "center",
          top: "center",
        },
        color: color,
        tooltip: {
          show: false,
        },
        legend: {
          bottom: -5,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          orient: "horizontal",
          data: legendarr,
          backgroundColor: "#f4f7fc",
        },
        toolbox: {
          show: false,
        },

        series: seriesObj,
      };
      return options;
    },
  },
};
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>
