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

<script setup>

import * as echarts from "echarts";
import { ref, defineProps, watch, onMounted, nextTick, watchEffect } from "vue";
import { chartAdaptation } from "@/utils/tools";
import emitter from "@/utils/eventBus.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
//   import { deepClone } from "@/utils/tools";

const binTab = ref(null)
const binshow = ref(false);

const props = defineProps({
  pieNum: {
    type: Array,
    default: []
  },
   pieTitle: {
    type: Array,
    default: []
  },
  ids: {
    type: String,
    default: ''
  }
});


onMounted(() => {
  binshow.value = true
  const chartDom = document.getElementById(props.ids);
  const myChart = echarts.init(chartDom);
  let option;
  option = {
     tooltip: {
        // 触发类型，默认数据触发，可选为：'item' | 'axis'
        trigger: 'axis'
    },
    grid:{
      top:'10%',
      left:'2%',
      right:'2%',
height:170
},
     xAxis: {
    type: 'category',
    data: props.pieTitle,
     axisLabel: {
          //坐标轴刻度标签的相关设置。
          formatter: function (params) {
            var newParamsName = ""; // 最终拼接成的字符串
            var paramsNameNumber = params.length; // 实际标签的个数
            var provideNumber = 4; // 每行能显示的字的个数
            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',
               show: true  
  },
  series: [
    {
      data: props.pieNum,
      type: 'bar',
       barWidth: '30%',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#006E4A' // 100% 处的颜色
              },
              {
                offset: 1,
                                color: '#1FD071' // 0% 处的颜色background: linear-gradient( 272deg, #1FD071 3%, #006E4A 100%);

              }
            ]
          }
        }
    }
  ]
  }
    
 
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
  window.addEventListener('resize', () => {
    myChart.resize()
  })

})


</script>
<style scoped></style>