vue-echarts
    TypeScript icon, indicating that this package has built-in type declarations

    6.0.2 • Public • Published

    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" />
    </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" />
    </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 <script> inside your HTML file and access the component via window.VueECharts.

    Vue 3
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.26"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2"></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/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.4.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2"></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 →

      💡 When update-options is not specified, notMerge: false will be specified by default when the setOption method is called if the option object is modified directly and the reference remains unchanged; otherwise, if a new reference is bound to option, notMerge: true will be specified.

    • 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

    • 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
    • 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 vue-echarts@6:

    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.

    Keywords

    none

    Install

    npm i vue-echarts

    DownloadsWeekly Downloads

    38,762

    Version

    6.0.2

    License

    MIT

    Unpacked Size

    293 kB

    Total Files

    19

    Last publish

    Collaborators

    • ecomfe-core
    • justineo