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

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

    联系我们

    欢迎扫码加入钉钉群

    Install

    npm i bizcharts-mobile

    DownloadsWeekly Downloads

    11

    Version

    0.3.10

    License

    none

    Unpacked Size

    3.83 MB

    Total Files

    1515

    Last publish

    Collaborators

    • bugmaker