简体中文 | English

ECharts For Vue  

📊📈 ECharts wrapper component for Vue 3 and 2

Features

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

Install

npm i -S echarts-for-vue

Usage

1. Vue 3

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

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

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

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

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

2. Vue 2

import Vue from 'vue';
import * as echarts from 'echarts';
import { plugin } from 'echarts-for-vue';

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

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

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

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

3. More examples
4. Online demo

Global API

initialOptions

Instance Properties

props

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

methods

Contact

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