docs: refine readme

This commit is contained in:
Justineo
2021-02-22 23:08:55 +08:00
parent 9a6bf07eac
commit cd93cf52a6
2 changed files with 24 additions and 42 deletions

View File

@ -90,7 +90,7 @@ import "echarts";
### CDN & Global variable
Drop `<script>` inside your HTML file as follows:
Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
<details open>
<summary>Vue 3</summary>
@ -104,7 +104,15 @@ Drop `<script>` inside your HTML file as follows:
<!-- vue3Scripts:end -->
```
```js
const app = Vue.createApp(...)
// register globally (or you can do it locally)
app.component('v-chart', VueECharts)
```
[Demo →](https://codepen.io/Justineo/pen/Jjbryzo)
</details>
<details>
@ -120,31 +128,13 @@ Drop `<script>` inside your HTML file as follows:
<!-- vue2Scripts:end -->
```
[Demo →](https://codepen.io/Justineo/pen/gOLGxJR)
</details>
Vue-ECharts is exposed as `window.VueECharts` in this mode.
<details open>
<summary>Vue 3</summary>
```js
const app = Vue.createApp(...)
// register globally (or you can do it locally)
app.component('v-chart', VueECharts)
```
</details>
<details>
<summary>Vue 2</summary>
```js
// register globally (or you can do it locally)
Vue.component("v-chart", VueECharts);
```
[Demo →](https://codepen.io/Justineo/pen/gOLGxJR)
</details>
See more examples [here](https://github.com/ecomfe/vue-echarts/tree/next/src/demo).

View File

@ -6,7 +6,7 @@
## 💡 注意 💡
若您的项目正在使用 `vue-echarts` ≤ 5 的版本,请在升级 v6 前阅读 *[迁移到 v6](#迁移到-v6)* 部分文档。
若您的项目正在使用 `vue-echarts` ≤ 5 的版本,请在升级 v6 前阅读 _[迁移到 v6](#迁移到-v6)_ 部分文档。
## 安装 & 使用
@ -88,7 +88,7 @@ import "echarts";
### CDN & 全局变量
用如下方式在 HTML 中插入 `<script>` 标签:
用如下方式在 HTML 中插入 `<script>` 标签,并且通过 `window.VueECharts` 来访问组件接口
<details open>
<summary>Vue 3</summary>
@ -102,6 +102,15 @@ import "echarts";
<!-- vue3Scripts:end -->
```
```js
const app = Vue.createApp(...)
// 全局注册组件(也可以使用局部注册)
app.component('v-chart', ECharts)
```
[Demo →](https://codepen.io/Justineo/pen/Jjbryzo)
</details>
<details>
@ -117,30 +126,13 @@ import "echarts";
<!-- vue2Scripts:end -->
```
</details>
在此模式下 Vue-ECharts 将暴露为 `window.VueECharts`
<details open>
<summary>Vue 3</summary>
```js
const app = Vue.createApp(...)
// 全局注册组件(也可以使用局部注册)
app.component('v-chart', ECharts)
```
</details>
<details>
<summary>Vue 2</summary>
```js
// 全局注册组件(也可以使用局部注册)
Vue.component("v-chart", VueECharts);
```
[Demo →](https://codepen.io/Justineo/pen/gOLGxJR)
</details>
可以在[这里](https://github.com/ecomfe/vue-echarts/tree/next/src/demo)查看更多例子。