double-axes.js
3.89 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
122
import React from 'react';
import { Button } from 'antd';
const formatter = o => {
o = `${o}`.split('.');
o[0] = o[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
return o.join('.');
};
const formatLabel = (val, isShow) => {
return isShow ? formatter(val) : '';
}
class DoubleAxes extends React.Component {
constructor() {
super();
this.state = {
clientRender: false
};
}
componentDidMount() {
import('bizcharts').then(({ Chart, Geom, Guide, Axis, Tooltip, Legend, Label }) => {
this.Chart = Chart;
this.Geom = Geom;
this.Guide = Guide;
this.Axis = Axis;
this.Tooltip = Tooltip;
this.Legend = Legend;
this.Label = Label;
this.setState({
clientRender: true
});
});
}
downloadChart() {
console.log(this);
this.chartIns && this.chartIns.downloadImage();
}
render() {
if (!this.state.clientRender) {
return <div></div>;
}
const { Chart, Geom, Guide, Axis, Tooltip, Legend, Label } = this;
const { Text } = Guide;
const { height, padding, scale, axisX, axisY, axisY2 } = this.props.options || {};
const position = axisX + '*' + axisY;
const position2 = axisX + '*' + axisY2;
return (
<div>
<div className="chart-option">
<Button shape="round" icon="download" size="small" onClick={this.downloadChart.bind(this)}>下载</Button>
</div>
<Chart
height={height}
scale={scale}
forceFit
data={this.props.data}
padding={padding}
onGetG2Instance={chartIns => {
this.chartIns = chartIns;
}}
background={{
fill: '#fff'
}}
>
<Guide>
<Text
top={true}
position={['50%', '-12%']}
content={this.props.title || ''}
style={{
fill: '#444',
fontSize: '14',
textAlign: 'center'
}}
/>
</Guide>
<Legend />
<Axis
name={axisY}
label={{ formatter }}
/>
<Axis
name={axisY2}
position="right"
grid={null}
label={{ formatter }}
/>
<Tooltip />
<Geom type="path" position={position} size={2} color="#1890ff">
<Label
content={[
axisY + '*label',
formatLabel
]}
position="bottom"
/>
</Geom>
<Geom type="point" position={position} color="#1890ff" size={3} shape="circle" />
<Geom type="line" position={position2} color="#2fc25b" size={2}>
<Label
content={[
axisY2 + '*label',
formatLabel
]}
position="top"
/>
</Geom>
<Geom type="point" position={position2} color="#2fc25b" size={3} shape="circle"/>
</Chart>
</div>
);
}
}
export default DoubleAxes;