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

<script>
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    text: {
      type: String,
      default: ""
    },
    show_center_data: {
      type: Boolean,
      default: true
    },
    bar_width: {
      type: Number,
      default: 5
    }
  },
  components: {},
  data() {
    return {
      yylx_asy: uuidv1()
    };
  },
  watch: {
    data: {
      handler() {
        this.init_yylx_asy(this.data, this.text);
      }
    }
  },
  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 = 0;
      var color = ["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"];
      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: this.bar_width,
                // 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: ["50%", "50%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#58617a",
                formatter: params => {
                  var percent = 0;
                  percent = total != 0 ? ((params.value / total) * 100).toFixed(2) : 0;
                  if (params.name !== "") {
                    return percent + "%";
                  } else {
                    return "";
                  }
                },
                rich: rich
              }
            }
          },
          data: data
        }
      ];
      var options = {
        title: {
          text: this.show_center_data ? 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>
