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 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实现动态展示柱状图相关推荐
- Python 快速生成 web 动态展示机器学习项目!
来源丨网络 作者丨wedo实验君 1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点 你不需要懂html, ...
- JFreeChart展示柱状图和折线图的组合
笔者最近工作需要在Web前端展示统计图表(基于SSH架构),使用了JFreeChart和amchart两个控件,谈谈使用心得. JFreeChart的最大好处是可以在Server端保存 ...
- 快速生成 web app 动态展示机器学习项目
1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点 你不需要懂html, css, js等,纯python ...
- react创建动态表格_教程:使用React创建电子表格
react创建动态表格 Related content 相关内容 First steps 第一步 Build a simple spreadsheet 建立一个简单的电子表格 Introducing ...
- 手把手教你做出数据可视化项目(六)动态3D柱状图及其自动旋转
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图: 此篇博客为自己学习pink老师的课后完成的项目的总 ...
- React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件 安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
- django jsonresponse_利用 Django 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令 ...
- 【ajax+php】动态展示4级单位(省、市、县、镇)
1.本篇教程以ajax+php动态展示[省.市.县.镇]四级地区单位 2.效果图: 3.不废话,贴代码! HTML: <div class="form-group"&g ...
- js大屏导出图片_超大图片全屏动态展示js插件
intense-images是一款非常实用的超大图片全屏动态展示js插件.该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好 ...
最新文章
- php文本分割成csv,怎么在php中将文本文件转换为csv文件并输出
- 设置行间距_[EndNote]如何修改文末参考文献行间距?
- ORACLE关闭启动的诡异错误
- java实现上传_文件上传(java)
- 编程小白的第一本python入门书-编程小白的第一本 Python 入门书
- Ubuntu下查看命令的源码
- (一)UI设计的一些常识
- Java:项目启动报错java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符)
- python使用lxml解析html获取页面内所有叶子节点的xpath路径
- java基础知识精讲视频教程百度云盘分享!
- 微信小程序头像自动生成小程序源码
- IDEA社区版tomcat配置教程
- mysql analyze_MySQL中的analyze与optimize
- [转]Cookie详解
- Windows 10用户档案无法加载的解决方法
- 泾阳县副县长崔巍领导一行莅临秦储指导交流
- html中圆角的度,cssli圆角
- gdal无法读取中文标题的图片的解决办法(结合Qt)
- 怎样在逆光和恶劣光线下拍人像
- 移动互联网繁荣本质是什么
热门文章
- MySQL 第三章3.1 数据库查询(where)
- 手机百度打不开html网页,手机百度网页打不开怎么办 手机百度网页打不开的解决方法...
- idea执行main方法都要BUILD解决
- 索尼相机里的照片要怎么恢复
- “百度杯”CTF比赛 九月场 Code
- Microsoft Office PPT、Word和Excel取消自动首字母大写
- Android修改充电图片,安卓充电提示音修改教程
- html实现信封效果,CSS3 带简单动画效果的信封
- postgresql数据库备份命令
- 多屏幕刷新率(refresh rate)模式下的帧显示流水线