search

ecomfe / vue-echarts

Vue.js component for Apache ECharts™.
https://vue-echarts.dev
MIT License
9.75k stars 1.49k forks source link
echarts vue vue-echarts

readme

Vue-ECharts

Vue.js component for Apache ECharts™.

npm version View demo 前往中文版

Open in Codeflow Edit in CodeSandbox

Still using v6? Read v6 docs here →

Installation & Usage

npm

npm add echarts vue-echarts

Example

Vue 3 Demo → ```vue ```
Vue 2 Demo → ```vue ```

[!IMPORTANT] We encourage manually importing components and charts from ECharts for smaller bundle size. We've built an import code generator to help you with that. You can just paste in your option code and we'll generate the precise import code for you.

Try it →

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

Drop <script> inside your HTML file and access the component via window.VueECharts.

Vue 3 Demo → ```html ``` ```js const app = Vue.createApp(...) // register globally (or you can do it locally) app.component('v-chart', VueECharts) ```
Vue 2 Demo → ```html ``` ```js // register globally (or you can do it locally) Vue.component("v-chart", VueECharts); ```

See more examples here.

Props

Events

You can bind events with Vue's v-on directive.

<template>
  <v-chart :option="option" @highlight="handleHighlight" />
</template>

Note

Only the .once event modifier is supported as other modifiers are tightly coupled with the DOM event system.

Vue-ECharts support the following events:

See supported events here →

Native DOM Events

As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with native: to bind native DOM events (or you can use the .native modifier in Vue 2, which is dropped in Vue 3).

<template>
  <v-chart @native:click="handleClick" />
</template>

Provide / Inject

Vue-ECharts provides provide/inject API for theme, init-options, update-options and loading-options to help configuring contextual options. eg. for init-options you can use the provide API like this:

Vue 3 ```js import { THEME_KEY } from 'vue-echarts' import { provide } from 'vue' // composition API provide(THEME_KEY, 'dark') // options API { provide: { [THEME_KEY]: 'dark' } } ```
Vue 2 ```js import { THEME_KEY } from 'vue-echarts' // in component options { provide: { [THEME_KEY]: 'dark' } } ``` > **Note** > > You need to provide an object for Vue 2 if you want to change it dynamically. > > ```js > // in component options > { > data () { > return { > theme: { value: 'dark' } > } > }, > provide () { > return { > [THEME_KEY]: this.theme > } > } > } > ```

Methods

Static Methods

Static methods can be accessed from echarts itself.

CSP: style-src or style-src-elem

If you are applying a CSP to prevent inline <style> injection, you need to use vue-echarts/csp instead of vue-echarts and include vue-echarts/csp/style.css manually.

Migration to v7

Read the breaking changes document in the release log and the migration shoud be straightforward.

Local development

pnpm i
pnpm serve

Open http://localhost:8080 to see the demo.

Notice

The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.