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
+26-17Lines changed: 26 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@
3
3
4
4
# ECharts For Vue 
5
5
6
-
ECharts Wrapper Component For Vue 3 and 2
6
+
ECharts wrapper component for Vue 3 and 2
7
7
8
8
9
9
#### Install
@@ -18,7 +18,7 @@ import echarts from 'echarts';
18
18
import { plugin } from'echarts-for-vue';
19
19
20
20
constapp=createApp({ /*...*/ });
21
-
app.use(plugin, { echarts, h }); // use as a plugin
21
+
app.use(plugin, { echarts, h }); // use as a plugin
22
22
```
23
23
```html
24
24
<template>
@@ -32,7 +32,7 @@ app.use(plugin, { echarts, h }); // use as a plugin
32
32
33
33
exportdefault {
34
34
components: {
35
-
ECharts:createComponent(echarts, h), // use as a component
35
+
ECharts:createComponent({ echarts, h }), // use as a component
36
36
},
37
37
data() {
38
38
return {
@@ -41,7 +41,7 @@ app.use(plugin, { echarts, h }); // use as a plugin
41
41
},
42
42
methods: {
43
43
doSomething() {
44
-
this.$refs.chart.inst.getWidth(); // call the method of the ECharts instance
44
+
this.$refs.chart.inst.getWidth(); // call the method of the ECharts instance
45
45
}
46
46
}
47
47
}
@@ -54,7 +54,7 @@ import Vue from 'vue';
54
54
importechartsfrom'echarts';
55
55
import { plugin } from'echarts-for-vue';
56
56
57
-
Vue.use(plugin, { echarts }); // use as a plugin
57
+
Vue.use(plugin, { echarts }); // use as a plugin
58
58
```
59
59
```html
60
60
<template>
@@ -67,7 +67,7 @@ Vue.use(plugin, { echarts }); // use as a plugin
67
67
68
68
exportdefault {
69
69
components: {
70
-
ECharts:createComponent(echarts), // use as a component
70
+
ECharts:createComponent({ echarts }), // use as a component
71
71
},
72
72
data() {
73
73
return {
@@ -76,7 +76,7 @@ Vue.use(plugin, { echarts }); // use as a plugin
76
76
},
77
77
methods: {
78
78
doSomething() {
79
-
this.$refs.chart.inst.getWidth(); // call the method of the ECharts instance
79
+
this.$refs.chart.inst.getWidth(); // call the method of the ECharts instance
80
80
}
81
81
}
82
82
}
@@ -89,14 +89,23 @@ Vue.use(plugin, { echarts }); // use as a plugin
89
89
#### Global API
90
90
|Definition|Return|Explain|
91
91
|-|-|-|
92
-
|Object `createComponent`(echarts *echarts*[, Function *h*])|Component definition object|Create a component. Parameter `h` isn't required in Vue 2|
93
-
|void `plugin`(Vue *app*, Object *options*)||The installation method of plugin. Parameter `options` has 3 props (`echarts`, `h`, `name`)|
92
+
|Object `createComponent`(Object *initialOptions*)|Component definition object|Create a component|
93
+
|void `plugin`(Vue *app*, Object *initialOptions*)||The installation method of plugin|
94
+
95
+
96
+
#### initialOptions
97
+
|Name|Type|Default|Optional|Explain|
98
+
|-|-|-|-|-|
99
+
|echarts|Object|||The global object of ECharts library|
100
+
|h|Function||✔|The method `createElement` of Vue (**Required** for Vue 3)|
101
+
|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|
102
+
|name|String|"ECharts"|✔|The registered name of the component|
94
103
95
104
96
105
#### Instance Properties
97
-
|Name|Type|Explain|
98
-
|-|-|-|
99
-
|inst|Object|ECharts instance|
106
+
|Name|Type|ReadOnly|Explain|
107
+
|-|-|-|-|
108
+
|inst|Object|✔|ECharts instance|
100
109
101
110
102
111
#### props
@@ -109,17 +118,17 @@ Vue.use(plugin, { echarts }); // use as a plugin
109
118
|loadingOpts|Object|||The parameter `opts` of ECharts instance `showLoading` method, <ahref="https://echarts.apache.org/zh/api.html#echartsInstance.showLoading"target="_blank">see</a>|
110
119
|option|Object||✔|The parameter `option` of ECharts instance `setOption` method, <ahref="https://echarts.apache.org/zh/api.html#echartsInstance.setOption"target="_blank">see</a>|
111
120
|setOptionOpts|Object|||The parameter `opts` of ECharts instance `setOption` method, <ahref="https://echarts.apache.org/zh/api.html#echartsInstance.setOption"target="_blank">see</a>|
112
-
|events|Array<Arguments>|||The array element is an argument of ECharts instance method `on`, <ahref="https://echarts.apache.org/zh/api.html#echartsInstance.on"target="_blank">see</a>|
113
-
|autoResize|Boolean|true||Auto resize (Based on `ResizeObserver`, forward compatibility via polyfill)|
121
+
|events|Array<Arguments>|||An array element is the arguments of ECharts instance method `on`, <ahref="https://echarts.apache.org/zh/api.html#echartsInstance.on"target="_blank">see</a>|
122
+
|autoResize|Boolean|true||Auto resize (Based on `ResizeObserver`, forward compatibility via <ahref="https://github.com/que-etc/resize-observer-polyfill"target="_blank">polyfill</a>)|
114
123
115
124
116
125
#### methods
117
126
|Definition|Explain|
118
127
|-|-|
119
128
|void `setOption`(Object *option*, Object *opts*)|Call the method `setOption` of ECharts instance, <ahref="https://echarts.apache.org/zh/api.html#echartsInstance.setOption"target="_blank">see</a>|
120
-
|void `resize`()|Resize (Based on the size of outer div)|
0 commit comments