多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# <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', {...}); }); ```