How ecomfe/vue-echarts works
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: ECharts.ts VChart Component · CodeGen.vue Code Generator UI · Demo.vue Demo App · update.ts Option Updates
Components 22
Chart Adapter
- VChart Component
src/ECharts.ts - Option Updates
src/update.ts - Instance API
src/composables/api.ts - Auto Resize
src/composables/autoresize.ts - Loading State
src/composables/loading.ts - Option Slots
src/composables/slot.ts - Chart Events
src/core/events.ts
Graphic Elements
- Graphic Exports
src/graphic/index.ts - Graphic Components
src/graphic/components.ts - Graphic Collector
src/graphic/collector.ts - Graphic Runtime
src/graphic/runtime.ts
Demo Experience
- Demo App
demo/Demo.vue - Chart Examples
demo/data/bar.ts - Code Generator UI
demo/CodeGen.vue - Monaco Editors
demo/services/monaco.ts
Option Tooling
- Analysis State
demo/composables/useOptionAnalysis.ts - Analysis Worker
demo/workers/option.worker.ts - Option Analyzer
demo/utils/analyzeOption.ts - Import Generator
demo/utils/codegen.ts
Other components
- Vue Consumer
- Vue Runtime
- Apache ECharts
Connections 20
- 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