<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',
                center: ['40%', '60%'],
                startAngle: 220,
                endAngle: -40,
                min: 0,
                max: 100,
                splitNumber: 7,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0,0,1,0,[
                        {
                            offset: 0.1,
                            color: "#FFC600"
                        },
                        {
                            offset: 0.6,
                            color: "#30D27C"
                        },
                        {
                            offset: 1,
                            color: "#0B95FF"
                        }
                    ]),
                },
                progress: {
                    show: true,
                    width: 20
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 20
                    }
                },
                axisTick: {
                    distance: -45,
                    splitNumber: 9,
                    lineStyle: {
                        width: 1,
                        color: new echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset: 0.1,
                                color: "#FFC600"
                            },
                            {
                                offset: 0.6,
                                color: "#30D27C"
                            },
                            {
                                offset: 1,
                                color: "#0B95FF"
                            }
                        ]),
                    }
                },
                splitLine: {
                    distance: -52,
                    length: 11,
                    lineStyle: {
                        width: 2,
                        color: new echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset: 0.1,
                                color: "#FFC600"
                            },
                            {
                                offset: 0.6,
                                color: "#30D27C"
                            },
                            {
                                offset: 1,
                                color: "#0B95FF"
                            }
                    ]),
                    }
                },
                axisLabel: {
                    distance: -20,
                    color: new echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset: 0.1,
                                color: "#FFC600"
                            },
                            {
                                offset: 0.6,
                                color: "#30D27C"
                            },
                            {
                                offset: 1,
                                color: "#0B95FF"
                            }
                        ]),
                    fontSize: 0
                },
                anchor: {
                    show: false
                },
                title: {
                    show: true
                },
　　　　　　　　　 // 图中的34%是我另外添加的，把下面的show设置为true可以显示自带的数字
               detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '-15%'],
        fontSize: 20,
        fontWeight: 'bolder',
        formatter: '{value}'+'\n'+"平均分",
        color: 'inherit'
      },
                data: [
                    {
                        value: twodata
                    }
                ]
                }
            ]
  };


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