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
| import React, { useRef, useState } from 'react';
| import { Card } from 'antd';
| import useEcharts from './useEcharts';
|
| const HazardTypeBar = ({ data, style }) => {
| const barRef = useRef(null);
| const [hover, setHover] = useState(false);
| // 自动生成option
| const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
| const option = {
| backgroundColor: 'transparent',
| color: colors,
| tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
| grid: { left: 30, right: 20, top: 30, bottom: 20 },
| xAxis: {
| type: 'category',
| data: data.map(d => d.name),
| axisLabel: { show: false },
| axisLine: { lineStyle: { color: '#00eaff' } },
| },
| yAxis: {
| type: 'value',
| axisLabel: { color: '#00eaff', fontSize: 14 },
| splitLine: { lineStyle: { color: '#1e2334' } },
| },
| series: [{
| data: data.map(d => d.value),
| type: 'bar',
| barWidth: 36,
| itemStyle: {
| color: (params) => colors[params.dataIndex % colors.length],
| borderRadius: [8, 8, 0, 0],
| },
| label: {
| show: true,
| position: 'insideBottom',
| rotate: 90,
| align: 'left',
| verticalAlign: 'middle',
| distance: 15,
| fontSize: 14,
| color: '#fff',
| formatter: function (params) {
| return `${params.name}：${params.value}`;
| }
| },
| animation: false
| }]
| };
| useEcharts(barRef, option);
| return (
| <Card
| className="datav-card"
| bordered={false}
| style={{
| flex: 1,
| background: 'linear-gradient(135deg, rgba(10,20,40,0.92) 60%, rgba(0,34,64,0.88) 100%)',
| boxShadow: hover ? '0 0 24px #00eaff99, 0 0 48px #00eaff44' : '0 0 24px 0 #00eaff55, 0 0 0 2px #00eaff22 inset',
| border: hover ? '2.5px solid #00eaff' : '2px solid transparent',
| borderRadius: 20,
| overflow: 'hidden',
| padding: 0,
| transform: hover ? 'scale(1.045)' : 'none',
| transition: 'all 0.22s cubic-bezier(.4,2,.6,1)',
| cursor: 'pointer',
| ...style
| }}
| onMouseEnter={() => setHover(true)}
| onMouseLeave={() => setHover(false)}
| >
| <div style={{ color: '#00eaff', fontWeight: 'bold', fontSize: 16, textAlign: 'center', marginBottom: 0, letterSpacing: 2 }}>隐患类型分布</div>
| <div ref={barRef} style={{ width: '100%', height: 260 }} />
| </Card>
| );
| };
| export default HazardTypeBar;
|
|
