<!--
 * @Author: your name
 * @Date: 2021-10-25 15:20:45
 * @LastEditTime: 2021-10-25 16:11:45
 * @LastEditors: Please set LastEditors
 * @Description: 带标题的Echarts面板
 * @FilePath: \hyyfScreen\src\views\Zoology\charts\ChartBoard.vue
-->
<template>
  <div class="chart-board">
    <div class="title-bar">
      <div class="title">{{ title }}</div>
<!--      <div v-if="ifDate" class="date">-->
<!--        <el-date-picker-->
<!--          v-model="dates"-->
<!--          type="daterange"-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          size="mini"-->
<!--          @change="getDates">-->
<!--        </el-date-picker>-->
<!--      </div>-->
    </div>
    <div class="chart">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '温度'
    },
    ifDate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dates: []
    }
  },
  methods: {
    getDates(newValue) {
      this.$emit('emitDates', newValue)
    }
  },
}
</script>
<style scoped>
.chart-board {
  width: 100%;
  height: 100%;
  background: rgb(3,16,50);
}
.title-bar {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.title {
  color: #66FFFF;
  font-size: 14px;
  font-weight: 400;
}
.chart {
  width: 100%;
  height: calc(100% - 60px);
}
</style>
