UChart：管理 ECharts 实例

UChart 接收 ECharts option，负责初始化、深度更新、容器 resize 和销毁。图表数据加载与 option 构建由页面负责。

安装与示例

该组件不从包主入口导出。消费项目需安装可选 peer：

pnpm add echarts@^6

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import type { EChartsOption } from 'echarts'
import UChart from '@uadmin/ui/components/UChart.vue'

const { t } = useI18n({
  useScope: 'local',
  messages: {
    'zh-CN': { revenue: '收入', monday: '周一', tuesday: '周二', wednesday: '周三' },
    'en-US': { revenue: 'Revenue', monday: 'Mon', tuesday: 'Tue', wednesday: 'Wed' },
  },
})
const values = ref([120, 180, 150])
const option = computed<EChartsOption>(() => ({
  tooltip: { trigger: 'axis' },
  grid: { left: 48, right: 24, top: 24, bottom: 40 },
  xAxis: { type: 'category', data: [t('monday'), t('tuesday'), t('wednesday')] },
  yAxis: { type: 'value' },
  series: [{ name: t('revenue'), type: 'bar', data: values.value }],
}))
</script>

<template>
  <UChart :option="option" :height="320" />
</template>

API

Prop	类型	默认 / 行为
option	EChartsOption	必填，深度 watch 后调用 setOption
height / width	number | string	320 / '100%'；数字转换为 px
theme	string	'auto'；可为 light、dark 或已注册主题名
loading	boolean	false；切换 ECharts loading
notMerge	boolean	false；传给 setOption 的第二参数
autoResize	boolean	true；挂载时决定是否创建 ResizeObserver

暴露方法	返回 / 用途
resize()	手动触发实例 resize
getInstance()	返回 ECharts 实例，挂载前/卸载后为 null

无组件级自定义事件或插槽。需要监听图表点击时，在组件挂载后通过 getInstance()?.on('click', handler) 使用 ECharts 实例 API；清理自己的监听。主题变化会销毁并重建实例，旧实例上的监听不会迁移。

主题与隐藏容器

theme="auto" 读取 ThemeModeInjectKey；createUAdmin 会装配它。独立使用可以在父组件注入响应式主题：

import { provide, ref } from 'vue'
import { ThemeModeInjectKey } from '@uadmin/ui'

const theme = ref<'light' | 'dark'>('light')
provide(ThemeModeInjectKey, theme)

未注入时按浅色处理。自定义主题先用 echarts.registerTheme 注册，再传主题名。对话框或 Tab 中的图表，显示后必要时调用 resize()；父级宽度为零时自动 resize 也不能生成有效布局。

注意点

• 当前组件导入完整 ECharts，并不是按图表类型拆分的按需加载器。需要减小首次页面体积时，可延迟加载包含图表的页面。
• 删除 option 内系列时，按需求设置 not-merge，避免旧系列被 ECharts 的合并规则保留。
• CSS 最小高度为 200px；传更小的 height 不会突破这个下限。
• autoResize 挂载后改变不会重新安装 observer；初始化时确定即可。

相关：页面容器 · 组件依赖