# React整合ECharts
# 创建React应用
npx create-react-app react-echarts
cd react-echarts
npm start
1
2
3
2
3
# 下载echarts
npm install echarts --save-dev
1
# 引入echarts
import echarts from 'echarts';
1
# 在src目录下创建存放组件的文件夹components，编写LineChartStacked组件
import React , {Component} from 'react';
import echarts from 'echarts';
class LineChartStacked extends Component{
constructor(props) {
super(props);
this.state = {
id:Math.random().toString(),
};
}
componentDidMount(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById(this.state.id));
let option = {
title: {
text: this.props.title
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 绘制图表
myChart.setOption(option);
}
render(){
return (
<div id={this.state.id} style={{width:'100%',height:500}}>
</div>
);
}
}
export default LineChartStacked;
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
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
# 在App.js中引入组件
import React , {Component} from 'react';
import LineChartStacked from './components/LineChartStacked';
class App extends Component{
render(){
return (
<div className="App">
<LineChartStacked title="折线图堆叠"/>
</div>
);
}
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15