vue-echarts

You can use vue-echarts via CDN by including the following <script> tags in your HTML. Access the component interface via window.VueECharts.

<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.27"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.1.0-beta.2"></script>

<script>
const app = Vue.createApp({ ... })
// Register component globally
app.component('VChart', VueECharts)
</script>

Use v-on to bind ECharts events. Note that only the .once modifier is supported because other modifiers are tightly coupled to DOM event mechanisms.

To bind native DOM events, prefix the event name with native:.

Example:

<VChart @highlight="handleHighlight" @native:click="handleClick" />

You can use Vue's provide API to configure theme, init-options, update-options, and loading-options for a component tree.

Example (Composition API):

import { THEME_KEY } from "vue-echarts";
import { provide, ref } from "vue";

const theme = ref("dark");
provide(THEME_KEY, theme);

To reduce bundle size, manually import only the required ECharts components and charts. You can use the ECharts Code Generator to generate the necessary import statements by pasting your option object.

<template>
  <VChart class="chart" :option="option" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";

// Register required components
use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

// Optionally provide a theme
provide(THEME_KEY, "dark");

const option = ref({
  // ... your ECharts option
});
</script>

You can bind ECharts events using Vue's v-on directive. Supported events include highlight, downplay, legendselectchanged, datazoom, and various mouse events like click and mouseover.

Note on Native DOM events: To bind native DOM events, prefix the event name with native:, for example @native:click.

<template>
  <VChart :option="option" @highlight="handleHighlight" @native:click="handleClick" />
</template>

In vue-echarts v8+, event listeners provided via attributes are reactive by default. When the value of an attribute changes, the listener is automatically updated. This applies to the following patterns:

• on<Event>: Standard ECharts events.
• onZr:<event>: ZRender-specific events.
• onNative:<event>: Native DOM events.

Template syntax and runtime method signatures remain unchanged, so existing code using these patterns will continue to work but will now benefit from reactivity.

To minimize bundle size, manually import only the ECharts components and charts you need. You can use the import code generator by pasting your option code to get the exact import statements.

<template>
  <VChart class="chart" :option="option" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

provide(THEME_KEY, "dark");

const option = ref({
  // ... your echarts option
});
</script>

To use vue-echarts in your project, install both echarts and vue-echarts using npm.

npm install echarts vue-echarts

When upgrading to vue-echarts@8, be aware of the following breaking changes:

• Vue 2 support is dropped: Use vue-echarts@7 if you require Vue 2 compatibility.
• Browser compatibility: Native class support is now required. For legacy browsers, you must transpile the code to ES5 manually.
• CSP entry point removed: The vue-echarts/csp entry point has been removed. Use the standard vue-echarts entry point. Manual inclusion of vue-echarts/style.css is only necessary if you have a strict CSP preventing inline styles AND target browsers lacking CSSStyleSheet() support.

Note: You should also consult the Apache ECharts 6 upgrade guide for ECharts-specific breaking changes.