案例一 數(shù)據(jù)質(zhì)量分析
一骨饿、柱狀圖
- 案例代碼
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類型宏赘，代表將坐標(biāo)系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,
};
}]}
// 使用矩形或者弧形，用面積來表示大小關(guān)系的圖形闷游，一般構(gòu)成柱狀圖贴汪、餅圖等圖表。
type="interval"
// 位置屬性的映射
position="ruleName*count"
color={['count', '#E6F6C8-#3376CB']}
>
<Label content={['ruleName*count', (name, value) => numeral(value || 0).format('0.0%')]} />{' '}
</Geom>
</Chart>
</Card>
);
};
- 數(shù)據(jù)結(jié)構(gòu)
1588750790224.png
二业簿、bizcharts 案例中涉及到的組件概念
Chart 圖表最頂級的組件阳懂，控制著圖表的創(chuàng)建、繪制岩调、銷毀等。
Coord 坐標(biāo)系組件缰揪，設(shè)置Chart或者View的坐標(biāo)系類型葱淳。
Axis 坐標(biāo)軸組件，控制圖表中坐標(biāo)軸的樣式蛙紫。
Tooltip 提示信息組件途戒，是指鼠標(biāo)懸停在圖表上的某點(diǎn)時(shí)，以提示框的形式展示該點(diǎn)的數(shù)據(jù)喷斋。
Geom 幾何標(biāo)記對象蒜茴，決定創(chuàng)建圖表的類型浆西。
Label 幾何標(biāo)記對象上的文本。
