20 Unstar Star 80 Fork 20

范围兄 / echarts-for-vue

Create your Gitee Account
Explore and code with more than 5 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;

Install

npm i -S echarts-for-vue

Usage

  1. Vue 3
import { createApp, h } from 'vue';
import 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 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 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 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 Explanation
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 Explanation
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 Explanation
inst object ✔ ECharts instance

props

Name Type Default Reactive Explanation
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 outer div, such as style, class or onclick

methods

Definition Explanation
setOption(option: object, opts: object): void Call the method setOption of ECharts instance, see
resize(): void Resize chart (Based on the size of outer div)
addResizeListener(): void Add "resize" listener
removeResizeListener(): void Remove "resize" listener

Contact Us

  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

132457 8cb2edc1 1899542 131848 70c8d3a4 1899542