案例一 数据质量分析
一、柱状图
- 案例代码
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 几何标记对象上的文本。
