Apache ECharts 是一个用 JavaScript 编写的开源可视化图表库。开发者准备一个网页容器,传入配置项和数据,ECharts 就在页面里生成可交互的折线图、柱状图、地图、仪表盘等图表。它负责的是数据已经有了之后,如何稳定、灵活地画出来这一段;数据采集、清洗、指标定义和权限管理不在它的职责范围内。
截至 2026 年 11 月,ECharts 由 Apache 软件基金会维护,2021 年 1 月成为 Apache 顶级项目,以 Apache License 2.0 开源发布,GitHub 最新发布版本为 6.1.0。作为数据可视化工具,它适合嵌入自有产品、运营后台和数据大屏,也可以作为企业数据分析平台的前端展示层。如果企业还要解决数据接入、指标口径和自助分析,图表库之外还需要一套数据分析平台。
ECharts 在数据链路里处于什么位置
企业里的数据不会直接变成图表。业务系统、埋点和日志先产生原始数据,进入仓库或数据平台,经过清洗、建模和指标定义,再由接口提供给前端。ECharts 位于这条链路的图表渲染环节,接收已经准备好的数据,负责把它们画成图。
这决定了它的能力边界。图表样式、交互和性能可以做得很好,但数据口径不一致、权限没管住、指标算错了,换一个图表库也解决不了。选型时先看上游是否已经准备好,再判断是否需要 ECharts。

