<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </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: { 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 as HTMLElement);
  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>