bizcharts

案例一 数据质量分析

一、柱状图

• 案例代码

import { Axis, Chart, Coord, Geom, Label, Tooltip } from 'bizcharts';

const RulePercentageAnalysis = (props) => {
  const { fetchRulePercentageLoading, rulePercentageList = [] } = props;

  const rulePercentageData = rulePercentageList.map(rulePercentage => ({
    ruleName: Object.keys(rulePercentage)[0] || '',
    count: Object.values(rulePercentage)[0] || 0,
  }));
  const orderRulePercentageData = orderBy(rulePercentageData, ['count'], ['asc']);

  return (
    <Card
      loading={fetchRulePercentageLoading}
      className={styles['analysis-plan-card']}
      title={QUALITY_ANALYSIS_LANG.RULE_PERCENTAGE_TITLE}
    >
      <Chart height={400} data={orderRulePercentageData} forceFit padding={['auto', 100, 'auto']}>
         // Boolean类型，代表将坐标系x,y轴交换
        <Coord transpose />
        <Axis name="ruleName" />
        <Axis name="count" visible={false} />
        <Tooltip />
        <Geom
          tooltip={['ruleName*count', (ruleName, count) => {
            return {
              name: QUALITY_ANALYSIS_LANG.PERCENTAGE,
              title: ruleName,
              value: count,
            };
          }]}
// 使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。
          type="interval"
// 位置属性的映射
          position="ruleName*count"
          color={['count', '#E6F6C8-#3376CB']}
        >
          <Label content={['ruleName*count', (name, value) => numeral(value || 0).format('0.0%')]} />{' '}
        </Geom>
      </Chart>
    </Card>
  );
};

• 数据结构

1588750790224.png

二、bizcharts 案例中涉及到的组件概念

• Chart 图表最顶级的组件，控制着图表的创建、绘制、销毁等。

• Coord 坐标系组件，设置Chart或者View的坐标系类型。

• Axis 坐标轴组件，控制图表中坐标轴的样式。

• Tooltip 提示信息组件，是指鼠标悬停在图表上的某点时，以提示框的形式展示该点的数据。

• Geom 几何标记对象，决定创建图表的类型。

• Label 几何标记对象上的文本。