<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
import { guid } from '@/utils/util';
import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';
export default {
  name: 'rader',
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
      text: [],
      data: [],
      chartData: [],
    });
    const initSeries = () => {
      state.text = [];
      state.data = [];

      state.chartData.forEach((v) => {
        state.text.push({ name: v.name });
        state.data.push(v.total);
      });
    };
    const init = () => {
      if (state.chart) state.chart.dispose();
      let chartDom = echarts.init(document.getElementById(state.id));
      let option = {
        color: ['#FFE434', '#56A3F1', '#FF917C'],
        tooltip: {
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
          textStyle: { fontSize: 14, fontWeight: 500, color: '#666666' },
        },
        radar: [
          {
            indicator: state.text,
            center: ['50%', '50%'],
            radius: '60%',
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              // formatter: '{value}',
              color: 'rgba(166, 201, 203, 1)',
              formatter: function (params) {
                var newParamsName = '';
                var paramsNameNumber = params.length;
                var provideNumber = 7;
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '';
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + '\n';
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
            splitArea: {
              areaStyle: {
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10,
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)',
              },
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)',
              },
            },
          },
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },
            data: [
              {
                value: state.data,
                name: '待整改问题分布情况',
              },
            ],
          },
        ],
      };
      chartDom.clear();
      chartDom.setOption(option, true);
      state.chart = chartDom;
    };
    const initData = () => {
      if (state.chartData.length == 0) return;
      initSeries();
      init();
    };
    onMounted(() => {});
    return {
      ...toRefs(state),
      initData,
    };
  },
};
</script>

<style></style>