<template>
  <div class="data-module">
    <div class="module-header">
      <h3>数据趋势分析</h3>
      <span class="chart-type">{{ chartType }}</span>
    </div>
    <div class="module-body">
      <div class="chart-container" ref="chartContainer"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrendAnalysis',
  props: {
    chartType: {
      type: String,
      default: '24小时'
    }
  },
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    // 这里可以初始化图表，例如使用ECharts
    // 如果需要在父组件中初始化，可以通过$refs访问chartContainer
    this.$nextTick(() => {
      this.$emit('chart-ready', this.$refs.chartContainer);
    });
  },
  beforeDestroy() {
    // 清理图表实例
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
  }
}
</script>

<style scoped>
/* 组件样式将从主页面继承 */
</style>