<template>
  <div :id="props.ids" style="width: 100%; height: 100%"></div>
</template>

<script setup>
// 引入
import * as echarts from "echarts";
import {
  ref,
  defineProps,
  reactive,
  onMounted,
  watch,
  defineEmits,
  nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
const emits = defineEmits(["clickOrgId"]);
// 数据
const props = defineProps({
  barNum: {
    type: Array,
    default: []
  },
  barTitle: {
    type: Array,
    default: []
  },
  loadingshow: {
    type: Boolean,
    default: false
  },
  ids: {
    type: String,
    default: "bars"
  }
});

onMounted(() => {
  getBin(props.barTitle, props.barNum);
});

watch(
  () => props.barNum,
  (val) => {
    if (val) {
      getBin(props.barTitle, props.barNum);
    }
  },
  { deep: true }
);

// 方法
const getBin = (data, twodata) => {
  const chartDom = document.getElementById(props.ids);
  var myChart = echarts.init(chartDom);
  var option;
  let series = [];
  twodata.map((item) => {
    let arr = [];
    let obj = {
      name: item.name,
      type: "bar",
      stack: "Ad",
      emphasis: {
        focus: "series"
      },
      itemStyle: {
        //自定义颜色
        normal: { color: item.color }
      },
      data: item.data
    };
    series.push(obj);
  });
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      textStyle: {
        color: "#319177",
        fontWeight: 600,
        fontSize: 16
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      width: "95%", // 宽度
      height: "80%", // 高度
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: data,
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          formatter: function (params) {
            var newParamsName = ""; // 最终拼接成的字符串
            var paramsNameNumber = params.length; // 实际标签的个数
            var provideNumber = 2; // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = ""; // 表示每一次截取的字符串
                var start = p * provideNumber; // 开始截取的位置
                var end = start + provideNumber; // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr; // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName;
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: series
  };
  //点击事件
  myChart.on("click", function (params) {
    emits("clickOrgId", params);
  });
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};
</script>

<style lang="scss" scoped></style>
