<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(['clickbarli']);
// 数据
const props = defineProps({
  barNum: {
    type: Array,
    default: []
  },
  barTitle: {
    type: Array,
    default: []
  },
  loadingshow: {
    type: Boolean,
    default: false
  },
  ids: {
    type: String,
    default: "bar"
  },
  title: {
    type: String,
    default: ""
  }
});

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;
  option = {
    title: {
      text: props.title,
      subtext: '',
      left: 'center'
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    xAxis: {
      type: 'category',
      data: data
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: twodata,
        type: 'bar',
        // showBackground: true,
        // backgroundStyle: {
        //   color: 'rgba(180, 180, 180, 0.2)'
        // }
      }
    ]
  };
  //点击事件
  myChart.on("click", function (params) {
    emits('clickbarli', params.data)
  });
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};


</script>

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