<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 } from "vue";
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
  xData,
  bottom,
  yData,
  yData2,
  all,
  realValue,
  itemUnit,
  itemTarget,
  data: { titleArray },
} = defineProps([
  "data",
  "bottom",
  "xData",
  "yData",
  "yData2",
  "all",
  "realValue",
  "itemUnit",
  "itemTarget",
]);
// 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: "0%",
      right: "0%",
      left: "-10%",
      bottom: "11%",
      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: false,
      itemWidth: 14,
      top: "0",
      left: "center",
      data: titleArray,
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        color: "#fff",
        data: xData,
        axisLabel: {
          margin: 10,
          color: "#fff",
          textStyle: {
            fontSize: 13,
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        min: 0,
        show: false,
        axisLabel: {
          color: "#fff",
          textStyle: {
            fontSize: 16,
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
      },
    ],
    series: [
      {
        name: titleArray[0] + itemUnit,
        type: "bar",
        data: yData,
        barWidth: "30px",
        itemStyle: {
          normal: {
            label: {
              //柱体上显示数值
              rotate: 30, // 设置倾斜角度
              offset: [10, -15],
              interval: 0,
              show: true, //开启显示
              // position: 'center',//在上方显示
              textStyle: {
                //数值样式
                fontSize: "10px",
                color: "#fff",
              },
              formatter: function (params) {
                return realValue > 0 ? realValue + itemUnit : "0";
              },
            },
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#4487F5  ", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#A7EFFF ", // 100% 处的颜色
                },
              ],
            },
            barBorderRadius: [0, 0, 0, 0],
          },
        },
      },
      {
        name: titleArray[1] + itemUnit,
        type: "bar",
        data: yData2,
        barWidth: "30px",
        itemStyle: {
          normal: {
            label: {
              //柱体上显示数值
              rotate: 30, // 设置倾斜角度
              interval: 0,
              show: true, //开启显示
              offset: [10, -15],
              textStyle: {
                //数值样式
                fontSize: "10px",
                color: "#fff",
              },
              formatter: function (params) {
                return itemTarget > 0 ? itemTarget + itemUnit : "0";
              },
            },
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#48E38F  ", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#D1FBE4  ", // 100% 处的颜色
                },
              ],
            },
            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: 168px;
  height: 150px;
  // margin: 0 0 0 1px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>