vue-echarts

Vue.js component for Apache ECharts™.

10,239

1,503

10,239

View on GitHub View on NPM

Top Related Projects

echarts

64,125

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Quick Overview

Vue-ECharts is a Vue.js component for Apache ECharts, a powerful charting and visualization library. It provides a seamless integration of ECharts into Vue applications, allowing developers to create interactive and customizable charts with ease.

Pros

Easy integration with Vue.js applications
Full support for ECharts features and options
Reactive updates and two-way binding
TypeScript support for better type checking and autocompletion

Cons

Learning curve for ECharts API if not familiar
Large bundle size when using the full ECharts library
Limited documentation specific to Vue-ECharts (relies heavily on ECharts docs)
May require additional optimization for performance in large-scale applications

Code Examples

Basic line chart:

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

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

use([CanvasRenderer, LineChart, GridComponent, TooltipComponent]);

export default {
  name: "LineChart",
  components: {
    VChart,
  },
  setup() {
    provide(THEME_KEY, "light");
    const option = ref({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });

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

Reactive chart update:

<template>
  <v-chart class="chart" :option="option" />
  <button @click="updateData">Update Data</button>
</template>

<script>
import { ref } from "vue";
import VChart from "vue-echarts";

export default {
  components: { VChart },
  setup() {
    const option = ref({
      // ... chart options
    });

    const updateData = () => {
      option.value.series[0].data = [/* new data */];
    };

    return { option, updateData };
  },
};
</script>

Using ECharts events:

<template>
  <v-chart :option="option" @click="handleChartClick" />
</template>

<script>
import { ref } from "vue";
import VChart from "vue-echarts";

export default {
  components: { VChart },
  setup() {
    const option = ref({
      // ... chart options
    });

    const handleChartClick = (params) => {
      console.log("Clicked:", params);
    };

    return { option, handleChartClick };
  },
};
</script>

Getting Started

Install the package:
```
npm install echarts vue-echarts
```

Import and register the component:

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(App)
app.component('v-chart', ECharts)

Use the component in your

Competitor Comparisons

echarts

64,125

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Pros of ECharts

Standalone charting library with no dependencies on Vue or other frameworks
More comprehensive and feature-rich, offering a wider variety of chart types
Better performance for large datasets and complex visualizations

Cons of ECharts

Steeper learning curve due to its extensive API and options
Requires more manual setup and configuration when used with Vue applications

Code Comparison

ECharts (vanilla JavaScript):

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'line' }]
});

Vue-ECharts (Vue component):

<template>
  <v-chart :option="option" />
</template>
<script>
export default {
  data: () => ({
    option: {
      xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
      yAxis: { type: 'value' },
      series: [{ data: [120, 200, 150], type: 'line' }]
    }
  })
}
</script>

Vue-ECharts provides a more Vue-friendly wrapper around ECharts, simplifying integration with Vue applications. However, ECharts offers more flexibility and can be used in various environments without being tied to a specific framework.

vue-apexcharts

1,346

📊 Vue 2 component for ApexCharts

Pros of vue-apexcharts

More interactive features like zooming, panning, and tooltips
Easier to create responsive and mobile-friendly charts
Extensive documentation and examples

Cons of vue-apexcharts

Larger bundle size compared to vue-echarts
Less customization options for advanced visualizations
Limited support for 3D charts and complex data visualizations

Code Comparison

vue-apexcharts:

<template>
  <apexchart type="bar" :options="chartOptions" :series="series"></apexchart>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)
</script>

vue-echarts:

<template>
  <v-chart :option="option" />
</template>
<script>
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
use([BarChart])
</script>

Both libraries offer Vue.js components for creating charts, but vue-apexcharts focuses on simplicity and interactivity, while vue-echarts provides more flexibility and advanced features. vue-apexcharts is generally easier to set up and use, especially for beginners, while vue-echarts offers more customization options for complex visualizations. The choice between the two depends on the specific requirements of your project and the level of chart complexity needed.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Vue ECharts

Vue.js component for Apache EChartsâ¢.

Still using Vue 2? Read v7 docs here â

Installation & Usage

npm

npm install echarts vue-echarts

Example

Demo â

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

