<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script setup>
import { init } from 'echarts';
import * as echarts from 'echarts';

const assetEchart = ref(null);
let { data } = defineProps(['data']);
console.log('x11Data', data.xData);
let arrayist = [];
data.xData.map(item => {
  arrayist.push(item);
});
// var salvProName =["安徽省","河南省","浙江省","湖北省","贵州省","江西省","江苏省","四川省","云南省","湖南省"];
// var salvProValue =[239,181,154,144,135,117,74,72,67,55];
var salvProMax = []; //背景按最大值
for (let i = 0; i < data.yData.length; i++) {
  salvProMax.push(data.yData[i]);
}
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '9%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return params[0].name + ' : ' + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: 'value',
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: data.xData,
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#ffffff',
            fontSize: '12',
          },
        },
        data: data.yData,
      },
    ],
    series: [
      {
        name: '值',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          barBorderRadius: 30,
          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)',
            },
          ]),
        },
        barWidth: 20,
        data: data.yData,
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        data: salvProMax,
        itemStyle: {
          color: 'rgba(24,31,68,1)',
          barBorderRadius: 30,
        },
      },
    ],
  });
};
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: 498px;
  height: 250px;
  margin: 10px 14px 0 16px;

  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>