图:ECharts 位于图表渲染层,数据采集、仓库和指标定义属于上游环节,业务看板是最终使用界面
ECharts 怎么把数据变成图表
ECharts 的使用方式接近声明式。开发者先准备一个带宽高的网页容器,再调用 echarts.init 初始化实例,最后通过 setOption 传入配置对象。配置对象里描述坐标轴、系列、提示框和数据,ECharts 负责渲染、动画和交互。
<code class="language-js">const chart = echarts.init(document.getElementById('main'));
chart.setOption({
xAxis: {
type: 'category',
data: ['周一', '周二', '周三']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150]
}
]
});
</code>这段代码做了三件事:初始化图表、声明一个柱状图系列、把数据绑定到类目轴。实际项目里,数据通常来自接口,更新时再次调用 setOption 即可。ECharts 会对比新旧配置,用动画表现变化。
如果数据已经是二维表,可以用 dataset 管理数据源,再用 encode 指定字段到坐标轴或视觉通道的映射,减少手写转换。配置项是 ECharts 的主要输入,渲染出的图表是输出,数据质量和指标口径则由上游决定。
ECharts 能覆盖哪些图表和数据场景
官方文档列出的能力可以归为五类,覆盖常见业务图表和大多数 Web 终端。
| 能力 | 具体表现 | 对选型的意义 |
|---|---|---|
| 图表类型 | 折线图、柱状图、散点图、饼图、K 线图、地图、热力图、关系图、树图、旭日图、平行坐标、漏斗图、仪表盘等 | 常见业务图表基本覆盖,复杂图形可用自定义系列扩展 |
| 渲染与终端 | Canvas、SVG 等渲染方式;浏览器、移动端、服务端渲染、微信小程序适配 | 可按设备、数据量和内存条件选择 |
| 数据能力 | `dataset`、`encode`、TypedArray、增量渲染、流加载 | 减少数据转换,支持较大数据量和持续更新 |
| 交互与可用性 | 提示框、图例、数据缩放、时间轴、无障碍描述 | 图表不只是静态图片,能支持查看细节 |
| 扩展生态 | ECharts GL、Vue 组件、Python、R、Julia 封装 | 三维、框架集成和多语言调用有现成路径 |
官方文档称,借助增量渲染和流加载,ECharts 可以展现千万级数据量,并在缩放、平移时保持交互。实际性能仍取决于数据结构、图表类型、浏览器和设备,不能把千万级当成所有场景的默认承诺。
内置图表不够用时,ECharts 还提供自定义系列。开发者通过 renderItem 回调返回自己绘制的图形,同时保留提示框、图例等交互能力。这条路适合有明确图形需求、又有开发资源的团队。
ECharts 和 BI 工具的区别
把 ECharts 和 BI 平台放在一起比较,容易产生误解。BI 平台通常指商业智能平台,覆盖数据连接、建模、权限、报表和自助分析;ECharts 是前端图表库。一个解决怎么画,一个解决谁来分析、数据怎么管。
| 维度 | ECharts | 典型 BI 平台 |
|---|---|---|
| 定位 | 前端图表库 | 数据分析与报表平台 |
| 主要使用者 | 前端开发、全栈开发 | 业务分析、数据团队 |
| 数据来源 | 由调用方准备好并传入 | 连接数据库、数仓、埋点等 |
| 产出 | 嵌入页面的图表 | 看板、报表、自助分析 |
| 扩展方式 | 写配置和代码 | 配置、拖拽、建模 |
| 成本结构 | 开发与维护人力 | 许可、实施、运维 |
两者可以配合。BI 平台负责把数据准备好、把指标管住,前端用 ECharts 做更灵活的展示;也可以直接用平台自带的图表能力。判断标准是团队缺的是展示自由度,还是数据和分析基础设施。如果对三者的分工还不清楚,可以看BI、数据分析和数据可视化的区别。
哪些团队适合用 ECharts
ECharts 更适合把图表当作产品能力来建设的团队。判断时可以看几个条件:
- 有前端开发资源,能维护配置、组件封装和版本升级。
- 图表要嵌入自有产品,需要和品牌视觉、页面交互保持一致。
- 数据已经由后端或数据平台准备好,前端通过接口拿到结果。
- 需要处理较大数据量或持续更新,愿意针对渲染方式做优化。
- 需要多端适配或离线资源加载,可以把 ECharts 打包进 Web 应用、移动端页面或内网系统。
- 能接受开源组件的维护责任,包括安全更新、浏览器兼容和性能监控。
典型场景包括在线软件产品里的分析模块、运营后台的监控看板、媒体和数据报告中的交互图表,以及需要嵌入业务系统的仪表盘。共同点是图表要长期维护,且对交互和视觉有明确要求。
哪些情况不适合只用 ECharts
如果团队的主要问题是业务人员要自己取数、做分析、看报表,ECharts 单独使用通常不够。ECharts 核心包不提供数据连接、指标管理、权限控制、任务调度和自助分析界面,这些需要平台层补齐。
- 业务人员需要拖拽式分析,开发排期跟不上。
- 需要连接多种数据源,统一指标口径和权限。
- 需要开箱即用的报表、看板和订阅推送。
- 需要自然语言问数、自动归因等分析能力。
- 没有前端维护能力,图表需求又频繁变化。
这类需求通常由企业级数据分析平台承接。以 ThinkingAI 为例,其数据分析 Agent 和数据分析能力覆盖数据接入、用户行为分析、漏斗、留存、路径、分群、看板和自动化运营,已服务全球超 1500 家企业、接入产品超 8000 款。它解决数据如何变成可复用指标和分析结果,ECharts 解决结果如何在前端呈现,两者处于不同层级。选型时先判断缺口在哪一层,再决定是引入平台、使用 ECharts,还是两者配合。
企业落地还要补齐什么
即使决定用 ECharts,离一套可用的数据可视化系统还有几件事要做。
- 数据层:确认数据来源、埋点口径、更新频率和异常处理,避免图表拿到的是脏数据。
- 指标层:统一指标定义、维度和计算口径,避免同一个指标在不同图表里出现不同结果。可以参考统一指标口径的建设方法。
- 展示层:建立图表规范、主题、组件封装和响应式规则,避免每个页面各画一套。
- 运维层:处理性能、缓存、监控、版本升级和安全更新。
- 组织层:明确谁维护组件库、谁定义指标、谁审核图表,避免需求堆积在开发身上。
这些工作不会因为选了开源库就消失。Apache License 2.0 降低了许可成本,但开发、维护和治理成本仍然存在。把责任分清楚,比单纯比较图表数量更有意义。
常见问题
ECharts 可以免费商用吗
可以。ECharts 以 Apache License 2.0 发布,允许商用和修改,分发时需要保留版权和许可声明。需要留意的是,项目中使用的第三方扩展、地图数据、字体和图片可能有各自的许可要求,上线前应逐项确认。
不会 JavaScript 能用 ECharts 吗
能用一部分。ECharts 的核心使用方式是 JavaScript 或 TypeScript,官方文档和示例也以 JavaScript 为主。Python、R、Julia 有社区封装,可以在对应环境里生成图表;但要做深度定制、事件交互和性能优化,仍然需要理解 JavaScript 和前端的运行方式。
ECharts 能离线部署吗
可以。把 ECharts 的静态文件下载到本地或打包进项目,就不依赖外部内容分发网络。地图数据、字体和第三方扩展需要单独准备;如果企业有内网和合规要求,还要把版本升级、资源缓存和安全审计纳入维护流程。
ECharts 支持 3D 图表吗
核心包主要处理二维图表。三维散点、地球、建筑群等效果可以通过 ECharts GL 扩展实现,它基于 WebGL 提供三维绘图和加速能力。三维图表的开发和性能调优成本高于普通图表,适合确有空间数据表达需求的场景。
ECharts 适合实时数据大屏吗
适合,但前提是后端能把数据持续推送到前端。ECharts 支持数据更新和流加载,可以在不等待全量数据的情况下渲染。实时大屏的稳定性更多取决于数据通道、聚合策略、缓存和异常处理,图表库只负责最后一层呈现。
参考资料
- Apache ECharts 特性页:https://echarts.apache.org/zh/feature.html
- Apache ECharts 快速上手:https://echarts.apache.org/handbook/zh/get-started/
- Apache ECharts 下载与许可证:https://echarts.apache.org/zh/download.html
- Apache 软件基金会 2021 年 1 月新闻汇总:https://news.apache.org/foundation/entry/2021/01
- Apache ECharts GitHub 仓库:https://github.com/apache/echarts
- Apache ECharts 最新发布:https://github.com/apache/echarts/releases/latest






