迷你趋势图 sparkline ​

  <ev-chart
    :options="{
      type: 'sparkline',
      title: '近 7 日活跃',
      labels: ['一', '二', '三', '四', '五', '六', '日'],
      series: [{ name: '活跃', data: [102, 118, 96, 134, 121, 88, 76] }],
    }"
    :height="120"
  />

  <div style="display: flex; flex-direction: column; gap: 0; border: 1px solid var(--cd-border, #e5e7eb); border-radius: 8px; overflow: hidden;">
    <div v-for="f in funds" :key="f.name" style="display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--cd-border-light, #eff0f1);">
      <div style="width: 200px;">
        <div style="font-size: 13px; font-weight: 500;">{{ f.name }}</div>
        <div style="font-size: 11px; color: #94a3b8;">{{ f.code }}</div>
      </div>
      <ev-chart
        :options="{ type: 'sparkline', series: [{ name: f.name, data: f.trend }], labels: f.trend.map((_, i) => String(i + 1)) }"
        :height="44"
        style="flex: 1;"
      />
      <div style="width: 90px; text-align: right;">
        <div style="font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;">{{ f.nav }}</div>
        <div style="font-size: 11px; font-weight: 600;" :style="{ color: f.chg >= 0 ? '#dc2626' : '#16a34a' }">{{ f.chg >= 0 ? '+' : '' }}{{ f.chg }}%</div>
      </div>
    </div>
  </div>