React实现动态展示柱状图

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) => { 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 (

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生命周期函数详细解释​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。