src/components/MiniEchart.vue

<template>
  <div ref="chartContainer" class="echart-mini"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { nextTick } from 'vue'

echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])

export default {
  name: 'MiniEchart',
  props: {
    data: { type: Array, default: () => [] },
    color: { type: String, default: '#22c55e' }
  },
  data() {
    return {
      chart: null,
      resizeObserver: null
    }
  },
  mounted() {
    console.log('[MiniEchart] Mounted with data:', this.data?.length || 0, 'items')
    nextTick(() => this.initChart())
  },
  beforeUnmount() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
      this.resizeObserver = null
    }
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  watch: {
    data(newVal) {
      if (this.chart && Array.isArray(newVal)) {
        this.updateChart(newVal)
      }
    }
  },
  methods: {
    initChart() {
      const el = this.$refs.chartContainer
      console.log('[MiniEchart] initChart - el:', el)
      
      if (!el) {
        console.log('[MiniEchart] No element found')
        return
      }

      const { clientWidth: w, clientHeight: h } = el
      console.log('[MiniEchart] Element size:', w, 'x', h)

      if (!w || !h) {
        console.log('[MiniEchart] Size is 0, will retry on next tick')
        setTimeout(() => this.initChart(), 100)
        return
      }

      console.log('[MiniEchart] Initializing ECharts...')
      this.chart = echarts.init(el, null, { renderer: 'canvas' })
      console.log('[MiniEchart] Chart initialized, rendering data:', this.data?.length || 0)
      
      this.renderChart(this.data)

      // Listen for container resize
      this.resizeObserver = new ResizeObserver(() => {
        if (this.chart) {
          this.chart.resize()
        }
      })
      this.resizeObserver.observe(el)
    },
    renderChart(arr) {
      if (!this.chart) return
      
      const d = Array.isArray(arr) ? arr : []
      console.log('[MiniEchart] Rendering chart with', d.length, 'data points')
      
      this.chart.setOption({
        animation: true,
        grid: { left: 0, right: 0, top: 0, bottom: 0 },
        xAxis: { 
          type: 'category', 
          show: false, 
          boundaryGap: false, 
          data: d.map((_, i) => i) 
        },
        yAxis: { 
          type: 'value', 
          show: false, 
          scale: true 
        },
        tooltip: { show: false },
        color: [this.color || '#22c55e'],
        series: [{
          type: 'line',
          data: d,
          showSymbol: false,
          smooth: 0.35,
          lineStyle: { width: 2 },
          areaStyle: { opacity: 0.15 }
        }]
      })
    },
    updateChart(newData) {
      if (!this.chart) return
      
      const d = Array.isArray(newData) ? newData : []
      this.chart.setOption({
        xAxis: { data: d.map((_, i) => i) },
        series: [{ data: d }]
      })
    }
  }
}
</script>

<style scoped>
.echart-mini {
  width: 100%;
  height: 100%;
}
</style>