# Apache ECharts — Powerful Interactive Charting Library

> Apache ECharts is a powerful, interactive charting and data visualization library for browsers. 40+ chart types, canvas/SVG rendering, streaming data, and GPU acceleration. The enterprise choice used by Alibaba, Baidu, and countless dashboards.

## Install

Save as a script file and run:

## Quick Use

```bash
npm i echarts
```

```ts
import * as echarts from "echarts";

const chart = echarts.init(document.getElementById("main"));

chart.setOption({
  title: { text: "Weekly Sales" },
  tooltip: { trigger: "axis" },
  xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
  yAxis: { type: "value" },
  series: [{
    name: "Sales",
    type: "line",
    smooth: true,
    data: [150, 230, 224, 218, 335],
    areaStyle: {},
  }],
});

window.addEventListener("resize", () => chart.resize());
```

## Intro

Apache ECharts is a powerful, interactive charting library originally created at Baidu, donated to the Apache Software Foundation in 2018. Used in production at Alibaba, Tencent, Baidu, and thousands of enterprise dashboards worldwide. Offers 40+ chart types including 3D, geo maps, and streaming data visualizations.

- **Repo**: https://github.com/apache/echarts
- **Stars**: 66K+
- **Language**: TypeScript
- **License**: Apache 2.0

## What ECharts Does

- **40+ chart types** — line, bar, scatter, pie, radar, heatmap, treemap, sunburst, sankey, funnel, gauge, graph, map, candlestick, boxplot, parallel
- **3D charts** — ECharts GL extension
- **Geographic** — world/country maps, GeoJSON, Baidu map integration
- **Interactive** — zoom, brush, data zoom, legend filter
- **Streaming data** — append-only updates for realtime
- **Canvas or SVG** — switch renderers
- **Themes** — built-in + custom
- **Responsive** — `chart.resize()` or container watching

## Architecture

Canvas-based renderer by default, SVG optional. Option object is declarative (JSON-like). Chart holds option snapshots internally for diff updates. Built on top of the ZRender graphics library (also Apache project).

## Self-Hosting

Client library, ships in bundle.

## Key Features

- 40+ chart types
- Canvas + SVG renderers
- Enterprise-scale datasets (100K+ points)
- Geographic and 3D
- Streaming/incremental updates
- WebGL via ECharts GL
- Dark mode themes
- Responsive by design
- Apache 2.0 (permissive)

## Comparison

| Library | Chart Types | Canvas/SVG | Geo | Bundle |
|---|---|---|---|---|
| ECharts | 40+ | Both | Built-in | ~350KB |
| Chart.js | 8 | Canvas | No | ~60KB |
| Highcharts | 30+ | SVG | Plugin | ~150KB |
| Plotly | 40+ | SVG+WebGL | Built-in | ~3MB |
| D3 | Any | Both | Plugin | Modular |

## 常见问题 FAQ

**Q: ECharts 和 Chart.js 怎么选？**
A: Chart.js 追求简单（8种图），ECharts 追求完整（40+种图+地图+3D）。复杂企业看板用 ECharts，简单前端展示用 Chart.js。

**Q: Bundle 太大？**
A: v5 支持按需 import：`import { BarChart } from "echarts/charts"` 等，tree-shake 后只保留用到的。

**Q: 和 React/Vue 集成？**
A: 官方有 `echarts-for-react` / `vue-echarts`，或手动用 ref + `useEffect` 初始化。

## 来源与致谢 Sources

- Docs: https://echarts.apache.org
- GitHub: https://github.com/apache/echarts
- License: Apache 2.0

---
Source: https://tokrepo.com/en/workflows/b3e552ed-3588-11f1-9bc6-00163e2b0d79
Author: Script Depot