<template>
  <div ref="assetEchart" class="asset_echart-nopx"></div>
</template>
<script setup>
import { init } from "echarts";
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  watchEffect
} from "vue";
const assetEchart = ref();
let {
  data: { all, yData, colorList},
} = defineProps(["data"]);
const emit = defineEmits(['select-echart'])
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener("resize", () => {
    chart.resize();
  });
  chart.setOption({
    title: [{
    text: '存在不合理',
    x: 'center',
    top: '55%',
    textStyle: {
    fontSize: 16,
    fontWeight: '10',
    }
    },
    {
    text: yData[0] + '%',
    x: 'center',
    top: '38%',
    textStyle: {
    fontSize: '16',
    fontFamily: 'DINAlternate-Bold, DINAlternate',
    foontWeight: '600',
    color:'red'
    },
    }
    ],
    polar: {
    radius: ['87%', '99%'],
    center: ['50%', '50%'],
    },
    angleAxis: {
    max: 100,
    show: false,
    },
    radiusAxis: {
    type: 'category',
    show: true,
    axisLabel: {
    show: false,
    },
    axisLine: {
    show: false,
    },
    axisTick: {
    show: false,
    },
    },
    series: [
    {
    name: '',
    type: 'bar',
    roundCap: true,
    barWidth: 90,
    showBackground: true,
    backgroundStyle: {
    color: 'rgba(66, 66, 66, .3)',
    },
    data:yData,
    coordinateSystem: 'polar',
    itemStyle: {
    color: function(params) {
    return colorList[params.dataIndex]
    }
    },
    },
    ],
  });
  chart.getZr().on('click', (event) => {
    if (!event.target) {
      // console.log(event)
      emit('select-echart')
    }
  })
};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, "height").height;
  charts.style.height = hi;
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart-nopx {
  // width: 200px !important;
  height: 200px;
  margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
.map{
  position:absolute
}
</style>