bizcharts-mobile
TypeScript icon, indicating that this package has built-in type declarations

0.3.11 • Public • Published

bizcharts-mobile

BizCharts Mobile基于移动端图表F2、跨端框架Rax,使用TypeScript语言,一套代码多端运行;同时支持React框架下使用。

Demo默认为Rax框架下使用示例,如果名字后加了React则为React框架下使用示例。

阿里小程序支持Rax运行时和编译时两种模式

微信小程序暂时只支持Rax运行时模式

官网

快速开始 API文档 Plots 图表示例

特性

  • 基于 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",
    ...
  }
}

联系我们

欢迎扫码加入钉钉群

Versions

Current Tags

Version History

Package Sidebar

Install

npm i bizcharts-mobile

Weekly Downloads

1

Version

0.3.11

License

none

Unpacked Size

3.83 MB

Total Files

1515

Last publish

Collaborators

  • leannechen
  • bugmaker
  • hahaiwin