็ฎไฝไธญๆ | English
๐๐ ECharts wrapper component for Vue 3, 2 and TypeScript
- Support for Vue 3 and 2;
- Support auto resize;
- Conform to the habits of Vue and ECharts users;
- Provide pure function API, no side effects;
- Lightweight encapsulation, easy to use;
npm i -S echarts-for-vue - 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>- 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>| Definition | Return | Description |
|---|---|---|
createComponent(options: Options): object | Component definition object | Create a component |
plugin(app: Vue, options: Options): void | The installation method of plugin |
| 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" |
| Name | Type | ReadOnly | Description |
|---|---|---|---|
| inst | ECharts | โ | ECharts instance |
| 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
| Name | Description |
|---|---|
| resize | Trigger when chart is resized |
| 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 |
- WeChat: cai_fanwei
- QQ: 854521460
- QQ Group: 663286147
- E-mail: ambit_tsai@qq.com