1 | import React from 'react';
|
2 | import ReactDOM from 'react-dom';
|
3 | import G2 from '@antv/g2';
|
4 | window.G2 = G2;
|
5 | import Slider from 'bizcharts-slider'
|
6 | import { Chart, Facet } from 'bizcharts';
|
7 | import DataSet from '@antv/data-set';
|
8 | import data from './data/rain-flow.json';
|
9 |
|
10 | const ds = new DataSet({
|
11 | state: {
|
12 | start: new Date('2009/7/20 0:00').getTime(),
|
13 | end: new Date('2009/9/9 0:00').getTime()
|
14 | }
|
15 | });
|
16 |
|
17 | const originDv = ds.createView('origin');
|
18 | originDv.source(data)
|
19 | .transform({
|
20 | type: 'fold',
|
21 | fields: [ 'rain', 'flow' ],
|
22 | key: 'type',
|
23 | value: 'value',
|
24 | retains: [ 'rain', 'flow', 'time' ]
|
25 | });
|
26 |
|
27 | const chartDv = ds.createView();
|
28 | chartDv.source(originDv)
|
29 | .transform({
|
30 | type: 'fold',
|
31 | fields: [ 'rain', 'flow' ],
|
32 | key: 'type',
|
33 | value: 'value',
|
34 | retains: [ 'rain', 'flow', 'time' ]
|
35 | })
|
36 | .transform({
|
37 | type: 'filter',
|
38 | callback(obj) {
|
39 | const time = new Date(obj.time).getTime();
|
40 | return time >= ds.state.start && time <= ds.state.end;
|
41 | }
|
42 | });
|
43 |
|
44 | const scale = {
|
45 | time: {
|
46 | type: 'time',
|
47 | tickCount: 10,
|
48 | mask: 'M/DD H:mm'
|
49 | }
|
50 | };
|
51 |
|
52 | export default class SliderChart extends React.Component {
|
53 | constructor(props) {
|
54 | super(props);
|
55 |
|
56 | this.state = {
|
57 | width: "auto",
|
58 | scale: scale,
|
59 | filler: {
|
60 | fill: '#BDCCED',
|
61 | fillOpacity: 0.3
|
62 | }
|
63 | };
|
64 | }
|
65 |
|
66 | componentDidMount() {
|
67 | setTimeout((function(){
|
68 | this.setState({
|
69 | filler: {
|
70 | fill: '#ff0000',
|
71 | fillOpacity: 0.3
|
72 | }
|
73 | });
|
74 | }).bind(this), 2000)
|
75 | }
|
76 |
|
77 | onChange = (obj) => {
|
78 | const { startValue, endValue, startText, endText } = obj;
|
79 | ds.setState('start', startValue);
|
80 | ds.setState('end', endValue);
|
81 | }
|
82 |
|
83 | render() {
|
84 | return (
|
85 | <div>
|
86 | <Chart height={window.innerHeight - 40} data={chartDv} padding={[20, 20, 0, 80]} scale={scale} forceFit>
|
87 | <Facet type='mirror' fields={['type']} showTitle={false} padding={[0, 0, 40, 0]}
|
88 | eachView={(view, facet)=>{
|
89 | const { colValue, data } = facet;
|
90 | let color;
|
91 | let alias;
|
92 | if (colValue === 'rain') {
|
93 | color = '#1890ff';
|
94 | alias = '降雨量(mm)';
|
95 |
|
96 | } else if (colValue === 'flow') {
|
97 | color = '#2FC25B';
|
98 | alias = '流量(m^3/s)';
|
99 | }
|
100 | view.source(data, {
|
101 | [`${colValue}`]: {
|
102 | alias
|
103 | }
|
104 | });
|
105 | view.axis(colValue, {
|
106 | title: {
|
107 | autoRotate: false,
|
108 | offset: -10,
|
109 | position: 'end',
|
110 | textStyle: {
|
111 | textAlign: 'start'
|
112 | }
|
113 | }
|
114 | });
|
115 | view.line().position('time*' + colValue).color(color);
|
116 | }}>
|
117 | </Facet>
|
118 | </Chart>
|
119 | <div>
|
120 | <Slider fillerStyle={this.state.filler} width={this.state.width} height={26} start={ds.state.start} end={ds.state.end}
|
121 | xAxis="time" yAxis='value' scales={this.state.scale} data={originDv}
|
122 | backgroundChart={{type: 'line'}}
|
123 | onChange={this.onChange}
|
124 | />
|
125 | </div>
|
126 | </div>
|
127 | );
|
128 | }
|
129 | }
|
130 |
|
131 |
|
132 | ReactDOM.render((
|
133 | <SliderChart />
|
134 | ), document.getElementById('root'));
|