import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  props: {
    titleStr: {

    },
    id: {
      type: String,
      default: 'pie'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            value: 2154,
            unit: '万元',
            name: "项目一",
          },
          {
            value: 3854,
            unit: '万元',
            name: "项目二",
          },
          {
            value: 3854,
            unit: '万吨',
            name: "项目三",
          },
          {
            value: 3854,
            unit: '万吨',
            name: "项目四",
          },
          {
            value: 3854,
            unit: '万吨',
            name: "项目五",
          }
        ];
      }
    }
  },
  data () {
    return {
      unit: '万',
      chart: null
    };
  },
  mounted () {
    this.initChart();
  },
  computed: {
  },
  methods: {
    // 设置监听器 页面尺寸变化重新绘制图表
    initResizeCallBack () {
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById(this.id), () => {
        this.$nextTick(() => {
          this.chart.resize();
        });
      });
    },
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chartSetOption();
    },
    chartSetOption () {
      var scale = 1;
      var echartData = [
        ...this.data
      ];
      var rich = {
        color0: {
          color: "rgba(15, 252, 252, 1)",
          fontSize: 16 * scale,
          padding: [5, 4],
          align: "left",
        },
        color1: {
          color: "rgba(29, 197, 104, 1)",
          fontSize: 16 * scale,
          padding: [5, 4],
          align: "left",
        },
        color2: {
          color: "rgba(49, 129, 246, 1)",
          fontSize: 16 * scale,
          padding: [5, 4],
          align: "left",
        },
        color3: {
          color: "rgba(18, 51, 255, 1)",
          fontSize: 16 * scale,
          padding: [5, 4],
          align: "left",
        },
        color4: {
          color: "rgba(134, 91, 252, 1)",
          fontSize: 16 * scale,
          padding: [5, 4],
          align: "left",
        },
        hr: {
          // borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      const option = {
        title: [
          {
            text: "总债务",
            left: "23%",
            top: "40%",
            padding: [0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 18 * scale,
              align: "center",
            },
          },
          {
            text: this.titleStr,
            left: "22%",
            top: "50%",
            padding: [0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 18 * scale,
              align: "center",
            },
          }
        ],
        legend: {
          show: true,
          top: 'center',
          orient: 'vertical',
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          right: 15,
          itemGap: 0,
          textStyle: {
            fontSize: 14,
            color: 'rgba(210, 238, 255, 1)',
            rich: rich
          },
          formatter: (params) => {
            var total = 0; //考生总数量
            var percent = 0; //考生占比
            var itemvalue = 0
            let index = 0
            echartData.forEach((value, i, array) => {

              total += value.value;
              if (value.name === params) {
                index = i
                itemvalue = value.value
              }
            });
            percent = itemvalue === 0 ? 0 : ((itemvalue / total) * 100).toFixed(1);
            return (
              '{blue|' + params + '}\n{hr|}' + '\n' +
              `{color${index}|` + percent + '%' + '}' + ''
              + `{color${index}|` + itemvalue + this.unit + '}'
            );
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["48%", "70%"],
            center: ['30%', '50%'],
            color: ["rgba(15, 252, 252, 1)", "rgba(29, 197, 104, 1)", "rgba(49, 129, 246, 1)", "rgba(18, 51, 255, 1)", 'rgba(134, 91, 252, 1)'],
            label: {
              normal: {
                show: false,
                formatter: function (params) {
                  var total = 0;
                  var percent = 0;
                  echartData.forEach(function (value) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return (
                    "{white|" +
                    percent + "%" +
                    "}\n{blue|" +
                    params.name +
                    "}\n{hr|}\n{yellow|" +
                    params.value + params.data.unit + '}'
                  );
                },
                rich: rich,
              },
            },
            labelLine: {
              normal: {
                length: 10 * scale,
                length2: 20 * scale,
              },
            },
            data: echartData,
          },
        ],
      };
      this.chart.setOption(option);
      this.initResizeCallBack();

    }
  }
};
