目录

  • 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 optionlet 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 = falseclearInterval(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 optionlet 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生命周期函数详细解释

React实现动态展示柱状图相关推荐

  1. Python 快速生成 web 动态展示机器学习项目!

    来源丨网络 作者丨wedo实验君 1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点 你不需要懂html, ...

  2. JFreeChart展示柱状图和折线图的组合

    笔者最近工作需要在Web前端展示统计图表(基于SSH架构),使用了JFreeChart和amchart两个控件,谈谈使用心得.         JFreeChart的最大好处是可以在Server端保存 ...

  3. 快速生成 web app 动态展示机器学习项目

    1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点 你不需要懂html, css, js等,纯python ...

  4. react创建动态表格_教程:使用React创建电子表格

    react创建动态表格 Related content 相关内容 First steps 第一步 Build a simple spreadsheet 建立一个简单的电子表格 Introducing ...

  5. 手把手教你做出数据可视化项目(六)动态3D柱状图及其自动旋转

    数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图: 此篇博客为自己学习pink老师的课后完成的项目的总 ...

  6. React 中动态的加载组件 ---loadable-components

    loadable-components 用于在react 中动态的加载组件 安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助

  7. django jsonresponse_利用 Django 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令 ...

  8. 【ajax+php】动态展示4级单位(省、市、县、镇)

    1.本篇教程以ajax+php动态展示[省.市.县.镇]四级地区单位 2.效果图:    3.不废话,贴代码! HTML: <div class="form-group"&g ...

  9. js大屏导出图片_超大图片全屏动态展示js插件

    intense-images是一款非常实用的超大图片全屏动态展示js插件.该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好 ...

最新文章

  1. php文本分割成csv,怎么在php中将文本文件转换为csv文件并输出
  2. 设置行间距_[EndNote]如何修改文末参考文献行间距?
  3. ORACLE关闭启动的诡异错误
  4. java实现上传_文件上传(java)
  5. 编程小白的第一本python入门书-编程小白的第一本 Python 入门书
  6. Ubuntu下查看命令的源码
  7. (一)UI设计的一些常识
  8. Java:项目启动报错java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符)
  9. python使用lxml解析html获取页面内所有叶子节点的xpath路径
  10. java基础知识精讲视频教程百度云盘分享!
  11. 微信小程序头像自动生成小程序源码
  12. IDEA社区版tomcat配置教程
  13. mysql analyze_MySQL中的analyze与optimize
  14. [转]Cookie详解
  15. Windows 10用户档案无法加载的解决方法
  16. 泾阳县副县长崔巍领导一行莅临秦储指导交流
  17. html中圆角的度,cssli圆角
  18. gdal无法读取中文标题的图片的解决办法(结合Qt)
  19. 怎样在逆光和恶劣光线下拍人像
  20. 移动互联网繁荣本质是什么

热门文章

  1. MySQL 第三章3.1 数据库查询(where)
  2. 手机百度打不开html网页,手机百度网页打不开怎么办 手机百度网页打不开的解决方法...
  3. idea执行main方法都要BUILD解决
  4. 索尼相机里的照片要怎么恢复
  5. “百度杯”CTF比赛 九月场 Code
  6. Microsoft Office PPT、Word和Excel取消自动首字母大写
  7. Android修改充电图片,安卓充电提示音修改教程
  8. html实现信封效果,CSS3 带简单动画效果的信封
  9. postgresql数据库备份命令
  10. 多屏幕刷新率(refresh rate)模式下的帧显示流水线