Need help with vue-echarts?
Click the β€œchat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ecomfe
6.5K Stars 1.2K Forks MIT License 78 Commits 17 Opened issues

Description

Apache ECharts component for Vue.js.

Services available

!
?

Need anything else?

Contributors list

Vue-ECharts

Vue.js component for Apache ECharts.

πŸ‡¨πŸ‡³ δΈ­ζ–‡η‰ˆ

Uses Apache ECharts 5 and works for both Vue.js 2/3.

πŸ’‘ Heads up πŸ’‘

If you are migrating from

vue-echarts
≀ 5, you should read the Migration to v6 section before you update to v6.

Not ready yet? Read documentation for older versions here β†’

Installation & Usage

npm & ESM

$ 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

If you are using NuxtJS on top of Vue 2, you'll also need

@nuxtjs/composition-api
:
npm i -D @nuxtjs/composition-api

And then add

'@nuxtjs/composition-api/module'
in the
buildModules
option in your
nuxt.config.js
.
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(...)
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(...)

We encourage manually importing components and charts from ECharts for smaller bundle size. 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";

SFC example

Vue 3
<template>
  <v-chart class="chart" :option="option"></v-chart>
</template>

<script>
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, defineComponent } from "vue";

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

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  setup () {
    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)"
            }
          }
        }
      ]
    });

    return { option };
  }
});
</script>

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

Demo β†’

Vue 2
<template>
  <v-chart class="chart" :option="option"></v-chart>
</template>

<script>
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";

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

export default {
  name: "HelloWorld",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  data() {
    return {
      option: {
        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>

Demo β†’

CDN & Global variable

Drop

 inside your HTML file and access the component via 
window.VueECharts
.
Vue 3
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
const app = Vue.createApp(...)

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

Demo β†’

Vue 2
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
// register globally (or you can do it locally)
Vue.component("v-chart", VueECharts);

Demo β†’

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 will trigger ECharts'

setOption
method. Read more here β†’
  • update-options: object

Options for updating chart option. 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
    (default:
    false
    )

Whether the chart should be resized automatically whenever its root is resized.

  • 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
    )

For performance critical scenarios (having a large dataset) we'd better bypass Vue's reactivity system for

option
prop. By specifying
manual-update
prop with
true
and not providing
option
prop, the dataset won't be watched any more. After doing so, you need to retrieve the component instance with
ref
and manually call
setOption
method to update the chart.

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
import { INIT_OPTIONS_KEY } from 'vue-echarts'
import { provide } from 'vue'

// composition API
provide(INIT_OPTIONS_KEY, ...)

// options API
{
  provide: {
    [INIT_OPTIONS_KEY]: { ... }
  }
}
Vue 2
import { INIT_OPTIONS_KEY } from 'vue-echarts'

// in component options
{
  provide: {
    [INIT_OPTIONS_KEY]: { ... }
  }
}

Methods

Static Methods

Static methods can be accessed from

echarts
itself.

Events

Vue-ECharts support the following events:

See supported events here β†’

Migration to v6

πŸ’‘ Please make sure to read the migration guide for ECharts 5 as well.

The following breaking changes are introduced in

[email protected]
:

Vue 2 support

  • Now
    @vue/composition-api
    is required to be installed to use Vue-ECharts with Vue 2.

Props

  • options
    is renamed to
    option
    to align with ECharts itself.
  • Updating
    option
    will respect
    update-options
    configs instead of checking reference change.
  • watch-shallow
    is removed. Use
    manual-update
    for performance critical scenarios.

Methods

  • mergeOptions
    is renamed to
    setOption
    to align with ECharts itself.
  • showLoading
    and
    hideLoading
    is removed. Use the
    loading
    and
    loading-options
    props instead.
  • appendData
    is removed. (Due to ECharts 5's breaking change.)
  • All static methods are removed from
    vue-echarts
    . Use those methods from
    echarts
    directly.

Computed getters

  • Computed getters (
    width
    ,
    height
    ,
    isDisposed
    and
    computedOptions
    ) are removed. Use the
    getWidth
    ,
    getHeight
    ,
    isDisposed
    and
    getOption
    methods instead.

Styles

  • Now the root element of the component have
    100%Γ—100%
    size by default, instead of
    600Γ—400
    .

Local development

$ npm i
$ npm run serve

Open

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.