Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ambit-tsai/echarts-for-vue
๐ ๐ ECharts wrapper component for Vue 3, 2 and TypeScript
https://github.com/ambit-tsai/echarts-for-vue
chart echarts ts typescript vue vue3
Last synced: about 1 month ago
JSON representation
๐ ๐ ECharts wrapper component for Vue 3, 2 and TypeScript
- Host: GitHub
- URL: https://github.com/ambit-tsai/echarts-for-vue
- Owner: ambit-tsai
- License: apache-2.0
- Created: 2020-09-22T08:56:10.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T13:00:53.000Z (over 3 years ago)
- Last Synced: 2024-10-28T00:02:44.706Z (about 2 months ago)
- Topics: chart, echarts, ts, typescript, vue, vue3
- Language: JavaScript
- Homepage:
- Size: 3.15 MB
- Stars: 80
- Watchers: 5
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - echarts-for-vue - Tsai - Apache ECharts wrapper component for Vue 3 and 2. (Frameworks / Vue Component)
- awesome-vue-3 - echarts-for-vue - ๐๐ECharts wrapper component for Vue 3 and 2 (Packages)
README
[็ฎไฝไธญๆ](https://gitee.com/ambit/echarts-for-vue) | English
# ECharts For Vueย ย 
๐๐ ECharts wrapper component for Vue 3, 2 and TypeScript
## Features
1. Support for Vue 3 and 2;
1. Support auto resize;
1. Conform to the habits of Vue and ECharts users;
1. Provide pure function API, no side effects;
1. Lightweight encapsulation, easy to use;
## Install
```
npm i -S echarts-for-vue
```
## Usage
1. Vue 3
```javascript
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
```
```html
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
},
},
}
```
2. Vue 2
```javascript
import Vue from 'vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';
Vue.use(plugin, { echarts }); // use as a plugin
```
```html
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
},
},
}
```
3. More examples
4. 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
1. *QQ*: 854521460
1. *QQ Group*: 663286147
1. *E-mail*: [email protected]