Chart 图表
基于 ECharts 封装的可视化图表组件，支持折线图、柱状图、饼图、雷达图、散点图等常见图表类型，内置自适应容器与加载状态。
基础折线图
通过 option 传入 ECharts 配置项，自动初始化并渲染图表。
渐变柱状图
柱状图搭配渐变色和圆角，展示更现代的视觉风格。
环形饼图
使用饼图展示占比数据，支持南丁格尔图（玫瑰图）模式。
雷达图
雷达图常用于多维数据对比，如能力评估、指标分析等场景。
散点图
用散点图展示数据的分布情况与相关性。
仪表盘
仪表盘适合展示进度、完成率等单一指标的达标情况。
加载状态
设置 loading 属性显示加载动画，动态数据加载完成后关闭。
多系列折线 + 柱状混合图
在同一图表中组合折线与柱状系列，对比趋势与量级。
数据看板
多个图表组合形成完整的数据看板视图，模拟真实业务场景。
响应式
默认开启 autoresize，图表随容器尺寸自动调整。拖动浏览器窗口查看效果。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
option | EChartsOption | - | ECharts 配置项 |
width | string | number | '100%' | 图表宽度 |
height | string | number | 400 | 图表高度，数字为 px |
loading | boolean | false | 是否显示加载状态 |
loadingText | string | '加载中...' | 加载状态文字 |
theme | string | object | - | ECharts 主题 |
autoresize | boolean | true | 是否自动响应容器尺寸变化 |
manualUpdate | boolean | false | 手动控制 setOption 更新 |
renderer | 'canvas' | 'svg' | 'canvas' | 渲染模式 |
Events
| 事件名 | 回调参数 | 说明 |
|---|---|---|
chart-init | chart: ECharts | 图表实例初始化完成 |
chart-click | params | 点击图表元素 |
chart-dblclick | params | 双击图表元素 |
chart-mouseover | params | 鼠标移入图表元素 |
chart-mouseout | params | 鼠标移出图表元素 |
chart-legendselectchanged | params | 图例选中状态变化 |
Methods (via ref)
| 方法名 | 参数 | 说明 |
|---|---|---|
setOption | option, notMerge?, lazyUpdate? | 手动设置 ECharts 配置 |
resize | opts? | 手动触发尺寸调整 |
getInstance | - | 获取 ECharts 实例 |