37 Star 295 Fork 78

Ambit / echarts-for-vue

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 5.25 KB
一键复制 编辑 原始数据 按行查看 历史

简体中文 | 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
TypeScript
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

搜索帮助