26 Star 126 Fork 30

范围兄 / echarts-for-vue

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

简体中文 | English

ECharts For Vue  Version

📊📈 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>
  1. 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>
  1. More examples
  2. Online demo

Global API

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

initialOptions

Property Type Default Optional Description
echarts object The global object of ECharts library
h function The method createElement of Vue (Required for Vue 3)
ResizeObserver function window.ResizeObserver When the global ResizeObserver doesn't exist, the polyfill provides support
name string "ECharts" The registered name of the component

Instance Properties

Name Type ReadOnly Description
inst object ECharts instance

props

Name Type Default Reactive Description
initTheme object | string The parameter theme of echarts.init method, see
initOpts string 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 object The parameter opts of ECharts instance method showLoading, see
option object The parameter option of ECharts instance method setOption, see
setOptionOpts object 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 (Based on ResizeObserver, forward compatibility via polyfill)

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

methods

Definition Description
setOption(option: object, opts: object): 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: ambit_tsai
  2. QQ Group: 663286147
  3. E-mail: ambit_tsai@qq.com

Comments ( 0 )

Sign in for post a comment

About

📊📈 适用于 Vue 3 和 2 的 ECharts 包装组件 spread retract
JavaScript and 3 more languages
Apache-2.0
Cancel

Releases (1)

All

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/ambit/echarts-for-vue.git
git@gitee.com:ambit/echarts-for-vue.git
ambit
echarts-for-vue
echarts-for-vue
master

Search