ecomfe/ vue-echarts

Vue.js

JavaScript

HTML

echarts

TypeScript

CSS

View on GitHub

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

Readme

Vue-ECharts

Name: vue-echarts
Brand: vue-echarts
SKU: //ecomfe/vue-echarts
Rating: 4.610444444444444 (6494 reviews)

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

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(...)

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

<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 →

<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

<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 →

<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

opts

parameter here →

Injection key:

INIT_OPTIONS_KEY

```
theme: string | object
```

Theme to be applied. See

echarts.init

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

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

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:

import { INIT_OPTIONS_KEY } from 'vue-echarts'
import { provide } from 'vue'

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

// options API
{
  provide: {
    [INIT_OPTIONS_KEY]: { ... }
  }
}

import { INIT_OPTIONS_KEY } from 'vue-echarts'

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

Methods

```
setOption
```
→
```
getWidth
```
→
```
getHeight
```
→
```
getDom
```
→
```
getOption
```
→
```
resize
```
→
```
dispatchAction
```
→
```
convertToPixel
```
→
```
convertFromPixel
```
→
```
containPixel
```
→
```
showLoading
```
→
```
hideLoading
```
→
```
containPixel
```
→
```
getDataURL
```
→
```
getConnectedDataURL
```
→
```
clear
```
→
```
dispose
```
→

Static Methods

Static methods can be accessed from

echarts

itself.

Events

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
```
→
```
mouseout
```
→
```
mousemove
```
→
```
mousedown
```
→
```
mouseup
```
→
```
globalout
```
→
```
contextmenu
```
→

ZRender events

```
zr:click
```
```
zr:mousedown
```
```
zr:mouseup
```
```
zr:mousewheel
```
```
zr:dblclick
```
```
zr:contextmenu
```

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.