React实现动态展示柱状图
目录
- 1. 效果展示
- 2. 需求说明
- 3. 设计思路
- 4. 代码展示
-
- 4.1 获取数据
- 4.2 绘制柱状图
- 4.3 动态更新柱状图
- 4.4 完整代码
- 4.5 测试数据
- 5. 参考文献
1. 效果展示
2. 需求说明
我们需要实现一个动态展示的柱状图，数据来源于本地的json数据，我们需要每读取一条数据然后每隔一秒刷新然后展示第二条数据，直到数据读取完毕停止更新。
3. 设计思路
根据上面提到的需求，自己设计了一个思路来实现，如下所示：
1）获取本地的json数据
2）绘制柱状图
3）动态更新柱状图的数据
4）终止迭代数据
从这四方面着手实现这个功能，下面通过代码来解释。
4. 代码展示
4.1 获取数据
//使用这种方法需要安装axios
// yarn add axios 或者 npm install axios --save
// 导入包
import axios from 'axios';
axios.get('./mock/ml.json')
.then(function (response) {
ml = response.data.data;
})
.catch(function (error) {
console.log(error);
})
4.2 绘制柱状图
// dd,num1,num2,num3,num4是我们自己从传入的参数，根据传入参数改变柱状图状态
initMap = (dd, num1, num2, num3, num4) => {
let option
let myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '攻击2效果展示'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: false},
restore: {
},
saveAsImage: {
}
}
},
legend: {
data: ['A', 'B', 'C', 'D']
},
xAxis: {
data: [dd]
},
yAxis: {
type: 'value'
},
series: [
{
name: 'A',
type: 'bar',
barWidth: '15%',
data: [num1]
},
{
name: 'B',
type: 'bar',
barWidth: '15%',
data: [num2]
},
{
name: 'C',
type: 'bar',
barWidth: '15%',
data: [num3]
},
{
name: 'D',
type: 'bar',
barWidth: '15%',
data: [num4]
}
]
}
myChart.setOption(option); // 绘制画布
}
4.3 动态更新柱状图
// 通过使用一个定时器每隔一秒来刷新数据,为什么在componentDidMount()使用定时器？可参考文献3,这里不解释
componentDidMount() {
let i = 0;
this.initMap(0, 10520, 0, 10520, 0) // 初始时显示第一条数据
this.timer = setInterval(() => {
i++;
if (i == ml.length - 1) {
// 数据读取完毕的时候将定时器去除
clearInterval(this.timer);
}
this.initMap(ml[i].dd, ml[i].num[0], ml[i].num[1], ml[i].num[2], ml[i].num[3]);
}, 1000) // 设置定时器每隔一秒刷新一次数据
}
4.4 完整代码
import React from 'react'
import {
Layout, Divider, Card} from 'antd'
import CustomBreadcrumb from '@/components/CustomBreadcrumb'
import * as echarts from 'echarts';
import axios from 'axios';
import ReactEcharts from "echarts-for-react";
let ml = []
axios.get('./mock/ml.json')
.then(function (response) {
ml = response.data.data;
})
.catch(function (error) {
console.log(error);
})
class Attack2View extends React.Component {
constructor(props) {
super(props);
this.state = {
mlList: [],
}
}
componentDidMount() {
let i = 0;
this.initMap(0, 10520, 0, 10520, 0) // 初始时显示第一条数据
this.timer = setInterval(() => {
i++;
if (i == ml.length - 1) { // 数据读取完毕的时候将定时器去除
// flag = false
clearInterval(this.timer);
}
this.initMap(ml[i].dd, ml[i].num[0], ml[i].num[1], ml[i].num[2], ml[i].num[3]);
}, 1000) // 设置定时器每隔一秒刷新一次数据
}
initMap = (dd, num1, num2, num3, num4) => {
let option
let myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '攻击2效果展示'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: false},
restore: {
},
saveAsImage: {
}
}
},
legend: {
data: ['A', 'B', 'C', 'D']
},
xAxis: {
data: [dd]
},
yAxis: {
type: 'value'
},
series: [
{
name: 'A',
type: 'bar',
barWidth: '15%',
data: [num1]
},
{
name: 'B',
type: 'bar',
barWidth: '15%',
data: [num2]
},
{
name: 'C',
type: 'bar',
barWidth: '15%',
data: [num3]
},
{
name: 'D',
type: 'bar',
barWidth: '15%',
data: [num4]
}
]
}
myChart.setOption(option); // 绘制画布
}
render() {
return (
<Layout>
<div>
<CustomBreadcrumb arr={
['数据安全', '攻击', '成员推理攻击', 'ML-攻击2']}></CustomBreadcrumb>
</div>
<div>
{
/*<ReactEcharts option={
this.initMap()} style={
{
flex: 1,height:'400px',width:'700px' }}/>*/}
<div id="main" style={
{
flex: 1, height: '400px', width: '700px'}}></div>
</div>
</Layout>
)
}
}
export default Attack2View
4.5 测试数据
{
"success": true,
"msg": "",
"data": [
{
"dd": 0,
"num": [
10520,
0,
10520,
0
]
},
{
"dd": 1,
"num": [
5194,
5326,
1,
10519
]
},
{
"dd": 2,
"num": [
5731,
4789,
2,
10518
]
},
{
"dd": 3,
"num": [
6059,
4461,
4,
10516
]
},
{
"dd": 4,
"num": [
6312,
4208,
7,
10513
]
},
{
"dd": 5,
"num": [
6437,
4083,
14,
10506
]
},
{
"dd": 6,
"num": [
6675,
3845,
28,
10492
]
},
{
"dd": 7,
"num": [
6588,
3932,
23,
10497
]
},
{
"dd": 8,
"num": [
6725,
3795,
29,
10491
]
},
{
"dd": 9,
"num": [
6805,
3715,
38,
10482
]
},
{
"dd": 10,
"num": [
7045,
3475,
79,
10441
]
},
{
"dd": 11,
"num": [
6935,
3585,
56,
10464
]
},
{
"dd": 12,
"num": [
6928,
3592,
56,
10464
]
},
{
"dd": 13,
"num": [
7024,
3496,
67,
10453
]
},
{
"dd": 14,
"num": [
6926,
3594,
56,
10464
]
},
{
"dd": 15,
"num": [
6971,
3549,
58,
10462
]
},
{
"dd": 16,
"num": [
7004,
3516,
63,
10457
]
},
{
"dd": 17,
"num": [
7020,
3500,
65,
10455
]
},
{
"dd": 18,
"num": [
7027,
3493,
67,
10453
]
},
{
"dd": 19,
"num": [
7181,
3339,
111,
10409
]
},
{
"dd": 20,
"num": [
7165,
3355,
106,
10414
]
},
{
"dd": 21,
"num": [
6994,
3526,
60,
10460
]
},
{
"dd": 22,
"num": [
7037,
3483,
70,
10450
]
},
{
"dd": 23,
"num": [
7114,
3406,
100,
10420
]
},
{
"dd": 24,
"num": [
7197,
3323,
117,
10403
]
},
{
"dd": 25,
"num": [
7099,
3421,
94,
10426
]
},
{
"dd": 26,
"num": [
7037,
3483,
72,
10448
]
},
{
"dd": 27,
"num": [
7135,
3385,
105,
10415
]
},
{
"dd": 28,
"num": [
7012,
3508,
64,
10456
]
},
{
"dd": 29,
"num": [
7053,
3467,
74,
10446
]
},
{
"dd": 30,
"num": [
7076,
3444,
80,
10440
]
},
{
"dd": 31,
"num": [
7259,
3261,
143,
10377
]
},
{
"dd": 32,
"num": [
7127,
3393,
100,
10420
]
},
{
"dd": 33,
"num": [
7152,
3368,
104,
10416
]
},
{
"dd": 34,
"num": [
7152,
3368,
104,
10416
]
},
{
"dd": 35,
"num": [
7063,
3457,
77,
10443
]
},
{
"dd": 36,
"num": [
7147,
3373,
104,
10416
]
},
{
"dd": 37,
"num": [
7070,
3450,
79,
10441
]
},
{
"dd": 38,
"num": [
7292,
3228,
153,
10367
]
},
{
"dd": 39,
"num": [
7135,
3385,
101,
10419
]
},
{
"dd": 40,
"num": [
7051,
3469,
76,
10444
]
},
{
"dd": 41,
"num": [
7154,
3366,
104,
10416
]
},
{
"dd": 42,
"num": [
7185,
3335,
112,
10408
]
},
{
"dd": 43,
"num": [
7071,
3449,
80,
10440
]
},
{
"dd": 44,
"num": [
7157,
3363,
105,
10415
]
},
{
"dd": 45,
"num": [
7173,
3347,
109,
10411
]
},
{
"dd": 46,
"num": [
7140,
3380,
99,
10421
]
},
{
"dd": 47,
"num": [
7117,
3403,
90,
10430
]
},
{
"dd": 48,
"num": [
7138,
3382,
96,
10424
]
},
{
"dd": 49,
"num": [
7139,
3381,
97,
10423
]
},
{
"dd": 50,
"num": [
7101,
3419,
87,
10433
]
}
]
}
5. 参考文献
1. echarts官方文档
2. echarts绘制动态柱状图
3. React生命周期函数详细解释