Skip to content

Commit 3124d17

Browse files
ambit-tsaiambit-tsai
authored
Merge pull request #3 from ambit-tsai/dev
v1.0.0
2 parents 81f9d65 + ba8cde7 commit 3124d17

29 files changed

+2265
-122837
lines changed

‎README.md

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
# ECharts For Vue  ![Version](https://img.shields.io/npm/v/echarts-for-vue.svg)
55

6-
ECharts Wrapper Component For Vue 3 and 2
6+
ECharts wrapper component for Vue 3 and 2
77

88

99
#### Install
@@ -18,7 +18,7 @@ import echarts from 'echarts';
1818
import { plugin } from 'echarts-for-vue';
1919

2020
const app = createApp({ /*...*/ });
21-
app.use(plugin, { echarts, h }); // use as a plugin
21+
app.use(plugin, { echarts, h }); // use as a plugin
2222
```
2323
```html
2424
<template>
@@ -32,7 +32,7 @@ app.use(plugin, { echarts, h }); // use as a plugin
3232
3333
export default {
3434
components: {
35-
ECharts: createComponent(echarts, h), // use as a component
35+
ECharts: createComponent({ echarts, h }), // use as a component
3636
},
3737
data() {
3838
return {
@@ -41,7 +41,7 @@ app.use(plugin, { echarts, h }); // use as a plugin
4141
},
4242
methods: {
4343
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
4545
}
4646
}
4747
}
@@ -54,7 +54,7 @@ import Vue from 'vue';
5454
import echarts from 'echarts';
5555
import { plugin } from 'echarts-for-vue';
5656

57-
Vue.use(plugin, { echarts }); // use as a plugin
57+
Vue.use(plugin, { echarts }); // use as a plugin
5858
```
5959
```html
6060
<template>
@@ -67,7 +67,7 @@ Vue.use(plugin, { echarts }); // use as a plugin
6767
6868
export default {
6969
components: {
70-
ECharts: createComponent(echarts), // use as a component
70+
ECharts: createComponent({ echarts }), // use as a component
7171
},
7272
data() {
7373
return {
@@ -76,7 +76,7 @@ Vue.use(plugin, { echarts }); // use as a plugin
7676
},
7777
methods: {
7878
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
8080
}
8181
}
8282
}
@@ -89,14 +89,23 @@ Vue.use(plugin, { echarts }); // use as a plugin
8989
#### Global API
9090
|Definition|Return|Explain|
9191
|-|-|-|
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 <a href="https://github.com/que-etc/resize-observer-polyfill" target="_blank">polyfill</a> provides support|
102+
|name|String|"ECharts"|✔|The registered name of the component|
94103

95104

96105
#### Instance Properties
97-
|Name|Type|Explain|
98-
|-|-|-|
99-
|inst|Object|ECharts instance|
106+
|Name|Type|ReadOnly|Explain|
107+
|-|-|-|-|
108+
|inst|Object|✔|ECharts instance|
100109

101110

102111
#### props
@@ -109,17 +118,17 @@ Vue.use(plugin, { echarts }); // use as a plugin
109118
|loadingOpts|Object|||The parameter `opts` of ECharts instance `showLoading` method, <a href="https://echarts.apache.org/zh/api.html#echartsInstance.showLoading" target="_blank">see</a>|
110119
|option|Object||✔|The parameter `option` of ECharts instance `setOption` method, <a href="https://echarts.apache.org/zh/api.html#echartsInstance.setOption" target="_blank">see</a>|
111120
|setOptionOpts|Object|||The parameter `opts` of ECharts instance `setOption` method, <a href="https://echarts.apache.org/zh/api.html#echartsInstance.setOption" target="_blank">see</a>|
112-
|events|Array&lt;Arguments&gt;|||The array element is an argument of ECharts instance method `on`, <a href="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&lt;Arguments&gt;|||An array element is the arguments of ECharts instance method `on`, <a href="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 <a href="https://github.com/que-etc/resize-observer-polyfill" target="_blank">polyfill</a>)|
114123

115124

116125
#### methods
117126
|Definition|Explain|
118127
|-|-|
119128
|void `setOption`(Object *option*, Object *opts*)|Call the method `setOption` of ECharts instance, <a href="https://echarts.apache.org/zh/api.html#echartsInstance.setOption" target="_blank">see</a>|
120-
|void `resize`()|Resize (Based on the size of outer div)|
121-
|void `addResizeListener`()|Add resize listener|
122-
|void `removeResizeListener`()|Remove resize listener|
129+
|void `resize`()|Resize chart (Based on the size of outer div)|
130+
|void `addResizeListener`()|Add "resize" listener|
131+
|void `removeResizeListener`()|Remove "resize" listener|
123132

124133

125134
#### Contact Us

‎README.zh-CN.md

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import echarts from 'echarts';
1818
import { plugin } from 'echarts-for-vue';
1919

