<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script lang="ts" setup>
import { init } from 'echarts';
import { reactive, toRefs, Ref, ref, onMounted, watchEffect, defineProps } from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
  data: { xData, colorList, yData, defaultData },
} = defineProps(['data']);
console.log('data', xData);
// const all=xData.reduce((n,v)=>{
//   return n + v.value
// },0)
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return (
          params[0].name +
          '<br/>' +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          params[0].seriesName +
          ' : ' +
          params[0].value
        );
      },
    },
    xAxis: {
      type: 'value',

      axisLine: {
        lineStyle: {
          color: '#6E8098',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            // color: '#000'
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: xData,
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#000',
            fontSize: '12',
          },
          formatter: function (value) {
            return value + ' %';
          },
        },
        data: yData,
      },
    ],
    series: [
      {
        name: '完成率',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            //     offset: 0,
            //     color: 'rgb(57,89,255,1)'
            // }, {
            //     offset: 1,
            //     color: 'rgb(46,200,207,1)'
            // }]),
            color: params => {
              return colorList[params.dataIndex];
            },
          },
        },
        barWidth: 20,
        data: yData,
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        data: defaultData,
        itemStyle: {
          normal: {
            color: '#EEF5FF',
            barBorderRadius: 0,
          },
        },
      },
    ],
  });
};
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 {
  width: 200px;
  height: 200px;
  margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>