API 参考
EvChart 全部能力的字段与方法速查。示例与场景见左侧其余章节。
Chart Props
Chart Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| options | 图表配置，声明式驱动（见下方 Options 字段） | object | — |
| width / height | 画布尺寸，数字按 px，height 支持任意 CSS 值 | string | number | 100% / 400 |
| responsive | 跟随容器尺寸自适应重绘 | boolean | true |
| devicePixelRatio | 渲染倍率（缺省取设备实际值，高清屏自动适配） | number | — |
Options 通用字段
所有类型共用；数据字段按图表类型二选一（见下一节）。
Options 通用字段
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 图表类型：line / bar / area / stacked-bar / horizontal-bar / pie / doughnut / rose / scatter / funnel / gauge / radar / heatmap / candle / bullet / treemap / sunburst / boxplot / waterfall / bin / sparkline / mixed | string | — |
| title / subtitle | 主标题 / 副标题 | string | — |
| labels | x 轴类目数组，直角系与 sparkline / waterfall / mixed 的数据基线 | array | [] |
| series | 系列数组，每项 { name, data, color? }，data 与 labels 对齐 | array | [] |
| legend | 图例：{ show, position（top / bottom）, interactive, hoverEmphasis } | object | { show: true } |
| tooltip | 提示框：{ show, trigger（hover / click）, showAllSeries, formatter } | object | — |
| animation | 动画：{ enabled, duration（ms，默认 1200）, easing } | object | — |
| valueFormat | 数值格式：{ decimals, thousandSeparator, prefix, suffix, abbreviate }（abbreviate 开启后按 万 / 亿 / K 缩写） | object | — |
| xAxis / yAxis | 轴配置：{ min, max, ticks, grid: { show, style: dashed } } | object | — |
| dataZoom | 缩放：{ enabled, start, end, position（bottom / top）, height, mouseWheel } | object | — |
| toolbox | 工具按钮：{ show, filename }（导出 PNG / 恢复复位） | object | — |
| theme | 主题覆盖（colors、textColor 等），暗色模式自动切换 | object | — |
| connectGroup | 联动分组名，同组图表图例与缩放联动 | string | — |
| emptyText / ariaLabel | 空数据文案 / 无障碍标签 | string | 暂无数据 |
Options 按类型数据字段
Options 按类型数据字段
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| pieData | pie / doughnut / rose 数据源 | { name, value }[] | — |
| scatterData | scatter 散点 | { x, y, label?, color? }[] | — |
| funnelData | funnel 漏斗 | { label, value }[] | — |
| gauge | gauge 仪表盘：{ value, min, max, unit, color, showProgress, startAngle, endAngle } | object | — |
| radarIndicators | radar 维度：{ name, max, min? } | array | — |
| radarSeries | radar 系列：{ name, data, color?, area? } | array | — |
| heatmapData | heatmap 热力格 | { x, y, value }[] | — |
| candleData | candle K 线 | { label, open, close, high, low }[] | — |
| boxData | boxplot 箱线 | { label, min, q1, median, q3, max }[] | — |
| treemapData / sunburstData | 矩形树图 / 旭日图的层级数据 | { name, value?, children? }[] | — |
| bulletData | bullet 子弹图 | { name, value, target? }[] | — |
Chart Events
Chart Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| ready | 首次渲染完成 | () => void | — |
| click | 点击图形元素（可做钻取） | (e: { seriesName, name, value, color, dataIndex, seriesIndex }) => void | — |
| legend-click | 点击图例切换显隐 | (name: string, hidden: boolean) => void | — |
| hover / unhover | 悬浮进入 / 离开图形元素 | (e) => void | — |
| animation-end / data-update | 动画结束 / 数据补间更新完成 | () => void | — |
| zoom | dataZoom 范围变化 | (e: { start, end }) => void | — |
| brush-select | 框选完成 | (e: { startIndex, endIndex }) => void | — |
Chart Methods
通过组件 ref 调用。
Chart Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update | 增量合并配置并重绘（同结构数据自动补间） | (newOptions) => void | — |
| refresh / resize | 强制重绘（含入场动画）/ 手动触发尺寸更新 | () => void | — |
| toDataURL | 导出画布图片 | (type?, quality?) => string | — |
| exportSVG | 导出真 SVG（指令重放，非 PNG 嵌入） | (options?) => string | — |
| toggleSeries / getHiddenSeries | 切换系列显隐 / 获取隐藏系列 | (name) => void / () => string[] | — |
| highlightSeries / clearHighlight | 高亮某系列 / 清除高亮 | (name) => void / () => void | — |
| setDataZoomRange / getDataZoomRange | 设置 / 获取缩放范围 | (start, end) => void / () => { start, end } | — |
| getDataExtent / getPlotArea | 获取数据极值 / 实际绘图区域 | () => object | — |
| setTheme / getOption | 运行时切换主题 / 获取当前配置 | (theme) => void / () => object | — |
| getCanvas / destroy | 获取 canvas 元素 / 销毁实例与监听 | () => HTMLCanvasElement / () => void | — |