[!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.

Demo â

<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.21"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.0"></script>

const app = Vue.createApp(...)

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

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

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 (manual setOption calls are ignored when manual-update is false).

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 â
- mouseout â
- mousemove â
- mousedown â
- mouseup â
- globalout â
- contextmenu â
ZRender events
- zr:click
- zr:mousedown
- zr:mouseup
- zr:mousewheel
- zr:dblclick
- zr:contextmenu

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.

<template>
  <VChart @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 theme you can use the provide API like this:

Composition API

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

provide(THEME_KEY, "dark");

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

// getter is also supported
provide(THEME_KEY, () => theme.value);

Options API

import { THEME_KEY } from 'vue-echarts'
import { computed } from 'vue'

export default {
  {
    provide: {
      [THEME_KEY]: 'dark'
    }
  }
}

// Or make injections reactive
export default {
  data() {
    return {
      theme: 'dark'
    }
  },
  provide() {
    return {
      [THEME_KEY]: computed(() => this.theme)
    }
  }
}

Methods

setOption â
getWidth â
getHeight â
getDom â
getOption â
resize â
dispatchAction â
convertToPixel â
convertFromPixel â
containPixel â
getDataURL â
getConnectedDataURL â
clear â
dispose â

[!NOTE] The following ECharts instance methods aren't exposed because their functionality is already provided by component props:

showLoading / hideLoading: use the loading and loading-options props instead.

setTheme: use the theme prop instead.

Slots

Vue ECharts allows you to define ECharts option's tooltip.formatter and toolbox.feature.dataView.optionToContent callbacks via Vue slots instead of defining them in your option object. This simplifies custom HTMLElement rendering using familiar Vue templating.

Slot Naming Convention

Slot names begin with tooltip/dataView, followed by hyphen-separated path segments to the target.
Each segment corresponds to an option property name or an array index (for arrays, use the numeric index).
The constructed slot name maps directly to the nested callback it overrides.

Example mappings:

tooltip â option.tooltip.formatter
tooltip-baseOption â option.baseOption.tooltip.formatter
tooltip-xAxis-1 â option.xAxis[1].tooltip.formatter
tooltip-series-2-data-4 â option.series[2].data[4].tooltip.formatter
dataView â option.toolbox.feature.dataView.optionToContent
dataView-media-1-option â option.media[1].option.toolbox.feature.dataView.optionToContent

The slot props correspond to the first parameter of the callback function.

Usage

<template>
  <VChart :option="chartOptions">
    <!-- Global `tooltip.formatter` -->
    <template #tooltip="params">
      <div v-for="(param, i) in params" :key="i">
        <span v-html="param.marker" />
        <span>{{ param.seriesName }}</span>
        <span>{{ param.value[0] }}</span>
      </div>
    </template>

    <!-- Tooltip on xAxis -->
    <template #tooltip-xAxis="params">
      <div>X-Axis : {{ params.value }}</div>
    </template>

    <!-- Data View Content -->
    <template #dataView="option">
      <table>
        <thead>
          <tr>
            <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
              {{ t }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
            <th>{{ row[0] }}</th>
            <td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
          </tr>
        </tbody>
      </table>
    </template>
  </VChart>
</template>

Example â

[!NOTE] Slots take precedence over the corresponding callback defined in props.option.

Static Methods

Static methods can be accessed from echarts itself.

CSP: `style-src` or `style-src-elem`

If you are both enforcing a strict CSP that prevents inline <style> injection and targeting browsers that don't support the CSSStyleSheet() constructor, you need to manually include vue-echarts/style.css.

Migration to v8

[!NOTE] Please make sure to read the upgrade guide for ECharts 6 as well.

The following breaking changes are introduced in vue-echarts@8:

Vue 2 support is dropped: If you still need to stay on Vue 2, use vue-echarts@7.
Browser compatibility changes: We no longer provide compatibility for browsers without native class support. If you need to support legacy browsers, you must transpile the code to ES5 yourself.
CSP entry point removed: The entry point vue-echarts/csp is removed. Use vue-echarts instead. You only need to manually include vue-echarts/style.css if you are both enforcing a strict CSP that prevents inline <style> injection and targeting browsers that don't support the CSSStyleSheet() constructor.

Local development

pnpm i
pnpm dev

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

For testing and CI details, see tests/TESTING.md.

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.

Top Related Projects

echarts

64,125

Apache ECharts is a powerful, interactive charting and data visualization library for browser

vue-apexcharts

1,346

📊 Vue 2 component for ApexCharts

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

vue-echarts

Top Related Projects

echarts

vue-apexcharts

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

echarts

Pros of ECharts

Cons of ECharts

Code Comparison

vue-apexcharts

Pros of vue-apexcharts

Cons of vue-apexcharts

Code Comparison

Convert designs to code with AI

README

Vue ECharts

Installation & Usage

npm

Example

CDN

Props

Smart Update

Events

Native DOM Events

Provide / Inject

Methods

Slots

Static Methods

CSP: style-src or style-src-elem

Migration to v8

Local development

Notice

Top Related Projects

echarts

vue-apexcharts

Convert designs to code with AI

NPM DownloadsLast 30 Days

CSP: `style-src` or `style-src-elem`