echarts-for-vue icon indicating copy to clipboard operation
echarts-for-vue copied to clipboard

Published 20 hours ago • verified publisher icon ambit-tsai
→

Metadata

📊 📈 ECharts wrapper component for Vue 3, 2 and TypeScript

简体中文 | English

ECharts For Vue  Version

📊📈 ECharts wrapper component for Vue 3, 2 and TypeScript

Features

  1. Support for Vue 3 and 2;
  2. Support auto resize;
  3. Conform to the habits of Vue and ECharts users;
  4. Provide pure function API, no side effects;
  5. Lightweight encapsulation, easy to use;

Install

npm i -S echarts-for-vue

Usage

  1. Vue 3
import { createApp, h } from 'vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';

const app = createApp({ /*...*/ });
app.use(plugin, { echarts, h });                        // use as a plugin

<template>
    <ECharts ref="chart" :option="option" />
</template>

<script>
    import { createComponent } from 'echarts-for-vue';
    import * as echarts from 'echarts';
    import { h } from 'vue';

    export default {
        components: {
            ECharts: createComponent({ echarts, h }),   // use as a component
        },
        data: () => ({
            option: { /*...*/ },
        }),
        methods: {
            doSomething() {
                this.$refs.chart.inst.getWidth();       // call the method of ECharts instance
            },
        },
    }
</script>
  1. Vue 2
import Vue from 'vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';

Vue.use(plugin, { echarts });                           // use as a plugin

<template>
    <ECharts ref="chart" :option="option" />
</template>

<script>
    import { createComponent } from 'echarts-for-vue';
    import * as echarts from 'echarts';

    export default {
        components: {
            ECharts: createComponent({ echarts }),      // use as a component
        },
        data: () => ({
            option: { /*...*/ },
        }),
        methods: {
            doSomething() {
                this.$refs.chart.inst.getWidth();       // call the method of ECharts instance
            },
        },
    }
</script>
  1. More examples
  2. Online demo

Global API

Definition Return Description
createComponent(options: Options): object Component definition object Create a component
plugin(app: Vue, options: Options): void The installation method of plugin

Options

Property Type Default Optional Description
echarts typeof echarts The global object of ECharts library
h Function ✔ The method createElement of Vue (Required for Vue 3)
ResizeObserver typeof ResizeObserver window.ResizeObserver ✔ When the global ResizeObserver doesn't exist, the polyfill provides support
name string "ECharts" ✔ The registered name of the component
deepWatchOption boolean true ✔ deep watch prop "option"

Instance Properties

Name Type ReadOnly Description
inst ECharts ✔ ECharts instance

props

Name Type Default Reactive Description
initTheme object | string ✔ The parameter theme of echarts.init method, see
initOpts object ✔ The parameter opts of echarts.init method, see
loading boolean false ✔ Shows loading animation
loadingType string "default" The parameter type of ECharts instance method showLoading, see
loadingOpts EChartsLoadingOption The parameter opts of ECharts instance method showLoading, see
option EChartOption ✔ The parameter option of ECharts instance method setOption, see
optionOpts EChartsOptionConfig The parameter opts of ECharts instance method setOption, see
events Arguments[] An array element is the arguments of ECharts instance method on, see
autoResize boolean true ✔ Auto resize

Beyond the props above, the remaining properties are passed to the root element of the component, such as style, class or onclick

Events

Name Description
resize Trigger when chart is resized

methods

Definition Description
setOption(option: EChartOption, opts?: EChartsOptionConfig): void Call the method setOption of ECharts instance, see
resize(): void Resize chart (Based on the size of root element)
addResizeListener(): void Add "resize" listener
removeResizeListener(): void Remove "resize" listener

Contact

  1. WeChat: cai_fanwei
  2. QQ: 854521460
  3. QQ Group: 663286147
  4. E-mail: [email protected]

← Metadata

79
Stars
11
Forks
Watchers

Owner

verified publisher icon ambit-tsai

Metadata

📊 📈 ECharts wrapper component for Vue 3, 2 and TypeScript

Back