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

<script setup>
import * as echarts from "echarts";
const status = ref(true)

import {
  ref,
  defineProps,
  reactive,
  onMounted,
  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
  },
  ids: {
    type: String,
    default: "binbar"
  },
  key: {
    type: Number,
  }
});
watch(
  () => props.loadingshow,
  (val) => {
    if (val) {
      getBin(props.barNum);
    }

  }
)

onMounted(() => {
  nextTick(() => {
    if (props.loadingshow) {
      getBin(props.barNum);
    }
  });
});
const getBin = (twodata) => {
  const chartDom = document.getElementById(props.ids);
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    series: [
      {
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 15,
            color: [
              [0.2, 'red'],
              [0.8, '#37a2da'],
              [1, 'green']
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          distance: 0,
          length: 5,
          lineStyle: {
            color: '#37a2da',
            width: 2
          }
        },
        splitLine: {
          distance: -40,
          length: 30,
          lineStyle: {
            color: '#fff',
            width: 4
          }
        },
        axisLabel: {
          color: 'inherit',
          distance: 40,
          fontSize: 15
        },
        detail: {
          valueAnimation: true,
          formatter: '{value} %',
          offsetCenter: [0, '80%'],
          color: 'inherit'
        },
        data: [
          {
            value: twodata
          }
        ]
      }
    ]
  };


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