2020
const app = createApp({ /*...*/ });
21-
app.use(plugin, { echarts, h }); // 作用插件使用
21+
app.use(plugin, { echarts, h }); // 作用插件使用
2222
```
2323
```html
2424
<template>
@@ -32,7 +32,7 @@ app.use(plugin, { echarts, h }); // 作用插件使用
3232
3333
export default {
3434
components: {
35-
ECharts: createComponent(echarts, h), // 作为组件使用
35+
ECharts: createComponent({ echarts, h }), // 作为组件使用
3636
},
3737
data() {
3838
return {
@@ -41,7 +41,7 @@ app.use(plugin, { echarts, h }); // 作用插件使用
4141
},
4242
methods: {
4343
doSomething() {
44-
this.$refs.chart.inst.getWidth(); // 调用 ECharts 实例的方法
44+
this.$refs.chart.inst.getWidth(); // 调用 ECharts 实例的方法
4545
}
4646
}
4747
}
@@ -54,7 +54,7 @@ import Vue from 'vue';
5454
import echarts from 'echarts';
5555
import { plugin } from 'echarts-for-vue';
5656

57-
Vue.use(plugin, { echarts }); // 作用插件使用
57+
Vue.use(plugin, { echarts }); // 作用插件使用
5858
```
5959
```html
6060
<template>
@@ -67,7 +67,7 @@ Vue.use(plugin, { echarts }); // 作用插件使用
6767
6868
export default {
6969
components: {
70-
ECharts: createComponent(echarts), // 作为组件使用
70+
ECharts: createComponent({ echarts }), // 作为组件使用
7171
},
7272
data() {
7373
return {
@@ -76,7 +76,7 @@ Vue.use(plugin, { echarts }); // 作用插件使用
7676
},
7777
methods: {
7878
doSomething() {
79-
this.$refs.chart.inst.getWidth(); // 调用 ECharts 实例的方法
79+
this.$refs.chart.inst.getWidth(); // 调用 ECharts 实例的方法
8080
}
8181
}
8282
}
@@ -89,14 +89,23 @@ Vue.use(plugin, { echarts }); // 作用插件使用
8989
#### 全局 API
9090
|定义|返回值|说明|
9191
|-|-|-|
92-
|Object `createComponent`(echarts *echarts* [, Function *h*])|组件定义对象|创建组件。使用 Vue2 时，不需要第二个参数|
93-
|void `plugin`(Vue *app*, Object *options*)||插件的安装方法。参数 `options` 需包含 `echarts`、`h`|
92+
|Object `createComponent`(Object *initialOptions*)|组件定义对象|创建组件|
93+
|void `plugin`(Vue *app*, Object *initialOptions*)||插件的安装方法|
94+
95+
96+
#### initialOptions
97+
|名称|类型|默认值|可选|说明|
98+
|-|-|-|-|-|
99+
|echarts|Object|||ECharts 库的全局对象|
100+
|h|Function||✔|Vue 的 `createElement` 方法（使用 Vue 3 时，是**必选**的）|
101+
|ResizeObserver|Function|window.ResizeObserver|✔|全局 `ResizeObserver` 不存在时，可通过 <a href="https://github.com/que-etc/resize-observer-polyfill" target="_blank">polyfill</a> 提供支持|
102+
|name|String|"ECharts"|✔|组件的注册名称|
94103

95104

96105
#### 实例属性
97-
|名称|类型|说明|
98-
|-|-|-|
99-
|inst|Object|ECharts 实例|
106+
|名称|类型|只读|说明|
107+
|-|-|-|-|
108+
|inst|Object|✔|ECharts 实例|
100109

101110

102111
#### props
@@ -110,7 +119,7 @@ Vue.use(plugin, { echarts }); // 作用插件使用
110119
|option|Object||✔|ECharts 实例 `setOption` 方法的入参 `option`，<a href="https://echarts.apache.org/zh/api.html#echartsInstance.setOption" target="_blank">详见</a>|
111120
|setOptionOpts|Object|||ECharts 实例 `setOption` 方法的入参 `opts`，<a href="https://echarts.apache.org/zh/api.html#echartsInstance.setOption" target="_blank">详见</a>|
112121
|events|Array&lt;Arguments&gt;|||数组元素为ECharts 实例 `on` 方法的入参，<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on" target="_blank">详见</a>|
113-
|autoResize|Boolean|true||自动调整大小（基于 `ResizeObserver` 实现，可通过 polyfill 向前兼容）|
122+
|autoResize|Boolean|true||自动调整大小（基于 `ResizeObserver` 实现，通过 <a href="https://github.com/que-etc/resize-observer-polyfill" target="_blank">polyfill</a> 可向前兼容）|
114123

115124

116125
#### methods

‎dist/echarts-for-vue.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)