mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-17 22:19:03 +08:00
docs: refine README
This commit is contained in:
Justineo
@ -1,3 +1,6 @@
|
|||||||
|
4.0.0
|
||||||
|
* Release 4.0.0.
|
||||||
|
|
||||||
4.0.0-beta.1
|
4.0.0-beta.1
|
||||||
* Fix autoresize.
|
* Fix autoresize.
|
||||||
|
|
||||||
|
|||||||
28
README.md
28
README.md
@ -11,15 +11,16 @@ Built upon [ECharts](http://echarts.baidu.com/index.html) `v4.1.0`+ and depends
|
|||||||
### npm (Recommended)
|
### npm (Recommended)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ npm install vue-echarts echarts
|
$ npm install echarts vue-echarts
|
||||||
```
|
```
|
||||||
|
|
||||||
### Manual
|
### CDN
|
||||||
|
|
||||||
Just download `dist/vue-echarts.js` and include it in your HTML file:
|
Include `echarts` and `vue-echarts` in your HTML file like this:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.0"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
@ -79,7 +80,7 @@ For **Vue CLI 2** with the `webpack` template, modify `build/webpack.base.conf.j
|
|||||||
|
|
||||||
If you are using bare webpack config, just do similar modifications make it work.
|
If you are using bare webpack config, just do similar modifications make it work.
|
||||||
|
|
||||||
#### Using with Nuxt.js
|
##### Using with Nuxt.js
|
||||||
|
|
||||||
When using Vue-ECharts on the server side with Nuxt.js, it may be not properly transpiled because Nuxt.js prevents files under `node_modules` from being bundled into the server bundle with only a few exceptions by default. We need to whitelist `vue-echarts` manually.
|
When using Vue-ECharts on the server side with Nuxt.js, it may be not properly transpiled because Nuxt.js prevents files under `node_modules` from being bundled into the server bundle with only a few exceptions by default. We need to whitelist `vue-echarts` manually.
|
||||||
|
|
||||||
@ -119,23 +120,6 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### CommonJS with npm
|
|
||||||
|
|
||||||
```js
|
|
||||||
var Vue = require('vue')
|
|
||||||
|
|
||||||
// requiring the UMD module
|
|
||||||
var ECharts = require('vue-echarts')
|
|
||||||
|
|
||||||
// or with vue-loader you can require the src directly
|
|
||||||
// and import ECharts modules manually to reduce bundle size
|
|
||||||
var ECharts = require('vue-echarts)
|
|
||||||
require('echarts/lib/chart/bar')
|
|
||||||
require('echarts/lib/component/tooltip')
|
|
||||||
|
|
||||||
// register component to use
|
|
||||||
```
|
|
||||||
|
|
||||||
### AMD
|
### AMD
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
@ -9,15 +9,16 @@
|
|||||||
### npm（推荐方式）
|
### npm（推荐方式）
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ npm install vue-echarts echarts
|
$ npm install echarts vue-echarts
|
||||||
```
|
```
|
||||||
|
|
||||||
### 手动引入
|
### CDN
|
||||||
|
|
||||||
直接下载 `dist/vue-echarts.js` 并在 HTML 文件中引入：
|
在 HTML 文件按如下方式依次引入 `echarts` 和 `vue-echarts`：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.0"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 使用方法
|
## 使用方法
|
||||||
@ -77,7 +78,7 @@ module.exports = {
|
|||||||
|
|
||||||
如果你正直接配置使用 webpack，那么也请做类似的修改使其能够正常工作。
|
如果你正直接配置使用 webpack，那么也请做类似的修改使其能够正常工作。
|
||||||
|
|
||||||
#### 在 Nuxt.js 中使用
|
##### 在 Nuxt.js 中使用
|
||||||
|
|
||||||
在 Nuxt.js 的服务端中使用 Vue-ECharts 时，可能没有正常转译。这是因为 Nuxt.js 默认会将 `node_modules` 目录下的绝大多数文件被排除在服务端打包代码以外。需要手动将 `vue-echarts` 加入白名单。
|
在 Nuxt.js 的服务端中使用 Vue-ECharts 时，可能没有正常转译。这是因为 Nuxt.js 默认会将 `node_modules` 目录下的绝大多数文件被排除在服务端打包代码以外。需要手动将 `vue-echarts` 加入白名单。
|
||||||
|
|
||||||
@ -118,24 +119,6 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 在没有 ES Next 支持环境下用 npm 以 CommonJS 方式引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
var Vue = require('vue')
|
|
||||||
|
|
||||||
// 引入 UMD 模块
|
|
||||||
var ECharts = require('vue-echarts')
|
|
||||||
|
|
||||||
// 或者在使用 vue-loader 时可以直接引入源码版本，并且手动
|
|
||||||
// 引入 ECharts 各个模块来减小打包尺寸
|
|
||||||
var ECharts = require('vue-echarts/components/ECharts')
|
|
||||||
require('echarts/lib/chart/bar')
|
|
||||||
require('echarts/lib/component/tooltip')
|
|
||||||
|
|
||||||
// 注册组件后即可使用
|
|
||||||
Vue.component('v-chart', ECharts)
|
|
||||||
```
|
|
||||||
|
|
||||||
### AMD
|
### AMD
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><link rel=stylesheet href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Dosis:300,500&text=Vue-ECharts"><title>Vue-ECharts Demo</title><link href=js/chunk-2d0c0857.abea8f2d.js rel=prefetch><link href=css/app.9187dad2.css rel=preload as=style><link href=js/app.3a93a693.js rel=preload as=script><link href=js/chunk-vendors.9d05e1be.js rel=preload as=script><link href=js/echarts.249edcbb.js rel=preload as=script><link href=css/app.9187dad2.css rel=stylesheet></head><body><noscript><strong>We're sorry but Vue-ECharts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/echarts.249edcbb.js></script><script src=js/chunk-vendors.9d05e1be.js></script><script src=js/app.3a93a693.js></script></body></html>
|
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><link rel=stylesheet href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Dosis:300,500&text=Vue-ECharts"><title>Vue-ECharts Demo</title><link href=js/chunk-2d0c0857.abea8f2d.js rel=prefetch><link href=css/app.9187dad2.css rel=preload as=style><link href=js/app.af4e1fb1.js rel=preload as=script><link href=js/chunk-vendors.9d05e1be.js rel=preload as=script><link href=js/echarts.249edcbb.js rel=preload as=script><link href=css/app.9187dad2.css rel=stylesheet></head><body><noscript><strong>We're sorry but Vue-ECharts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/echarts.249edcbb.js></script><script src=js/chunk-vendors.9d05e1be.js></script><script src=js/app.af4e1fb1.js></script></body></html>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-echarts",
|
"name": "vue-echarts",
|
||||||
"version": "4.0.0-beta.1",
|
"version": "4.0.0",
|
||||||
"description": "ECharts component for Vue.js.",
|
"description": "ECharts component for Vue.js.",
|
||||||
"main": "dist/vue-echarts.js",
|
"main": "dist/vue-echarts.js",
|
||||||
"module": "components/ECharts.vue",
|
"module": "components/ECharts.vue",
|
||||||
|
|||||||
Reference in New Issue
Block a user