ecomfe/vue-echarts

★ 10,692TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((vue-echarts))
    What it does
      Wraps ECharts for Vue
      Reactive chart updates
      Event forwarding
    Chart Types
      Bar and line
      Pie and scatter
      Heatmaps and maps
    Features
      On-demand imports
      Theme support
      Auto resize
    Setup
      npm install
      CDN script tag
      Vue 2 vs Vue 3

mindmap root((vue-echarts)) What it does Wraps ECharts for Vue Reactive chart updates Event forwarding Chart Types Bar and line Pie and scatter Heatmaps and maps Features On-demand imports Theme support Auto resize Setup npm install CDN script tag Vue 2 vs Vue 3

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add interactive bar, line, pie, or scatter charts to your Vue app by passing a config object to the VChart component.

USE CASE 2

Reduce bundle size by importing only the specific chart types and ECharts features your app needs.

USE CASE 3

Build data dashboards with reactive charts that update automatically when your data changes.

USE CASE 4

Load ECharts via CDN in a non-build-tool Vue project with minimal setup.

Tech stack

TypeScriptVue.jsApache EChartsnpm

Getting it running

Difficulty · easy Time to first run · 5min

Vue 2 projects must use v7, v8 and above require Vue 3.

MIT license, use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Vue ECharts is a Vue.js component that wraps Apache ECharts, a widely-used JavaScript charting library, so it can be used naturally inside a Vue application. Instead of wiring up ECharts to a DOM element by hand, you drop a VChart component into your template, pass it a configuration object describing the chart you want, and Vue ECharts handles the rest. Apache ECharts itself can produce a wide variety of charts: bar charts, line charts, pie charts, scatter plots, heatmaps, maps, and more. Vue ECharts does not add chart types, it makes the existing ECharts API fit the Vue component model. You pass your chart configuration through the option prop, and the component re-renders the chart reactively whenever that prop changes. There is also built-in support for themes, loading states, automatic resizing when the container changes size, and forwarding ECharts events to Vue event listeners. One of the more useful features is on-demand importing. ECharts is a large library, and if you only need a pie chart and a bar chart you can import just those parts rather than the whole package. The repository website includes a code generator: you paste your chart configuration into it and it outputs the exact import statements you need. This is optional but the README recommends it to keep application bundle sizes smaller. Installation is done through npm, installing both echarts and vue-echarts as packages. The library can also be loaded via script tags from a CDN for projects that are not using a build step. Vue 2 projects must use version 7 of the library, version 8 and above require Vue 3. The library is developed by the ECharts team at Baidu (the ecomfe GitHub organization). It is written in TypeScript and published under the MIT license. A live demo site is available at vue-echarts.dev.

Copy-paste prompts

Prompt 1

Using vue-echarts, write a Vue 3 component that shows a bar chart from this array of data: [{name: 'A', value: 10}, {name: 'B', value: 20}].

Prompt 2

I'm using vue-echarts in a Vue 3 project. How do I listen to ECharts click events on my VChart component?

Prompt 3

Show me how to set up on-demand importing with vue-echarts to include only a pie chart and a line chart to keep the bundle small.

Prompt 4

How do I add a loading spinner to a vue-echarts VChart component while my data is fetching?

Open on GitHub → Explain another repo

← ecomfe on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.