ambit-tsai / echarts-for-vue

๐Ÿ“Š ๐Ÿ“ˆ ECharts wrapper component for Vue 3, 2 and TypeScript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

็ฎ€ไฝ“ไธญๆ–‡ | 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: ambit_tsai@qq.com

About

๐Ÿ“Š ๐Ÿ“ˆ ECharts wrapper component for Vue 3, 2 and TypeScript

License:Apache License 2.0


Languages

Language:JavaScript 54.4%Language:TypeScript 31.1%Language:Vue 9.0%Language:HTML 5.5%