You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+33-29Lines changed: 33 additions & 29 deletions
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,15 @@
2
2
3
3
4
4
# ECharts For Vue 
5
-
📊📈 ECharts wrapper component for Vue 3and 2
5
+
📊📈 ECharts wrapper component for Vue 3, 2 and TypeScript
6
6
7
7
8
8
## Features
9
9
1. Support for Vue 3 and 2;
10
+
1. Support auto resize;
10
11
1. Conform to the habits of Vue and ECharts users;
11
12
1. Provide pure function API, no side effects;
12
13
1. Lightweight encapsulation, easy to use;
13
-
1. Support auto resize;
14
14
15
15
16
16
## Install
@@ -23,8 +23,8 @@ npm i -S echarts-for-vue
23
23
1. Vue 3
24
24
```javascript
25
25
import { createApp, h } from'vue';
26
-
import*asechartsfrom'echarts';
27
26
import { plugin } from'echarts-for-vue';
27
+
import*asechartsfrom'echarts';
28
28
29
29
constapp=createApp({ /*...*/ });
30
30
app.use(plugin, { echarts, h }); // use as a plugin
@@ -35,19 +35,17 @@ app.use(plugin, { echarts, h }); // use as a plugin
35
35
</template>
36
36
37
37
<script>
38
+
import { createComponent } from'echarts-for-vue';
38
39
import*asechartsfrom'echarts';
39
40
import { h } from'vue';
40
-
import { createComponent } from'echarts-for-vue';
41
41
42
42
exportdefault {
43
43
components: {
44
44
ECharts:createComponent({ echarts, h }), // use as a component
45
45
},
46
-
data() {
47
-
return {
48
-
option: { /*...*/ },
49
-
};
50
-
},
46
+
data: () => ({
47
+
option: { /*...*/ },
48
+
}),
51
49
methods: {
52
50
doSomething() {
53
51
this.$refs.chart.inst.getWidth(); // call the method of ECharts instance
@@ -60,8 +58,8 @@ app.use(plugin, { echarts, h }); // use as a plugin
60
58
2. Vue 2
61
59
```javascript
62
60
importVuefrom'vue';
63
-
import*asechartsfrom'echarts';
64
61
import { plugin } from'echarts-for-vue';
62
+
import*asechartsfrom'echarts';
65
63
66
64
Vue.use(plugin, { echarts }); // use as a plugin
67
65
```
@@ -71,18 +69,16 @@ Vue.use(plugin, { echarts }); // use as a plugin
71
69
</template>
72
70
73
71
<script>
74
-
import*asechartsfrom'echarts';
75
72
import { createComponent } from'echarts-for-vue';
73
+
import*asechartsfrom'echarts';
76
74
77
75
exportdefault {
78
76
components: {
79
77
ECharts:createComponent({ echarts }), // use as a component
80
78
},
81
-
data() {
82
-
return {
83
-
option: { /*...*/ },
84
-
};
85
-
},
79
+
data: () => ({
80
+
option: { /*...*/ },
81
+
}),
86
82
methods: {
87
83
doSomething() {
88
84
this.$refs.chart.inst.getWidth(); // call the method of ECharts instance
@@ -98,23 +94,24 @@ Vue.use(plugin, { echarts }); // use as a plugin
98
94
## Global API
99
95
|Definition|Return|Description|
100
96
|-|-|-|
101
-
|`createComponent`(*initialOptions*: object): object|Component definition object|Create a component|
102
-
|`plugin`(*app*: Vue, *initialOptions*: object): void||The installation method of plugin|
97
+
|`createComponent`(*options*: Options): object|Component definition object|Create a component|
98
+
|`plugin`(*app*: Vue, *options*: Options): void||The installation method of plugin|
103
99
104
100
105
-
## initialOptions
101
+
## Options
106
102
|Property|Type|Default|Optional|Description|
107
103
|-|-|-|-|-|
108
-
|echarts|object|||The global object of ECharts library|
109
-
|h|function||✔|The method `createElement` of Vue (**Required** for Vue 3)|
110
-
|ResizeObserver|function|window.ResizeObserver|✔|When the global `ResizeObserver` doesn't exist, the <ahref="https://github.com/que-etc/resize-observer-polyfill"target="_blank">polyfill</a> provides support|
104
+
|echarts|typeof echarts|||The global object of ECharts library|
105
+
|h|Function||✔|The method `createElement` of Vue (**Required** for Vue 3)|
106
+
|ResizeObserver|typeof ResizeObserver|window.ResizeObserver|✔|When the global `ResizeObserver` doesn't exist, the <ahref="https://github.com/que-etc/resize-observer-polyfill"target="_blank">polyfill</a> provides support|
111
107
|name|string|"ECharts"|✔|The registered name of the component|
@@ -124,25 +121,32 @@ Vue.use(plugin, { echarts }); // use as a plugin
124
121
|initOpts|object|||The parameter `opts` of `echarts.init` method, <ahref="https://echarts.apache.org/en/api.html#echarts.init"target="_blank">see</a>|
125
122
|loading|boolean|false|✔|Shows loading animation|
126
123
|loadingType|string|"default"||The parameter `type` of ECharts instance method `showLoading`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.showLoading"target="_blank">see</a>|
127
-
|loadingOpts|object|||The parameter `opts` of ECharts instance method `showLoading`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.showLoading"target="_blank">see</a>|
128
-
|option|object||✔|The parameter `option` of ECharts instance method `setOption`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.setOption"target="_blank">see</a>|
129
-
|setOptionOpts|object|||The parameter `opts` of ECharts instance method `setOption`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.setOption"target="_blank">see</a>|
124
+
|loadingOpts|EChartsLoadingOption|||The parameter `opts` of ECharts instance method `showLoading`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.showLoading"target="_blank">see</a>|
125
+
|option|EChartOption||✔|The parameter `option` of ECharts instance method `setOption`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.setOption"target="_blank">see</a>|
126
+
|optionOpts|EChartsOptionConfig|||The parameter `opts` of ECharts instance method `setOption`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.setOption"target="_blank">see</a>|
130
127
|events|Arguments[]|||An array element is the arguments of ECharts instance method `on`, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.on"target="_blank">see</a>|
131
-
|autoResize|boolean|true|✔|Auto resize (Based on `ResizeObserver`, forward compatibility via <ahref="https://github.com/que-etc/resize-observer-polyfill"target="_blank">polyfill</a>)|
128
+
|autoResize|boolean|true|✔|Auto resize|
132
129
133
130
***Beyond the `props` above, the remaining properties are passed to the root element of the component, such as `style`, `class` or `onclick`***
134
131
135
132
133
+
## Events
134
+
|Name|Description|
135
+
|-|-|
136
+
|resize|Trigger when chart is resized|
137
+
138
+
136
139
## methods
137
140
|Definition|Description|
138
141
|-|-|
139
-
|`setOption`(*option*: object, *opts*: object): void|Call the method `setOption` of ECharts instance, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.setOption"target="_blank">see</a>|
142
+
|`setOption`(*option*: EChartOption, *opts*?: EChartsOptionConfig): void|Call the method `setOption` of ECharts instance, <ahref="https://echarts.apache.org/en/api.html#echartsInstance.setOption"target="_blank">see</a>|
140
143
|`resize`(): void|Resize chart (Based on the size of root element)|
0 commit comments