javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-15 03:33:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: refine readme

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@ -90,7 +90,7 @@ import "echarts";
### CDN & Global variable ### 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> <details open>
<summary>Vue 3</summary> <summary>Vue 3</summary>
@ -104,7 +104,15 @@ Drop `<script>` inside your HTML file as follows:
<!-- vue3Scripts:end --> <!-- 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) [Demo →](https://codepen.io/Justineo/pen/Jjbryzo)
</details> </details>
<details> <details>
@ -120,31 +128,13 @@ Drop `<script>` inside your HTML file as follows:
<!-- vue2Scripts:end --> <!-- 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 ```js
// register globally (or you can do it locally) // register globally (or you can do it locally)
Vue.component("v-chart", VueECharts); Vue.component("v-chart", VueECharts);
``` ```
[Demo →](https://codepen.io/Justineo/pen/gOLGxJR)
</details> </details>
See more examples [here](https://github.com/ecomfe/vue-echarts/tree/next/src/demo). See more examples [here](https://github.com/ecomfe/vue-echarts/tree/next/src/demo).

34
README.zh-Hans.md
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 & 全局变量 ### CDN & 全局变量
用如下方式在 HTML 中插入 `<script>` 标签： 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
<details open> <details open>
<summary>Vue 3</summary> <summary>Vue 3</summary>
@ -102,6 +102,15 @@ import "echarts";
<!-- vue3Scripts:end --> <!-- vue3Scripts:end -->
``` ```
```js
const app = Vue.createApp(...)
// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)
```
[Demo →](https://codepen.io/Justineo/pen/Jjbryzo)
</details> </details>
<details> <details>
@ -117,30 +126,13 @@ import "echarts";
<!-- vue2Scripts:end --> <!-- 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 ```js
// 全局注册组件（也可以使用局部注册） // 全局注册组件（也可以使用局部注册）
Vue.component("v-chart", VueECharts); Vue.component("v-chart", VueECharts);
``` ```
[Demo →](https://codepen.io/Justineo/pen/gOLGxJR)
</details> </details>
可以在[这里](https://github.com/ecomfe/vue-echarts/tree/next/src/demo)查看更多例子。 可以在[这里](https://github.com/ecomfe/vue-echarts/tree/next/src/demo)查看更多例子。