mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-14 19:23:28 +08:00
docs: refine readme
This commit is contained in:
32
README.md
32
README.md
@ -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).
|
||||
|
@ -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)查看更多例子。
|
||||
|
Reference in New Issue
Block a user