Skip to content
Get packs

Vue ECharts

A Vue.js component that wraps Apache ECharts so you can draw charts declaratively in Vue apps.

GitHub Download v8.3.2
Stars
10.7k
Forks
1.5k
Licence
MIT
Language
TypeScript
Last update
9 days ago
Type
Library

What it is

Vue ECharts is a Vue.js component that lets you use Apache ECharts, a charting library, inside a Vue application. You pass a chart configuration object as a prop, and the component creates and updates the chart for you. It handles things like resizing, theme settings and reactive updates when your data changes.

  • Render a pie chart from a reactive option object in a Vue component
  • Add a chart to a Vue page loaded from a CDN with a global VChart component
  • Import only the ECharts charts and components you need to reduce bundle size
  • Connect multiple charts into a group so they share interactions

Great for

  • Vue developers who want to add interactive charts to a Vue 3 app
  • Teams already using Apache ECharts who want a Vue-native wrapper
  • Projects that want to load charts through a CDN without a build step
  • Developers who want to keep bundle size small by importing only the ECharts parts they use

Not ideal for

  • Projects on Vue 2, since the README points Vue 2 users to the v7 docs instead
  • People who need chart rendering on the server, because the README says the server only renders the container and the chart is drawn in the browser
  • Anyone who needs a charting library that is not ECharts
Step-by-step guide: how to use Vue EChartsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js (version not stated in the README excerpt) · A Vue 3 project

    Install ECharts and vue-echarts with npm

    npm install echarts vue-echarts
  2. 2

    Run it

    • Install echarts and vue-echarts with npm.
    • Import the needed ECharts renderer, chart type and components and call use() with them.
    • Import VChart from vue-echarts and place <VChart :option="option" /> in your template.
    • Give the chart container a height in CSS, as the example does with a 400px class.
  3. 3

    Get the most out of it

    • Use the import code generator on the project site to produce minimal ECharts imports.
    • Set autoresize to true or pass a throttle option so the chart resizes with its container.
    • Provide theme or init-options through the THEME_KEY and INIT_OPTIONS_KEY injections to share settings across charts.
    • Use group to connect several charts so their interactions are linked.
    • Use manual-update mode if you need to call setOption yourself, noting it is not carried across re-initializations.

Downloads

Source code (.zip)main branch · straight from GitHubRelease v8.3.2Release notes and sourceOfficial website & docsvue-echarts.dev

Strengths

  • Charts update automatically when the reactive option prop changes
  • Includes an import code generator on the project site to help pick the right ECharts modules
  • Documented props for theme, init options, resizing and loading state

Trade-offs

  • Changing the theme can reset interaction state such as legend selections or data zoom, so state that must persist has to live in the option
  • Requires familiarity with ECharts' option format, which is large and detailed
  • The README is long and covers many advanced update rules that take time to learn

How it compares

ProjectStarsTypeLevelUpdatedBest for
vue-echarts (this)10.7kLibraryintermediate9 days agoVue developers who want to add interactive charts to a Vue 3 app
vue212kLibraryintermediate2.1 years agoMaintaining an existing Vue 2 application that cannot yet be upgraded
nuxt61kLibraryintermediate4 days agoDevelopers who already know Vue.js and want a structured full-stack setup
element54kLibrarybeginner2.2 years agoDevelopers maintaining an existing Vue 2.x web application
tiptap38.9kLibraryintermediate4 days agoDevelopers building a custom text editor into a web product
headlessui28.8kLibraryintermediate7 months agoReact or Vue developers building custom-designed interfaces

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.