# 在React和Vue中使用ECharts
本文记录在
React和Vue中使用ECharts的配置要点。
# 一、在React中使用ECharts
# 要点
React.createRef()：使用此方法创建ref，并赋值给一个变量，作为属性放到Render()里面的一个节点中。可以通过这个变量的
current属性可以获取到这个节点的DOM实例。// 伪代码 完整版在下面 this.staticChart_dom = React.createRef(); ... render() { return ( <div className="chart-view"> <div className="my-style" ref={this.staticChart_dom}></div> </div> ); } ... this.staticChart = echarts.init(this.staticChart_dom.current);// this.staticChart_dom.current1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16onresize()：监听页面缩放变化，resize每个图表，做到自适应。// 伪代码 完整版在下面 onresize () { this.staticChart.resize(); } ... // 组件第一次渲染后调用 组件已经挂载至DOM componentDidMount() { window.addEventListener("resize", this.onresize);// 组件挂载后添加监听 } // 组件销毁时调用 componentWillUnmount() { window.removeEventListener("resize", this.onresize);// 组件销毁前删除监听 }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16componentDidMount()：在生命周期函数componentDidMount执行时，该组件已经挂载至DOM，此时也可以用document.getElementById('my-chart')来获取DOM实例。
# 完整版代码
直接查看完整版代码👇。
展开查看完整代码
省略部分不必要内容。。
import React from "react";
import echarts from "echarts";
// import "echarts/lib/chart/bar";// 按需引入 柱状图
// import "echarts/lib/component/grid";// 按需引入 grid组件
import { getStaticChartData } from "./api.jsx";
class ChartView extends React.Component {
constructor (props) {
super(props);
this.state = {
StaticChartData: null,
};
this.staticChart_dom = React.createRef();
this.staticChart = null;
}
onresize () {
this.staticChart.resize();
}
// 获取数据
async getStaticChartData () {
getStaticChartData().then(res => {
this.setState({ StaticChartData: res }, () => {
this.set_staticChart();
});
});
}
// 组件第一次渲染后调用 组件已经挂载至DOM
componentDidMount() {
window.addEventListener("resize", this.onresize);
this.getStaticChartData();
}
// 组件销毁时调用
componentWillUnmount() {
window.removeEventListener("resize", this.onresize);
}
render () {
return (
<div className="chart-view">
<div className="my-style" ref={this.staticChart_dom}></div>
</div>
);
}
set_staticChart () {
if (!this.staticChart) {
this.staticChart = echarts.init(this.staticChart_dom.current);
}
this.staticChart.setOption(this.staticChartOption(this.state.StaticChartData), true);
this.staticChart.resize();
}
staticChartOption (datas) {
return {
// echarts 配置项
title: {...},
...
}
}
export { ChartView };
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
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
# 二、在Vue中使用ECharts
# 要点
获取
DOM实例两种方式：// 通过ID 在生命周期函数mounted()执行时，组件已经挂载到DOM节点 <div id="my-chart"></div> let myChart = echarts.init(document.getElementById('my-chart')); // 通过 this.$refs $refs是所有注册过ref的一个集合 <div ref="myChart"></div> let myChart = echarts.init(this.$refs.myChart);1
2
3
4
5
6
7引入
ECharts：局部引入：如果只想在部分页面中使用
ECharts，可以在组件中引入import echarts from "echarts"；全局引入：觉得每个组件都要引入太麻烦可以使用全局引入。在各组件中写成
this.$echarts就可以了。// main.js import echarts from "echarts"; Vue.prototype.$echarts = echarts;1
2
3
4按需引入：若项目大小有限制，可以按需引入来减小打包时的大小。
// main.js const echarts = require("echarts/lib/echarts"); require("echarts/lib/chart/line"); require("echarts/lib/component/grid"); Vue.prototype.$echarts = echarts;1
2
3
4
5
6
# 完整版代码
展开查看完整版代码
<!-- ChartView.vue -->
<template>
<div id="my-chart" ref="myChart"></div>
</template>
<script>
import echarts from "echarts";
export default {
name: 'ChartView',
data () {
return {
myChart: null
}
},
mounted(){
this.set_staticChart();
},
methods: {
set_staticChart() {
this.myChart = echarts.init(document.getElementById('my-chart'));// 初始化 两种获取DOM实例方式
// this.myChart = echarts.init(this.$refs.myChart);
myChart.setOption({...});
}
}
}
</script>
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
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