Apache ECharts component for Vue.js.

Related tags

Charts vue echarts
Overview

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
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" />
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} 
{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" />
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} 
{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

Comments