<template>
  <div id="binbar2" v-if="loadingshow" style="width: 100%; height: 100%"></div>
</template>
  

<script setup>

import * as echarts from "echarts";

import {
  ref,
  defineProps,
  reactive,
  onMounted,
  setup,
  watch,
  defineExpose,
  nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
//   import { deepClone } from "@/utils/tools";
const props = defineProps({
  barNum: {
    type: Array,
    default: []
  },
  barTitle: {
    type: Array,
    default: []
  },
  loadingshow: {
    type: Boolean,
    default: false
  }
});
onMounted(() => {
  nextTick(() => {
    if (props.loadingshow) {
      getBin(props.barTitle, props.barNum);
    }
  });
});
const getBin = (data, twodata) => {
  const chartDom = document.getElementById("binbar2");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: "category",
      data: data,
      axisLabel: {
        interval: 0,
        color: "rgba(225, 225, 225, 0.8)",
        formatter: function (value) {
          var ret = ""; //拼接加\n返回的类目项
          var maxLength = 4; //每项显示文字个数
          var valLength = value.length; //X轴类目项的文字个数
          var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
          if (rowN > 1) {
            //如果类目项的文字大于5,
            for (var i = 0; i < rowN; i++) {
              var temp = ""; //每次截取的字符串
              var start = i * maxLength; //开始截取的位置
              var end = start + maxLength; //结束截取的位置
              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = value.substring(start, end) + "\n";
              ret += temp; //凭借最终的字符串
            }
            return ret;
          } else {
            return value;
          }
        }
      }
    },
    grid: {
      y: "4%", // y 偏移量
      width: "87%", // 宽度
      height: "79%" // 高度
    },
    yAxis: {
      type: "value"
    },
    legend: {
      height: 400
    },
    series: [
      {
        data: twodata,
        type: "bar",
        barWidth: 45, // 柱子宽度
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)"
        }
      }
    ]
  };

  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};
// defineExpose({ getBin });
</script>
<style scoped></style>
  
  