<template>
  <el-card class="box-card">
    <div class="text-sm">月累计湿润时间（h）</div>
    <el-empty description="暂无数据" v-if="noData"></el-empty>
    <div id="moistTimeDataContainer"></div>
  </el-card>
</template>

<script setup>
import { onMounted, ref, defineExpose } from 'vue';
import { Column } from '@antv/g2plot';

const show = ref(false);
const noData = ref(true);
let bar = null;

// 设置图表
onMounted(() => {
  show.value = true;
});

const setDate = data => {
  noData.value = false;
  if (bar) {
    bar.destroy();
  }
  bar = new Column('moistTimeDataContainer', {
    data,
    layout: 'vertical',
    xField: 'time',
    yField: 'value',
    // height: 200,
    padding: [30, 16, 60, 50],
    color: '#C280FF',
    columnWidthRatio: 0.6, // 宽度占比
    yAxis: {
      title: {
        text: '月累计湿润时间',
        spacing: 20,
      },
    },
    slider: {
      start: 0.1,
      end: 0.5,
    },
    meta: { value: { alias: '月累计湿润时间（h）' } },
  });

  bar.render();
};

defineExpose({ setDate });
</script>
