Skip to content

Commit 827be78

Browse files
introvert-yintrovert-y
committed
echart
1 parent df0e0e6 commit 827be78

File tree

8 files changed

+10538
-1
lines changed

8 files changed

+10538
-1
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"css-loader": "2.1.1",
1818
"dotenv": "6.2.0",
1919
"dotenv-expand": "4.2.0",
20+
"echarts": "^4.3.0",
2021
"eslint": "^6.1.0",
2122
"eslint-config-react-app": "^5.0.0",
2223
"eslint-loader": "2.2.1",

‎src/echarts/china.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/echarts/index.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// import echarts from 'echarts';
2+
import echarts from 'echarts/lib/echarts';
3+
4+
import 'echarts/lib/chart/line';
5+
import 'echarts/lib/chart/bar';
6+
import 'echarts/lib/chart/lines';
7+
import 'echarts/lib/chart/pie';
8+
import 'echarts/lib/chart/effectScatter';
9+
import 'echarts/lib/chart/map';
10+
import 'echarts/lib/chart/scatter';
11+
12+
import 'echarts/lib/component/geo';
13+
import 'echarts/lib/component/title';
14+
import 'echarts/lib/component/tooltip';
15+
import 'echarts/lib/component/legend';
16+
import 'echarts/lib/component/axis';
17+
import 'echarts/lib/component/grid';
18+
import 'echarts/lib/component/visualMap';
19+
import 'echarts/lib/component/dataZoom';
20+
21+
import chinaJson from './china';
22+
23+
echarts.registerMap('china', chinaJson);
24+
25+
export default echarts;

‎src/page/Optimize/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState } from 'react';
22
import styled from 'styled-components';
33
import { CSSTransition } from 'react-transition-group'
44

