1 | ### `BarChart` 组件
|
2 |
|
3 | > 使用时建议配置个config.js文件来引入
|
4 |
|
5 | | 参数名称 | 描述 | 类型 | 属性值 | 默认值|
|
6 | |---|---|---|---|---|
|
7 | | | 提供了类似`css`缩写方式快捷设置 `Flex` 属性 | `String` | `1 row` |
|
8 | | customStyle | 自定义图表配置 | `PropTypes.object` | `--` |
|
9 | | customStyle.width | 每个柱子的宽度 | `number `| `必填`
|
10 | | customStyle.height | 图表容器的高度 | `number `| `必填`
|
11 | | customStyle.axisYWidth | 定义左面Y轴的宽度 | `number` | `必填`
|
12 | | customStyle.fillColor | 柱状图的前景填充色 | `string `| `必填`
|
13 | | customStyle.backgroundColor | 柱状图底色背景 | `string `| `必填`
|
14 | | customStyle.raduis | 柱状图样式的圆角 | `number `| `必填`
|
15 | | customStyle.parity | `odd`x轴奇数数据显示 `even`x轴偶数数据显示 `all`x轴数据全部显示 | `string `| `必填`
|
16 | | customStyle.piecewise | Y轴度量分几段 | `number `| `必填`
|
17 | | customStyle.topAxisXShow | 是否展示顶部数据条显示value值 | `bool `| `必填`
|
18 | | customStyle.showAxisY | Y轴度量分几段 | `bool `| `必填`
|
19 | | customStyle.showAxisXLine | 是否显示分段线 | `bool `| `必填`
|
20 | | customStyle.showTopBar | 是否显示顶部数值条 | `bool `| `必填`
|
21 | | customStyle.borderColor | 表格边框 | `string `| `必填`
|
22 | | customStyle.textColor | 文本的颜色 | `string `| `必填`
|
23 | | customStyle.topTextColor | 顶部文字颜色 | `string `| `必填`
|
24 | | customStyle.unitName | 设置 AxisX 的度量单位 | `string` | `必填`
|
25 | | customStyle.onClick | 点击每个小柱子的回调click函数,目前业务只返回dataSource.data | `func` | `选填`
|
26 | | dataSource | 数据源数组 | `PropTypes.array` | [{x:, y:, id:,}] | `--` |
|
27 |
|
28 |
|
29 |
|
30 | ```jsx
|
31 | static propTypes = {
|
32 | customStyle: PropTypes.object,
|
33 | dataSource: PropTypes.array,
|
34 | }
|
35 | ```
|
36 |
|
37 | ```jsx
|
38 | static defaultProps = {
|
39 | customStyle: {},
|
40 | dataSource: [],
|
41 | }
|
42 | ```
|
43 |
|
44 |
|
45 | ### demoe sample
|
46 |
|
47 | ```
|
48 | class ChartBarDemo extends Component {
|
49 | render() {
|
50 | const customStyle = {
|
51 | width: 10, // 每个柱子的宽度
|
52 | height: 180, // 图表容器的高度
|
53 | axisYWidth: 25, // 左面Y轴的宽度定义
|
54 | fillColor: '#82A0FA', // 柱状图的前景填充色
|
55 | backgroundColor: '#EBEDF1', // 柱状图底色背景
|
56 | raduis: 5, // 样式的圆角
|
57 | parity: 'even', // odd奇数显示 even偶数显示 all全部显示
|
58 | piecewise: 10, // Y轴度量分几段
|
59 | topAxisXShow: true, // 是否展示顶部对应的value值
|
60 | showAxisY: true, // 是否展示Y轴
|
61 | showAxisXLine: true, // 是否显示分段线
|
62 | showTopBar: true, // 是否显示顶部数值条
|
63 | borderColor: '#DCDEE5', // 表格边框
|
64 | chartStyle: { // x轴距离顶部距离
|
65 | marginTop: 10,
|
66 | },
|
67 | textStyle: {
|
68 | color: '#888', // 文本的样式
|
69 | fontSize: 10,
|
70 | },
|
71 | topTextStyle: { // 顶部文字样式
|
72 | color: 'red',
|
73 | fontSize: 14,
|
74 | },
|
75 | onClick: (obj) => { // 点击回调函数
|
76 | console.log(obj); // {id:xxx}
|
77 | },
|
78 | };
|
79 | const dataSource = [
|
80 | { x: 8, value: 7, id: 12 },
|
81 | { x: 9, value: 10, id: 13 },
|
82 | { x: 10, value: 50, id: 14 },
|
83 | { x: 11, value: 16, id: 15 },
|
84 | { x: 12, value: 89, id: 16 },
|
85 | { x: 13, value: 99, id: 17 },
|
86 | { x: 14, value: 99, id: 18 },
|
87 | { x: 15, value: 100, id: 19 },
|
88 | ];
|
89 | return (
|
90 | <BarChart dataSource={dataSource} customStyle={customStyle} />
|
91 | );
|
92 | }
|
93 | }
|
94 | export default ChartBarDemo;
|
95 | ```
|