使用教程

易用的中后台图表解决方案，常用于图表展示页快速生成

优势

1. 真正开箱即用：只需要关心你的数据，传入 meta、data 即可出图。
2. 开发体验舒适：使用 TypeScript 开发，提供完整的类型定义文件。
3. 无缝习惯使用：图表用 Ant Design Charts 来提供，自定义的样式支持参数透传。

何时使用

1. 需要针对一堆数据快速建立可视化图表，并且需要 折线图/柱状图/交叉表 频繁切换查看。
2. 前端小白，只关心手里的数据，不想看长篇大论了解那些图表库该怎么使用，只想搭个图表看。
3. 提供折线图、柱状图、交叉表三类组件进行图表绘制：
   • 折线图：常用来观察资料在一段维度之内的变化，如果 X 轴为时间，这种折线图又称为趋势图。
   • 柱状图：描述的是分类数据，常用来回答的是每一个分类中「有多少？」这个问题。
   • 交叉表：是一种矩阵形式的表格，拥有最强大的数据分析能力，可以展示无限指标和无限维度间的关系。

如何使用

安装

chart-render 依赖 ant design，单独使用不要忘记安装～

$ npm install chart-render --save

代码演示

/**
 * transform: true
 * defaultShowCode: true
 */
import React, { useState } from 'react';
import { Line, Column, PivotTable } from 'chart-render';
export default () => {
  const [component, setComponent] = useState('Line');
  const ChartRender = { Line, Column, PivotTable }[component];
  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <button
          style={{ marginRight: 10 }}
          className="ant-btn ant-btn-primary"
          onClick={() => setComponent('Line')}
        >
          折线图
        </button>
        <button
          style={{ marginRight: 10 }}
          className="ant-btn ant-btn-primary"
          onClick={() => setComponent('Column')}
        >
          柱状图
        </button>
        <button
          style={{ marginRight: 10 }}
          className="ant-btn ant-btn-primary"
          onClick={() => setComponent('PivotTable')}
        >
          交叉表
        </button>
      </div>
      <ChartRender
        meta={[
          { id: 'date', name: '日期', isDim: true },
          { id: 'pv', name: '访问量', isDim: false },
          { id: 'uv', name: '访客数', isDim: false },
        ]}
        data={[
          { date: '20200101', pv: 100, uv: 50 },
          { date: '20200102', pv: 120, uv: 60 },
          { date: '20200103', pv: 140, uv: 70 },
          { date: '20200104', pv: 160, uv: 80 },
        ]}
      />
    </div>
  );
};

API

通用参数

所有的图表组件都有以下 4 个入参（data 和 meta 是必传的参数，请务必注意）：

注 1：通用参数 - data 数据配置项

是普通的对象数组，形如：

[
  { date: '20200101', pv: 100, uv: 50 },
  { date: '20200102', pv: 120, uv: 60 },
  { date: '20200103', pv: 140, uv: 70 },
  { date: '20200104', pv: 160, uv: 80 },
];

注 2：通用参数 - meta 元数据配置项

用来描述 data 的各个字段的东西，形如：

/**
 * id: 对应单条数据项的 key 名
 * name: 对应单条数据项的 key 的描述
 * isDim: 是否是维度，`true`-维度，`false`-指标
 * isRate: 是否是百分数，仅限指标使用，启用后，数值 `0.5` 会以 `50%` 来输出渲染
 */
[
  { id: 'date', name: '日期', isDim: true, isRate: false },
  { id: 'pv', name: '访问量', isDim: false, isRate: false },
  { id: 'uv', name: '访客数', isDim: false, isRate: false },
];

Line 折线图的额外参数

如果你需要修改点、线等样式，可以参考参数表：折线图参数表 面积图参数表，除了 yField、xField、seriesField 三个字段不做透传，其他字段均做透传处理。

Column 柱状图的额外参数

如果你需要修改颜色、柱等样式，可以参考参数表：柱状图参数表，除了 yField、xField、seriesField 三个字段不做透传，其他字段均做透传处理。

PivotTable 交叉表的额外参数