<template>
  <div
    v-if="data.xData.length===0&&data.yData.length===0"
    style="font-size: 12px;
    position: relative;
    text-align: center;
    top: 40%;
    color: #909399;"
  >暂无数据</div>
  <bar v-else id="RuleClassificationStatistics" width="100%" :height="height" :option="option" :chart-data="data" />
</template>

<script>
import Bar from '@ability/components/Echarts/Bar.vue'
export default {
  name: 'CorrelationTrendStatistics',
  components: { Bar },
  props: {
    height: {
      type: String,
      default: '225px'
    },
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#E6A23C'],
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        grid: {
          top: '5%'
        }
      }
    }
  }
}
</script>

<style>

</style>
