import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  props: {
    id: {
      type: String,
      default: 'one222'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            name: '债务规模',
            value: '570',
            unit: '万'
          },
          {
            name: '负债规模',
            value: '300',
            unit: '万'
          },
          {
            name: '集体资产',
            value: '130',
            unit: '万'
          }
        ];
      }
    },
    titlePer: {},
    title: {
      type: String,
      default: '溢价率'
    },
    color: {
      type: [Array],
      default: function () {
        return ['rgba(134, 91, 252, 1)', 'rgba(15, 252, 252, 1)', 'rgba(49, 129, 246, 1)']
      }
    }
  },
  data () {
    return {
      chart: null
    };
  },
  mounted () {
    this.initChart();
  },
  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 () {

      let seriesArr = [];
      let max = 0
      this.data.forEach((item, index) => {
        max += item.value * 1
        seriesArr.push(
          {
            name: item.name,
            type: "bar",
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 5,
            showBackground: true,
            backgroundStyle: {
              color: "RGBA(9, 35, 75, 1)",
            },
            data: [item.value],
            polarIndex: index,
            itemStyle: {
              normal: {
                color: this.color[index]
              },
            },
          }
        )
      });
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return params.seriesName + '\n' + params.value + '万元';
          }
        },
        polar: [
          {
            index: 0, // polarIndex为0
            radius: ["45%", "50%"],
            center: ["30%", "45%"]
          },
          {
            index: 1, // polarIndex为0
            radius: ["55%", "60%"],
            center: ["30%", "45%"]
          },
          {
            index: 2, // polarIndex为0
            radius: ["65%", "70%"],
            center: ["30%", "45%"]
          }
        ],
        legend: {
          show: true,
          bottom: 'center',
          orient: 'vertical',
          icon: 'circle',
          right: 15,
          itemGap: 30,
          itemHeight: '8',
          itemWidth: 12,
          textStyle: {
            fontSize: 14,
            color: 'rgba(210, 238, 255, 1)',
            rich: {
              unit0: {
                fontSize: 14,
                color: 'rgba(134, 91, 252, 1)'
              },
              unit1: {
                fontSize: 14,
                color: 'rgba(15, 252, 252, 1)'
              },
              unit2: {
                fontSize: 14,
                color: 'rgba(49, 129, 246, 1)'
              }
            }
          },
          formatter: (name) => {
            let str = ''
            this.data.find((item, i) => {
              if (item.name === name) {
                str = name + '  ' + `{unit${i}|${item.value + item.unit}}`
              }
            })
            return str;
          }
        },
        angleAxis: [
          {
            polarIndex: 0,
            max: max,
            show: false,
          },
          {
            polarIndex: 1,
            max: max,
            show: false,
          },
          {
            polarIndex: 2,
            max: max,
            show: false,
          }
        ],
        radiusAxis: [
          {
            type: "category",
            polarIndex: 0,
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            polarIndex: 1,
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            polarIndex: 2,
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          }
        ],
        series: seriesArr,
      };
      this.chart.setOption(option);
      this.initResizeCallBack();

    }
  }
};
