# <span id="deployment">部署</span>
wx-chart可以被部署在纯浏览器环境,以及微信小程序环境中。其本身是基于ES6规范编写,因此尤其适合ES6/ES7开发环境
## <span id="es6">ES6/ES7环境</span>
```js
import { WxDoughnut, WxLiner, WxBar } from 'wx-chart';
let options = {...};
var myChart = new WxLiner('myCanvas', options);
```
如果你没有使用npm或bower安装,则可能需要自行配置入口。默认的工程入口指向为 `src/wx-chart.js` 。
## <span id="wx">微信小程序环境</span>
当前微信小程序不支持从npm等包管理器下载js库,因此你需要手动拷贝 `dist/wx-chart.min.js` 到你的程序工程中,而后手动引用。
```js
let WxChart = require("you/path/wx-chart.min.js");
// 初始化
let options = {...};
let myChart = new WxChart.WxLiner('myCanvas', options);
```
## <span id="react">React环境</span>
wx-chart需要配合[wx-chart-react插件](https://github.com/xch89820/wx-chart-react)以便支持React环境,详细获取方式详见[获取](gettingstarted/download.md)章节。
需要注意的是,React环境的组件名称为 `图表类名+React`, 例如 `WxLiner` 其React组件名称为 `WxLinerReact`
以下为ES6/ES7环境下jsx事例代码:
```js
import React from 'react';
import ReactDOM from 'react-dom';
import WxLinerReact from 'wx-chart-react';
// 初始化
let options = {...};
const myChart = ReactDOM.render(<WxLinerReact {...options}></WxLinerReact>, 'myCanvas');
```
## <span id="script">script标签</span>
您如果没有使用工程化的js环境,您需要手动拷贝 `dist/wx-chart.min.js` 至您的工程,并使用script标签引用。引用后使用全局变量入口为 `WxChart`。
```html
<script src="/path/to/wx-chart.min.js"></script>
<script>
var myChart = new WxChart.WxLiner('myCanvas', {...});
//...
</script>
```
## <span id="commonjs">Common JS</span>
```js
var WxChart= require('wx-chart');
var myChart = new WxChart.WxLiner('myCanvas', {...});
```
## <span id="requirejs">Require JS</span>
```js
require(['path/to/wx-chart.min.js'], function(WxChart){
var myChart = new WxChart.WxLiner('myCanvas', {...});
});
```