vue-echarts

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.