‎src/page/echartBox/index.js

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import React, {
2+
useCallback, useRef,
3+
} from 'react';
4+
import echarts from '../../echarts';
5+
6+
function percent(n, toFixed) {
7+
const fixed = toFixed || 0;
8+
if (!n) {
9+
return 0;
10+
}
11+
const p = n * 100;
12+
return p.toFixed(fixed) - 0;
13+
}
14+
15+
function initChart(inst, opt = {}) {
16+
if (!inst) {
17+
return;
18+
}
19+
const barLimit = 10;
20+
const list = [
21+
{"id":"0b2f954dd73e11e882c6246e96766f00","projectId":null,"projectName":null,"groupName":"刘骞的班组","groupId":null,"workerId":null,"workerName":null,"workerImage":null,"workers":0,"attendances":12,"absent":0,"lates":0,"exception":0,"regular":11,"lateEarlyCounts":1,"present":16},
22+
{"id":"afa94465633311e9ba1c6c92bf628924","projectId":null,"projectName":null,"groupName":"未激活测试","groupId":null,"workerId":null,"workerName":null,"workerImage":null,"workers":0,"attendances":0,"absent":0,"lates":0,"exception":0,"regular":0,"lateEarlyCounts":0,"present":0},
23+
{"id":"5bfb1a6875ae11e9ba1c6c92bf628924","projectId":null,"projectName":null,"groupName":"老五六","groupId":null,"workerId":null,"workerName":null,"workerImage":null,"workers":0,"attendances":0,"absent":0,"lates":0,"exception":0,"regular":0,"lateEarlyCounts":0,"present":4},
24+
{"id":"7ea9baaf8d8511e984726c92bf621f6e","projectId":null,"projectName":null,"groupName":"才哥班组","groupId":null,"workerId":null,"workerName":null,"workerImage":null,"workers":0,"attendances":0,"absent":0,"lates":0,"exception":0,"regular":0,"lateEarlyCounts":0,"present":0},
25+
{"id":"4398cae28d8411e984726c92bf621f6e","projectId":null,"projectName":null,"groupName":"楚莹班组","groupId":null,"workerId":null,"workerName":null,"workerImage":null,"workers":0,"attendances":0,"absent":0,"lates":0,"exception":0,"regular":0,"lateEarlyCounts":0,"present":1},
26+
{"id":"be62cc2086a611e984726c92bf621f6e","projectId":null,"projectName":null,"groupName":"测试","groupId":null,"workerId":null,"workerName":null,"workerImage":null,"workers":0,"attendances":0,"absent":0,"lates":0,"exception":0,"regular":0,"lateEarlyCounts":0,"present":1},
27+
{"id":"7c39c027adb911e984726c92bf621f6e","projectId":null,"projectName":null,"groupName":"测试1","groupId":null,"workerId":null,"workerName":null,"workerImage":null,"workers":0,"attendances":0,"absent":0,"lates":0,"exception":0,"regular":0,"lateEarlyCounts":0,"present":0}
28+
]
29+
const option = {
30+
legend: {
31+
data: [
32+
{
33+
name: '正常',
34+
icon: 'roundRect',
35+
},
36+
{
37+
name: '迟到早退',
38+
icon: 'roundRect',
39+
},
40+
],
41+
itemWidth: 16,
42+
itemHeight: 8,
43+
itemGap: 81,
44+
textStyle: {
45+
color: 'rgba(255, 255, 255, 0.6)',
46+
},
47+
bottom: 0,
48+
},
49+
textStyle: {
50+
color: '#fff',
51+
},
52+
grid: {
53+
left: '3%',
54+
right: 100,
55+
bottom: '13%',
56+
top: 0,
57+
containLabel: true,
58+
},
59+
dataZoom: [
60+
{
61+
type: 'slider',
62+
show: false,
63+
yAxisIndex: [0],
64+
filterMode: 'filter',
65+
zoomLock: true,
66+
startValue: 0,
67+
endValue: barLimit - 1,
68+
right: 0,
69+
textStyle: {
70+
color: '#fff',
71+
},
72+
handleIcon: 'none',
73+
labelFormatter: '',
74+
width: 10,
75+
fillerColor: '#354f77',
76+
borderColor: 'rgba(0, 0, 0, 0)',
77+
},
78+
],
79+
xAxis: {
80+
type: 'value',
81+
show: false,
82+
max: 100,
83+
splitLine: {
84+
show: false,
85+
},
86+
axisLine: {
87+
show: false,
88+
},
89+
axisLabel: {
90+
show: false,
91+
},
92+
},
93+
yAxis: {
94+
type: 'category',
95+
data: list.map(p => (p.groupName.length > 7 ? `${p.groupName.substr(0, 7)}…` : p.groupName)),
96+
axisLine: {
97+
show: false,
98+
},
99+
axisTick: {
100+
show: false,
101+
},
102+
inverse: true,
103+
max: barLimit - 1,
104+
},
105+
barWidth: 7,
106+
series: [
107+
{
108+
type: 'bar',
109+
data: list.map(() => 100),
110+
color: 'rgba(255, 255, 255, .2)',
111+
barGap: '-100%',
112+
label: {
113+
show: true,
114+
position: 'right',
115+
formatter(params) {
116+
const {
117+
attendances, present,
118+
} = list[params.dataIndex];
119+
return `${(attendances > present) ? 100 : percent(attendances / (present || 1))}% ${attendances}人`;
120+
},
121+
align: 'right',
122+
distance: 100,
123+
padding: [0, 20, 0, 0],
124+
},
125+
},
126+
{
127+
name: '正常',
128+
type: 'bar',
129+
stack: true,
130+
data: list.map((p) => {
131+
const { regular, attendances, present } = p;
132+
return (attendances > present)
133+
? (regular / attendances * 100)
134+
: (regular / (present || 1) * 100);
135+
}),
136+
color: '#007df9',
137+
},
138+
{
139+
name: '迟到早退',
140+
type: 'bar',
141+
stack: true,
142+
data: list.map((p) => {
143+
const { lateEarlyCounts, attendances, present } = p;
144+
return (attendances > present)
145+
? (lateEarlyCounts / attendances * 100)
146+
: (lateEarlyCounts / (present || 1) * 100);
147+
}),
148+
color: '#fdd966',
149+
},
150+
],
151+
}
152+
inst.setOption(option, opt);
153+
}
154+
155+
function DataChart() {
156+
const myChart = useRef(null);
157+
const chartDOMRef = useCallback((el) => {
158+
if (el) {
159+
if (!myChart.current) {
160+
myChart.current = echarts.init(el);
161+
}
162+
initChart(myChart.current, {
163+
notMerge: true,
164+
});
165+
} else {
166+
if (!myChart.current) {
167+
return;
168+
}
169+
myChart.current.dispose();
170+
}
171+
}, []);
172+
173+
return (
174+
<>
175+
<div style={{ marginLeft: 50 }}>series数组里的对象可以有formatter</div>
176+
<div ref={chartDOMRef} style={{ height: 300, backgroundColor: 'lightpink' }} />
177+
</>
178+
);
179+
}
180+
181+
182+
export default DataChart;

‎src/page/module/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33

44
class Page extends React.Component {
55
constructor(props) {
6+
super(props);
67
this.state = {
78
}
89
}

‎src/router/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Home from '../page/CssTest/index'
88
import Counter from '../page/Counter/index'
99
import Single from '../page/Single/index'
1010
import Optimize from '../page/Optimize/index'
11+
import EchartBox from '../page/echartBox/index'
1112

1213
function Header() {
1314
return (
@@ -41,6 +42,9 @@ function Header() {
4142
<li>
4243
<Link to="/optimize">性能优化之shouldComponentUpdate,及第三方动画库做简单动画</Link>
4344
</li>
45+
<li>
46+
<Link to="/echart">echart的简单应用</Link>
47+
</li>
4448
</ul>
4549
);
4650
}
@@ -61,6 +65,7 @@ function App() {
6165
<Route path="/counter" component={Counter} />
6266
<Route path="/single" component={Single} />
6367
<Route path="/optimize" component={Optimize} />
68+
<Route path="/echart" component={EchartBox} />
6469
</Switch>
6570
</div>
6671
</BrowserRouter>

0 commit comments

Comments
 (0)