<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script lang="ts" setup>
import { init } from "echarts";
import * as echarts from "echarts";
import { reactive, toRefs, Ref, ref, onMounted, watchEffect } from "vue";
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
const emit = defineEmits(['click-call-back'])

let {
  data,
  yDate
} = defineProps(['data','yDate']);
// console.log('xData', xData);
// const all = xData.reduce((n, v) => {
//   return n + v.value * 1;
// }, 0);
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  window.addEventListener("resize", () => {
    chart.resize();
  });
  chart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "30%",
      right: "3%",
      left: "6%",
      bottom: "12%",
    },
    xAxis: [
      {
        type: "category",
        data,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
        axisLabel: {
          margin: 2,
          color: "#e2e9ff",
          textStyle: {
            fontSize: 11,
          },
        },
        triggerEvent: true
      },
    ],
    yAxis: [
      {
        name: "资金(万元)",
        nameTextStyle: {
          color: "#aaa",
          nameLocation: "start",
        },
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff",
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        data:yDate,
        barWidth: "20",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0,244,255,1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,77,167,1)", // 100% 处的颜色
                },
              ],
              false
            ),
            shadowColor: "rgba(0,160,221,1)",
            shadowBlur: 4,
          },
        },
      },
    ],
  });
  chart.on('click', function(params) {
    params.name = params.name || params.value
    emit('click-call-back', params)
  })
};
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: 100%;
  height: 120px;
  // margin-left:-30px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>