Vue-Echarts - An Apache ECharts Component for Vue.js 2 & 3

Vue-echarts is the set of Beautiful Apache ECharts components for Vue.js developed by Baidu EFE team. It has a lot of features like async data, many customization options, light & dark themes, etc. You can utilize this package for both Vue 2 & 3. You can visit its demo here.

Installation & Usage

npm

You can install this package via Npm, Just run this command:

npm install echarts vue-echarts

To make vue-echarts work for Vue 2, you need to have @vue/composition-api installed:

npm i -D @vue/composition-api

Usage

Vue 2

import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'

// import ECharts modules manually to reduce bundle size
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

// register globally (or you can do it locally)
Vue.component('v-chart', ECharts)

new Vue(...)

Vue 3

import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core"

// import ECharts modules manually to reduce bundle size
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
])

const app = createApp(...)

// register globally (or you can do it locally)
app.component('v-chart', ECharts)

app.mount(...)

We encourage manually importing components and charts from ECharts for smaller bundle sizes. See all supported renderers/charts/components here →

But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:

import "echarts";

CDN & Global variable

You can also use this component via CDN. For this purpose you’ve to drop script inside your HTML file and access the component via window.VueECharts.

Vue 3

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2"></script>
const app = Vue.createApp(...)

// register globally (or you can do it locally)
app.component('v-chart', VueECharts)

You can see Demo → here.

Vue 2

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.4.3"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2"></script>
// register globally (or you can do it locally)
Vue.component("v-chart", VueECharts);

You can see Demo → here.

For more details and source code, you can visit this link on Github.