# ecomfe/vue-echarts architecture

> Architecture diagram of the GitHub repository ecomfe/vue-echarts, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ecomfe/vue-echarts
- Repository: https://github.com/ecomfe/vue-echarts

## Overview

Vue ECharts is a Vue 3 adapter for Apache ECharts. The main workflow is a consumer supplying reactive chart options to VChart, which initializes and updates an ECharts instance; optional slots, loading, resizing, and graphic elements extend that rendering path. The repository also includes a browser demo with chart examples and an option-to-import-code tool. The README documents update behavior and major capabilities, but several runtime files and Demo.vue were not sampled, so uncertain internal call links are omitted.

Main entry points: [`src/ECharts.ts`](https://github.com/ecomfe/vue-echarts/blob/main/src/ECharts.ts) (VChart Component), [`demo/CodeGen.vue`](https://github.com/ecomfe/vue-echarts/blob/main/demo/CodeGen.vue) (Code Generator UI), [`demo/Demo.vue`](https://github.com/ecomfe/vue-echarts/blob/main/demo/Demo.vue) (Demo App), [`src/update.ts`](https://github.com/ecomfe/vue-echarts/blob/main/src/update.ts) (Option Updates)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_chart["Chart Adapter"]
  node_vchart["VChart Component<br/>[ECharts.ts]"]
  node_update["Option Updates<br/>[update.ts]"]
  node_api["Instance API<br/>[api.ts]"]
  node_resize["Auto Resize<br/>[autoresize.ts]"]
  node_loading["Loading State<br/>[loading.ts]"]
  node_slots["Option Slots<br/>[slot.ts]"]
  node_events["Chart Events<br/>[events.ts]"]
end

subgraph group_graphic["Graphic Elements"]
  node_graphic_public["Graphic Exports<br/>[index.ts]"]
  node_graphic_components["Graphic Components<br/>[components.ts]"]
  node_graphic_collect["Graphic Collector<br/>[collector.ts]"]
  node_graphic_runtime["Graphic Runtime<br/>[runtime.ts]"]
end

subgraph group_demo["Demo Experience"]
  node_demo_app["Demo App<br/>[Demo.vue]"]
  node_examples["Chart Examples<br/>[bar.ts]"]
  node_codegen_ui["Code Generator UI<br/>[CodeGen.vue]"]
  node_editor["Monaco Editors<br/>[monaco.ts]"]
end

subgraph group_analysis["Option Tooling"]
  node_analysis_composable["Analysis State"]
  node_worker["Analysis Worker<br/>[option.worker.ts]"]
  node_analyzer["Option Analyzer<br/>[analyzeOption.ts]"]
  node_codegen["Import Generator<br/>[codegen.ts]"]
end

node_consumer(("Vue Consumer"))
node_vue["Vue Runtime"]
node_echarts["Apache ECharts"]

node_consumer -->|"supplies options"| node_vchart
node_vchart -->|"initializes chart"| node_echarts
node_vchart -->|"plans updates"| node_update
node_update -->|"sets options"| node_echarts
node_consumer -->|"mounts component"| node_vue
node_vchart -->|"exposes API"| node_api
node_vchart -->|"resizes chart"| node_resize
node_vchart -->|"controls loading"| node_loading
node_vchart -->|"prepares option slots"| node_slots
node_vchart -->|"forwards events"| node_events
node_consumer -->|"uses graphic API"| node_graphic_public
node_graphic_public -->|"exports components"| node_graphic_components
node_consumer -->|"opens demo"| node_demo_app
node_demo_app -->|"displays examples"| node_examples
node_demo_app -->|"offers code generator"| node_codegen_ui
node_codegen_ui -->|"uses editors"| node_editor
node_codegen_ui -->|"analyzes option"| node_analysis_composable
node_analysis_composable -->|"posts analysis"| node_worker
node_worker -->|"analyzes code"| node_analyzer
node_codegen_ui -->|"generates imports"| node_codegen

click node_vchart "https://github.com/ecomfe/vue-echarts/blob/main/src/ECharts.ts"
click node_update "https://github.com/ecomfe/vue-echarts/blob/main/src/update.ts"
click node_api "https://github.com/ecomfe/vue-echarts/blob/main/src/composables/api.ts"
click node_resize "https://github.com/ecomfe/vue-echarts/blob/main/src/composables/autoresize.ts"
click node_loading "https://github.com/ecomfe/vue-echarts/blob/main/src/composables/loading.ts"
click node_slots "https://github.com/ecomfe/vue-echarts/blob/main/src/composables/slot.ts"
click node_events "https://github.com/ecomfe/vue-echarts/blob/main/src/core/events.ts"
click node_graphic_public "https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/index.ts"
click node_graphic_components "https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/components.ts"
click node_graphic_collect "https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/collector.ts"
click node_graphic_runtime "https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/runtime.ts"
click node_demo_app "https://github.com/ecomfe/vue-echarts/blob/main/demo/Demo.vue"
click node_examples "https://github.com/ecomfe/vue-echarts/blob/main/demo/data/bar.ts"
click node_codegen_ui "https://github.com/ecomfe/vue-echarts/blob/main/demo/CodeGen.vue"
click node_editor "https://github.com/ecomfe/vue-echarts/blob/main/demo/services/monaco.ts"
click node_analysis_composable "https://github.com/ecomfe/vue-echarts/blob/main/demo/composables/useOptionAnalysis.ts"
click node_worker "https://github.com/ecomfe/vue-echarts/blob/main/demo/workers/option.worker.ts"
click node_analyzer "https://github.com/ecomfe/vue-echarts/blob/main/demo/utils/analyzeOption.ts"
click node_codegen "https://github.com/ecomfe/vue-echarts/blob/main/demo/utils/codegen.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_vchart,node_update,node_api,node_resize,node_loading,node_slots,node_events toneBlue
class node_graphic_public,node_graphic_components,node_graphic_collect,node_graphic_runtime toneAmber
class node_demo_app,node_examples,node_codegen_ui,node_editor toneMint
class node_analysis_composable,node_worker,node_analyzer,node_codegen toneRose
class node_consumer,node_vue,node_echarts toneIndigo
```

## Components

### Chart Adapter

- [VChart Component](https://github.com/ecomfe/vue-echarts/blob/main/src/ECharts.ts): `src/ECharts.ts`
- [Option Updates](https://github.com/ecomfe/vue-echarts/blob/main/src/update.ts): `src/update.ts`
- [Instance API](https://github.com/ecomfe/vue-echarts/blob/main/src/composables/api.ts): `src/composables/api.ts`
- [Auto Resize](https://github.com/ecomfe/vue-echarts/blob/main/src/composables/autoresize.ts): `src/composables/autoresize.ts`
- [Loading State](https://github.com/ecomfe/vue-echarts/blob/main/src/composables/loading.ts): `src/composables/loading.ts`
- [Option Slots](https://github.com/ecomfe/vue-echarts/blob/main/src/composables/slot.ts): `src/composables/slot.ts`
- [Chart Events](https://github.com/ecomfe/vue-echarts/blob/main/src/core/events.ts): `src/core/events.ts`

### Graphic Elements

- [Graphic Exports](https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/index.ts): `src/graphic/index.ts`
- [Graphic Components](https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/components.ts): `src/graphic/components.ts`
- [Graphic Collector](https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/collector.ts): `src/graphic/collector.ts`
- [Graphic Runtime](https://github.com/ecomfe/vue-echarts/blob/main/src/graphic/runtime.ts): `src/graphic/runtime.ts`

### Demo Experience

- [Demo App](https://github.com/ecomfe/vue-echarts/blob/main/demo/Demo.vue): `demo/Demo.vue`
- [Chart Examples](https://github.com/ecomfe/vue-echarts/blob/main/demo/data/bar.ts): `demo/data/bar.ts`
- [Code Generator UI](https://github.com/ecomfe/vue-echarts/blob/main/demo/CodeGen.vue): `demo/CodeGen.vue`
- [Monaco Editors](https://github.com/ecomfe/vue-echarts/blob/main/demo/services/monaco.ts): `demo/services/monaco.ts`

### Option Tooling

- [Analysis State](https://github.com/ecomfe/vue-echarts/blob/main/demo/composables/useOptionAnalysis.ts): `demo/composables/useOptionAnalysis.ts`
- [Analysis Worker](https://github.com/ecomfe/vue-echarts/blob/main/demo/workers/option.worker.ts): `demo/workers/option.worker.ts`
- [Option Analyzer](https://github.com/ecomfe/vue-echarts/blob/main/demo/utils/analyzeOption.ts): `demo/utils/analyzeOption.ts`
- [Import Generator](https://github.com/ecomfe/vue-echarts/blob/main/demo/utils/codegen.ts): `demo/utils/codegen.ts`

### Other components

- **Vue Consumer**
- **Vue Runtime**
- **Apache ECharts**

## Connections

- Vue Consumer → VChart Component: supplies options
- VChart Component → Apache ECharts: initializes chart
- VChart Component → Option Updates: plans updates
- Option Updates → Apache ECharts: sets options
- Vue Consumer → Vue Runtime: mounts component
- VChart Component → Instance API: exposes API
- VChart Component → Auto Resize: resizes chart
- VChart Component → Loading State: controls loading
- VChart Component → Option Slots: prepares option slots
- VChart Component → Chart Events: forwards events
- Vue Consumer → Graphic Exports: uses graphic API
- Graphic Exports → Graphic Components: exports components
- Vue Consumer → Demo App: opens demo
- Demo App → Chart Examples: displays examples
- Demo App → Code Generator UI: offers code generator
- Code Generator UI → Monaco Editors: uses editors
- Code Generator UI → Analysis State: analyzes option
- Analysis State → Analysis Worker: posts analysis
- Analysis Worker → Option Analyzer: analyzes code
- Code Generator UI → Import Generator: generates imports