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
| import React, { useEffect, useState } from 'react';
| import * as echarts from 'echarts/core';
| import ReactECharts from 'echarts-for-react';
|
| const CapacityCharts = () => {
| const [data, setData] = useState([]);
|
| const options = {
| title: {
| text: '一周库容曲线图',
| top: 16,
| left: 16,
| textStyle: {
| color: '#FBFBFB',
| //字体风格,'normal','italic','oblique'
| fontStyle: 'normal',
| //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
| fontWeight: 'bold',
| //字体系列
| fontFamily: 'sans-serif',
| //字体大小
| fontSize: 15,
| },
| },
| xAxis: {
| type: 'category',
| boundaryGap: false,
| splitLine: {
| show: true,
| lineStyle: {
| color: '#414348',
| },
| },
| axisLabel: {
| textStyle: {
| color: 'white',
| },
| },
| axisLine: {
| show: false,
| },
| data: data.map((item) => item.reportDate.split(' ')[0]),
| },
| yAxis: {
| type: 'value',
| splitLine: {
| show: false,
| },
| },
| grid: {
| x: 50,
| y: 50,
| x2: 20,
| y2: 30,
| },
| series: [
| {
| data: data.map((item) => item.emptyLocationTotal),
| type: 'line',
| smooth: true,
| lineStyle: {
| color: '#06CDCE',
| },
| areaStyle: {
| normal: {
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
| { offset: 0, color: '#06CDCE' },
| { offset: 1, color: '#06CDCE00' },
| ]),
| },
| },
| },
| ],
| };
|
| return <ReactECharts option={options} />;
| }
| export default CapacityCharts;
|
|
