bizcharts-mobile
BizCharts Mobile基于移动端图表F2、跨端框架Rax,使用TypeScript语言,一套代码多端运行;同时支持React框架下使用。
Demo默认为Rax框架下使用示例,如果名字后加了React则为React框架下使用示例。
阿里小程序支持Rax运行时和编译时两种模式
微信小程序暂时只支持Rax运行时模式
官网
特性
- 基于 F2 3.X 封装的移动端图表库,专注移动
- 支持Rax、React和原生小程序框架,轻松跨端
- 使用TypeScript语言开发,类型提示良好
- 性能稳定,具有强大的扩展和自定义能力
Rax框架下使用
NPM
tnpm install bizcharts-mobile --save
成功安装完成之后,即可使用 import 或 require 进行引用。
import { LineChart } from 'bizcharts-mobile';
按需引入
// 引入F2基础模块,插件按需注册
import 'bizcharts-mobile/lib/index-pure';
// 引入图表组件
import LineChart from 'bizcharts-mobile/lib/plots/components/line-chart';
如果需要 webpack externals,参考如下配置:
webpackConfig = {
// ...
externals: {
'bizcharts-mobile': 'BizChartsMobile',
},
}
Browser CDN
// 例:https://unpkg.alibaba-inc.com/bizcharts-mobile/dist/index.umd.js
// 最新版本
<script src="https://unpkg.alibaba-inc.com/bizcharts-mobile/dist/index.umd.js"></script>
// 指定具体版本
<script src="https://unpkg.alibaba-inc.com/bizcharts-mobile@{version}/dist/index.umd.js"></script>
<script>
const { LineChart } = window.BizChartsMobile;
</script>
React框架下使用
在react框架下使用,和在rax框架下使用基本一致,只是再引用方式上有所区别。
NPM
tnpm install bizcharts-mobile --save
成功安装完成之后,即可使用 import 或 require 进行引用。
import { LineChart } from 'bizcharts-mobile/react';
按需引入
// 引入F2基础模块,插件按需注册
import 'bizcharts-mobile/lib/index-pure';
// 引入图表组件
import LineChart from 'bizcharts-mobile/react/lib/plots/components/line-chart';
如果需要 webpack externals,参考如下配置:
webpackConfig = {
// ...
externals: {
'bizcharts-mobile/react': 'BizChartsMobile',
},
}
Browser CDN
// 例:https://unpkg.alibaba-inc.com/bizcharts-mobile/react/dist/alifeBizchartsMobile.umd.js
// 最新版本
<script src="https://unpkg.alibaba-inc.com/bizcharts-mobile/react/dist/alifeBizchartsMobile.umd.js"></script>
// 指定具体版本
<script src="https://unpkg.alibaba-inc.com/bizcharts-mobile@{version}/react/dist/alifeBizchartsMobile.umd.js"></script>
<script>
const { LineChart } = window.BizChartsMobile;
</script>
绘制一个简单的图表(Rax)
在 BizCharts Mobile 引入页面后,我们就已经做好了创建第一个图表的准备了。
注意!注意!注意! 由于
bizchart-mobile
同时支持H5和小程序,所以在属性赋值时有些许差异,主要方式如下 :
// 属性单独赋值,H5和小程序都适用
<Chart data={ data } color='red'/>
// 属性集合赋值
const options={ data, color: 'red' }
// 方式1,H5和小程序都适用
<Chart options={ options } />
// 方式2,H5适用,小程序不支持
<Chart { ...options } />
下面是以一个基础的柱状图为例开始我们的第一个图表创建。
import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import { AreaChart as Chart } from 'bizcharts-mobile';
const Demo = () => {
const data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9,
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8,
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3,
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4,
},
{
name: 'London',
月份: 'May.',
月均降雨量: 47,
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3,
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24,
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6,
}
];
const options: IAreaChartCfg = {
data,
height: 300,
xField: '月份',
yField: '月均降雨量',
tooltip: {
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#6394f9',
padding: [3, 5],
},
nameStyle: {
fill: '#fff',
},
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
},
}
};
return (
<View>
<Chart options={options} />
</View>
);
};
render(<Demo />, document.body, { driver: DriverUniversal });
Dependencies
{
"dependencies": {
"@antv/f2": "^3.7.8",
"@antv/f2-context": "^0.0.1",
"@antv/util": "^2.0.9",
"classnames": "^2.2.6",
"lodash.pick": "^4.4.0",
"rax-canvas": "^2.2.1-0",
"rax-view": "^1.0.0",
...
}
}
联系我们
欢迎扫码加入钉钉群