<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from 'echarts';
const assetEchart = ref(null);
let {
  data: { titleArray, xData, defaultData, yData, colorList },
} = defineProps(['data']);
const all = xData.reduce((n, v) => {
  return n + v.value;
}, 0);
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    grid: {
      top: '12%',
      right: '0%',
      left: '1.5%',
      bottom: '8%',
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      textStyle: {
        fontSize: 12,
      },
      formatter: function (params) {
        let dom = `${params[0].name}
              <br/>`;
        for (let i of params) {
          dom += `${i.marker}
              ${i.seriesName}
                :
              ${i.value}
              <br/>`;
        }
        return dom;
      },
    },
    legend: {
      show: true,
      itemWidth: 14,
      top: '0',
      left: 'center',
      data: titleArray,
      textStyle: {
        color: '#333333',
      },
    },
    xAxis: [
      {
        type: 'category',
        color: '#333333',
        data: xData,
        axisLabel: {
          margin: 20,
          color: '#333333',
          textStyle: {
            fontSize: 14,
          },
        },
        axisLine: {
          lineStyle: {
            color: '#333333',
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: '#ddd',
          },
        },
      },
    ],
    yAxis: [
      {
        min: 0,
        show: false,
        axisLabel: {
          color: '#333333',
          textStyle: {
            fontSize: 16,
          },
        },
        axisLine: {
          lineStyle: {
            color: '#333333',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#ddd',
            type: 'dashed',
          },
        },
      },
    ],
    series: [
      {
        name: titleArray[0],
        type: 'bar',
        data: yData,
        barWidth: '17px',
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex];
            },
            barBorderRadius: [0, 0, 0, 0],
          },
        },
      },
      {
        name: titleArray[1],
        type: 'bar',
        data: defaultData,
        barWidth: '17px',
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex];
            },
            barBorderRadius: [0, 0, 0, 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: 400px;
  height: 150px;
  // margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>