
<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,
    defineExpose,
    nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
const props = defineProps({
    barNum: {
        type: Array,
        default: []
    },
    barTitle: {
        type: Array,
        default: []
    },
    lineKey: Number,
  ids: {
    type: String,
    default: "binbar"
  },
    loadingshow: {
    type: Boolean,
    default: false
  },
});

onMounted(() => {
  nextTick(() => {
    if (props.loadingshow) {
      getBin( props.barTitle,props.barNum);
    }
  });
});
const getBin = (barTitle, barNum) => {
    const chartDom = document.getElementById(props.ids);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
    xAxis: {
    type: 'category',
    boundaryGap: false,
    data: barTitle
  },
  yAxis: {
    type: 'value',
       boundaryGap: [0, '100%']
  },
  series: [
    {
      data: barNum,
      type: 'line',
       itemStyle: {
                    color: 'rgb(15, 142, 40)',
                    normal: {label : {show: true}}
                },
         emphasis: {
        focus: 'series'
      },
           areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(67, 165, 76)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(230, 242, 231)'
                        }
                    ])
                },
    }
  ]
    };

    option && myChart.setOption(option);
    //自适应
    chartAdaptation(myChart);
};
    // defineExpose({ getBin });
</script>
<style scoped>
::v-deep canvas {
width:100% !important;
  height: 100% !important;
}
</style>

