Vue Echarts

<p align="center"><a href="https://vue-echarts.dev/"><img alt="Vue ECharts" src="https://raw.githubusercontent.com/ecomfe/vue-echarts/refs/heads/main/demo/public/favicon.svg" width="96"></a></p> <h1 align="center">Vue ECharts</h1> <p align="center">Vue.js component for Apache ECharts™.</p> <p align="center"><a href="https://npmjs.com/package/vue-echarts"><img alt="npm version" src="https://img.shields.io/npm/v/vue-echarts"></a> <a href="https://codecov.io/gh/ecomfe/vue-echarts"><img alt="test coverage" src="https://img.shields.io/codecov/c/github/ecomfe/vue-echarts"></a> <a href="https://vue-echarts.dev/"><img src="https://img.shields.io/badge/Demo%20%C2%BB-20c3aa" alt="View demo"></a> <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88%20%C2%BB-000" alt="前往中文版"></a></p>

Still using Vue 2? Read v7 docs here →

Installation & usage

npm

npm install echarts vue-echarts

Example

<details open> <summary><a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>

<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({
  title: {
    text: "Traffic Sources",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"],
  },
  series: [
    {
      name: "Traffic Sources",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: [
        { value: 335, name: "Direct" },
        { value: 310, name: "Email" },
        { value: 234, name: "Ad Networks" },
        { value: 135, name: "Video Ads" },
        { value: 1548, name: "Search Engines" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

</details>

On-demand importing ^{<a href="#on-demand-importing"><img src="https://img.shields.io/badge/recommended-10B981" alt="recommended" align="middle" height="16"></a>}

To keep your bundle size small, we recommend manually importing the components and charts you need from ECharts. To make this easier, we’ve created an import code generator. Simply paste your option code into the tool, and it will generate the exact import statements for you.

<picture> <source media="(prefers-color-scheme: dark)" srcset="assets/codegen-dark.webp"> <source media="(prefers-color-scheme: light)" srcset="assets/codegen-light.webp"> <img alt="A modal for generating ECharts import code. The left panel shows a chart configuration in JSON, while the right panel displays TypeScript import statements for ECharts charts and components." src="assets/codegen-light.webp"> </picture>

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.

<details> <summary><a href="https://stackblitz.com/edit/vue-echarts-8-global?file=index.html">Demo →</a></summary> <!-- scripts:start -->

<script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.40"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.1.0"></script>

<!-- scripts:end -->

const app = Vue.createApp(...)

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

</details>

See more examples here.

Props

• init-options: object

  Optional chart init configurations. See echarts.init's opts parameter here →

  Injection key: INIT_OPTIONS_KEY.

• theme: string | object

  Theme to be applied. See echarts.init's theme parameter here →

  Injection key: THEME_KEY.

• option: object

  ECharts' universal interface. Modifying this prop triggers Vue ECharts to compute an update plan and call setOption. Read more here →

  Smart update

  • If you supply update-options (via prop or injection), Vue ECharts forwards it directly to setOption and skips the planner.
  • Manual setOption calls (only available when manual-update is true) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations.
  • Otherwise, Vue ECharts analyses the change: removed objects become null, removed arrays become [] with replaceMerge, ID/anonymous deletions trigger replaceMerge, and risky changes fall back to notMerge: true.

• update-options: object

  Options for updating chart option. If supplied (or injected), Vue ECharts forwards it directly to setOption, skipping the smart update. See echartsInstance.setOption's opts parameter here →

  Injection key: UPDATE_OPTIONS_KEY.

• group: string

  Group name to be used in chart connection. See echartsInstance.group here →

• autoresize: boolean | { throttle?: number, onResize?: () => void } (default: false)

  Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.

• loading: boolean (default: false)

  Whether the chart is in loading state.

• loading-options: object

  Configuration item of loading animation. See echartsInstance.showLoading's opts parameter here →

  Injection key: LOADING_OPTIONS_KEY.

• manual-update: boolean (default: false)

  Handy for performance-sensitive charts (large or high-frequency updates). When set to true, Vue only uses the option prop for the initial render; later prop changes do nothing and you must drive updates via setOption on a template ref. If the chart re-initializes (for example due to init-options changes, flipping manual-update, or a remount), the manual state is discarded and the chart is rendered again from the current option value.

Events

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

<template>
  <VChart :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:

• highlight →
• downplay →
• selectchanged →
• legendselectchanged →
• legendselected →
• legendunselected →
• legendselectall →
• legendinverseselect →
• legendscroll →
• datazoom →
• datarangeselected →
• timelinechanged →
• timelineplaychanged →
• restore →
• dataviewchanged →
• magictypechanged →
• geoselectchanged →
• geoselected →
• geounselected →
• axisareaselected →
• brush →
• brushEnd →
• brushselected →
• globalcursortaken →
• rendered →
• finished →
• Mouse events
  • click →
  • dblclick →
  • mouseover [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mo