mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-17 05:30:52 +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
|
||||
* 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)
|
||||
|
||||
```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
|
||||
<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
|
||||
@ -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.
|
||||
|
||||
#### 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.
|
||||
|
||||
@ -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
|
||||
|
||||
```js
|
||||
|
||||
@ -9,15 +9,16 @@
|
||||
### npm（推荐方式）
|
||||
|
||||
```bash
|
||||
$ npm install vue-echarts echarts
|
||||
$ npm install echarts vue-echarts
|
||||
```
|
||||
|
||||
### 手动引入
|
||||
### CDN
|
||||
|
||||
直接下载 `dist/vue-echarts.js` 并在 HTML 文件中引入：
|
||||
在 HTML 文件按如下方式依次引入 `echarts` 和 `vue-echarts`：
|
||||
|
||||
```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，那么也请做类似的修改使其能够正常工作。
|
||||
|
||||
#### 在 Nuxt.js 中使用
|
||||
##### 在 Nuxt.js 中使用
|
||||
|
||||
在 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
|
||||
|
||||
```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",
|
||||
"version": "4.0.0-beta.1",
|
||||
"version": "4.0.0",
|
||||
"description": "ECharts component for Vue.js.",
|
||||
"main": "dist/vue-echarts.js",
|
||||
"module": "components/ECharts.vue",
|
||||
|
||||
Reference in New Issue
Block a user