index.js
2.53 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* eslint-disable no-undef */
import React, { PureComponent } from 'react';
import { Chart } from '@antv/g2';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import equal from '../equal';
class BrokenLine extends PureComponent {
componentDidMount() {
this.renderChart(this.props.data);
window.addEventListener('resize', this.resize);
}
componentWillReceiveProps(nextProps) {
if (!equal(this.props, nextProps)) {
this.renderChart(nextProps.data);
}
}
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([]);
}
handleRef = (n) => {
this.node = n;
};
renderChart(data) {
if (this.node.offsetWidth === 0) {
return;
}
const {
xUnit = '', yUnit = '', height, style,
} = this.props;
const textMyStyle = {};
if (style !== undefined) {
if (style.color !== undefined) {
textMyStyle.fill = style.color;
}
}
if (!data || (data && data.length < 1)) return;
if (this.chart) {
this.chart.destroy();
}
this.node.innerHTML = '';
const chart = new Chart({
container: this.node,
autoFit: true, /* 图标自适应 */
height,
padding: 'auto',
});
chart.axis('x', {
label: {
formatter: (val) => {
return `${val}${xUnit}`;
},
textStyle: textMyStyle,
},
});
chart.axis('y', {
label: {
formatter: (val) => {
return `${val}${yUnit}`;
},
textStyle: textMyStyle,
},
});
chart.option('slider', {
start: 0.9,
end: 1,
trendCfg: {
isArea: false,
},
});
chart.data(data);
chart.tooltip({
showCrosshairs: true,
shared: true,
});
chart.line().position('x*y').color('type').tooltip('x*y*type', (name, value, type) => {
return {
title: `${name}${xUnit}`,
name: type,
value: `${value}${yUnit}`,
};
});
chart
.point()
.position('x*y')
.color('type')
.size(4)
.shape('circle')
.style({ stroke: '#fff', lineWidth: 1 });
chart.render();
this.chart = chart;
}
render() {
const { height } = this.props;
return (
<div style={{ height }}>
<div ref={this.handleRef} />
</div>
);
}
}
export default BrokenLine;