index.js
2.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { PureComponent } from 'react';
import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import equal from '../equal';
class EqualColumnarStack extends PureComponent {
componentDidMount() {
this.renderChart(this.props);
window.addEventListener('resize', this.resize);
}
componentWillReceiveProps(nextProps) {
if (!equal(this.props, nextProps)) {
this.renderChart(nextProps);
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
if (this.chart) {
this.chart.destroy();
}
this.resize.cancel();
}
@Bind()
@Debounce(200)
resize() {
if (!this.node) {
return;
}
this.renderChart(this.props);
}
handleRef = (n) => {
this.node = n;
};
renderChart(props) {
const {
fields, yName: value, xName: currkey, onChartClick, chartName, height,
} = props;
const ds = new DataSet();
const dv = ds.createView().source(props.data);
dv.transform({
type: 'fold',
fields,
key: currkey,
value,
});
if (this.chart) {
this.chart.destroy();
}
this.node.innerHTML = '';
const chart = new Chart({
container: this.node,
autoFit: true,
height,
});
chart.data(dv.rows);
chart.axis(currkey, {
label: {
autoHide: false, // 关闭label默认的自动隐藏
autoEllipsis: false, // 关闭lable自动省略
autoRotate: true, // 关闭默认的label超长自动旋转 默认时右下45度旋转
formatter: (val) => {
return `${val}`;
},
},
});
chart.interval().adjust('stack')
.position(`${currkey}*${value}`)
.color('name');
/* .active(true)
.tooltip(false); */
chart.on('interval:dblclick', (ev) => {
const cdata = ev.data;
if (cdata) {
const { data } = cdata;
onChartClick(chartName, data);
}
});
chart.render();
this.chart = chart;
}
render() {
return (
<div ref={this.handleRef} />
);
}
}
export default EqualColumnarStack;