基于vue的可视化大屏

 

 要提前准备一个xinyang.json文件

可以在这个网站下载

DataV.GeoAtlas地理小工具系列 (aliyun.com)

 代码结构

总框架代码:

<template><div><div class="center"><center-left /><center-map /><center-right /></div><div class="bottom"></div></div>
</template><script>
import centerLeft from "./components/centerLeft.vue";
import centerRight from "./components/centerRight.vue";
import centerMap from "./components/centerMap.vue";
export default {components: { centerMap, centerLeft, centerRight },
};
</script><style lang="scss" scoped>
.center {display: flex;justify-content: space-between;
}
.bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 30px;
}
</style>

中心map,2D地图

模板部分(<template>

  • 整体布局使用了一个 div 元素 class="content" 作为容器。
  • 容器内包含一个 heat-map-echarts 组件,设置了高度为 580px,宽度为 680px
  • 接着是一个包含子元素的 div ,其中有一个自定义的 dv-border-box-7 组件,内部包含一个标题 h2 和一个 Echart 组件。

脚本部分(<script>

  • 导入了两个组件:Echart 和 heatMapEcharts
  • data 函数中定义了一个名为 options1 的对象,用于配置 Echart 组件的选项。
    • xAxis 配置了轴的类型和最大值。
    • yAxis 配置了轴的类型、数据、反转、动画时长和显示的最大条数。
    • series 配置了图表的类型为柱状图,数据、实时排序、标签等相关属性。
    • 还配置了图例、动画时长、缓动效果等。
  • 在 components 中注册了导入的两个组件。

样式部分(<style scoped>

  • 为 .content 类设置了 Flex 布局,使其内容在垂直和水平方向上居中。
  • 为 .title 类设置了上下边距。

总体来说,这段代码是一个 Vue 组件的模板、脚本和样式的组合,主要用于展示一个热图组件和一个柱状图组件,并对其进行了相应的配置和布局设置。

中心map

<template><div class="content">  <!-- 定义一个名为 content 的 div 容器 --><heat-map-echarts height="580px" width="680px" />  <!-- 引入 heat-map-echarts 组件,并设置高度和宽度 --><div>  <!-- 内部的另一个 div --><dv-border-box-7>  <!-- 引入自定义的 dv-border-box-7 组件 --><h2 class="title">人口排名前五的地区</h2>  <!-- 标题元素,显示文本 --><Echart :options="options1" height="350px" width="680px" />  <!-- 引入 Echart 组件,并传递 options1 配置,设置高度和宽度 --></dv-border-box-7></div></div>
</template><script>
import Echart from "@/common/echart/index.vue";  // 导入 Echart 组件
import heatMapEcharts from "./echarts/heatMapEcharts.vue";  // 导入 heatMapEcharts 组件export default {data() {  // 定义组件的数据return {options1: {  // 定义 Echart 的配置选项对象 options1xAxis: {  // x 轴的配置type: "value",  // x 轴类型为数值型max: "dataMax",  // x 轴的最大值设置为 "dataMax"},yAxis: {  // y 轴的配置type: "category",  // y 轴类型为分类data: ["平桥区", "浉河区区", "光山县", "罗山县", "新县", "固始县"],  // y 轴的数据inverse: true,  // 是否反转animationDuration: 300,  // 动画持续时间animationDurationUpdate: 300,  // 更新动画的持续时间max: 4,  // 只显示最大的 4 个条},series: [  // 系列配置{realtimeSort: true,  // 实时排序// name: '人口数',  // 注释掉的系列名称type: "bar",  // 图表类型为柱状图// data: [156, 48, 111, 58, 92, 219],  // 注释掉的数据data: ["156", "48", "111", "58", "92", "219"],  // 系列的数据label: {  // 标签配置show: true,  // 显示标签position: "right",  // 标签位置在右侧valueAnimation: true,  // 标签值的动画效果},},],legend: {  // 图例配置show: true,  // 显示图例},animationDuration: 1000,  // 动画持续时间animationDurationUpdate: 1000,  // 更新动画的持续时间animationEasing: "linear",  // 动画缓动效果为线性animationEasingUpdate: "linear",  // 更新动画的缓动效果为线性},};},components: {  // 注册组件Echart,  // 注册 Echart 组件heatMapEcharts,  // 注册 heatMapEcharts 组件},
};
</script><style scoped>
.content {  // 为 content 类设置样式display: flex;  // 启用 Flex 布局flex-direction: column;  // 主轴方向为列align-items: center;  // 水平居中justify-content: center;  // 垂直居中
}
.title {  // 为 title 类设置样式margin-top: 20px;  // 顶部外边距 20 像素margin-bottom: -30px;  // 底部外边距 -30 像素
}
</style>

 引入代码heatMapEcharts.vue

<template><div :id="id" :class="className" :style="{ height: height, width: width }" />
</template><script>
import geoJson from "@/common/map/xinyang.json";
import tdTheme from "@/common/echart/theme.json"; // 引入默认主题
export default {name: "echart",props: {className: {type: String,default: "chart",},id: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "2.5rem",},},data() {return {chart: null,options: {title: {text: "信阳市人口密度图 (2024)",},tooltip: {trigger: "item",formatter: "{b}<br/>{c} (p / km2)",},toolbox: {show: true,orient: "vertical",left: "right",top: "center",feature: {dataView: { readOnly: false },restore: {},saveAsImage: {},},},visualMap: {min: 800,max: 50000,text: ["High", "Low"],realtime: false,calculable: true,inRange: {color: ["lightskyblue", "yellow", "orangered"],},},series: [{name: "信阳市人口密度",type: "map",map: "CQ",label: {show: true,},data: [{ name: "平桥区", value: 20057.34 },{ name: "浉河区", value: 15477.48 },{ name: "罗山县", value: 31686.1 },{ name: "息县", value: 6992.6 },{ name: "光山县", value: 44045.49 },{ name: "新县", value: 40689.64 },{ name: "潢川县", value: 37659.78 },{ name: "淮滨县", value: 45180.97 },{ name: "商城县", value: 55204.26 },{ name: "固始县", value: 21900.9 }],// 自定义名称映射nameMap: {},},],},};},watch: {options: {handler(options) {// 设置true清空echart缓存this.chart.setOption(options, true);},deep: true,},},mounted() {this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题this.initChart();},beforeDestroy() {this.chart.dispose();this.chart = null;},methods: {initChart() {// 初始化echartthis.chart = this.$echarts.init(this.$el, "tdTheme");this.$echarts.registerMap("CQ", geoJson);this.chart.setOption(this.options, true);},},
};
</script><style></style>

 左边left

<template><div>  <!-- 最外层的 div 容器 --><dv-border-box-6 style="padding-top: 20px">  <!-- 自定义的 dv-border-box-6 组件,并设置顶部内边距为 20 像素 --><h2 class="title">2010-2024 年信阳市常住人口及增量</h2>  <!-- 标题 1 --><Echart :options="options1" height="500px" width="600px" />  <!-- 引入 Echart 组件 1,并传递 options1 配置,设置高度和宽度 --><h2 class="title">2015-2024 年信阳市人口出生率、死亡率和自然增长率</h2>  <!-- 标题 2 --><Echart :options="options2" height="350px" width="600px" />  <!-- 引入 Echart 组件 2,并传递 options2 配置,设置高度和宽度 --></dv-border-box-6></div>
</template><script>
import Echart from "@/common/echart/index.vue";  // 导入 Echart 组件export default {data() {  // 定义组件的数据return {options1: {  // 第一个 Echart 的配置选项对象 options1tooltip: {  // 提示框配置trigger: "axis",  // 触发类型为坐标轴axisPointer: {  // 坐标轴指示器配置type: "cross",  // 类型为十字准线crossStyle: {  // 十字准线样式color: "#999",  // 颜色为 #999},},},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置dataView: { show: true, readOnly: false },  // 数据视图,可显示和编辑magicType: { show: true, type: ["line", "bar"] },  // 图表类型切换restore: { show: true },  // 还原配置saveAsImage: { show: true },  // 保存为图片},},legend: {  // 图例配置data: ["人口", "人口增长率"],  // 图例数据},xAxis: [  // x 轴配置{type: "category",  // 类型为分类data: [  // x 轴数据"2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024",],axisPointer: {  // 坐标轴指示器配置type: "shadow",  // 类型为阴影},},],yAxis: [  // y 轴配置{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 2700,  // 最小值max: 3300,  // 最大值interval: 100,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 0,  // 最小值max: 70,  // 最大值interval: 10,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},],series: [  // 系列配置{name: "人口",  // 系列名称type: "bar",  // 图表类型为柱状图tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万";  // 返回值加上单位 "万"},},data: [  // 数据2920, 2950, 2970, 3010, 3040, 3070, 3110, 3150, 3160, 3190, 3210,3220, 3250,],},{name: "人口增长率",  // 系列名称type: "line",  // 图表类型为折线图yAxisIndex: 1,  // 使用第二个 y 轴tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万人";  // 返回值加上单位 "万人"},},data: [  // 数据40.21, 59.81, 30.45, 36.15, 32.45, 26.54, 39.94, 33.55, 19.63,24.7, 21.09, 3.5, 4.21,],},],},options2: {  // 第二个 Echart 的配置选项对象 options2tooltip: {  // 提示框配置trigger: "axis",  // 触发类型为坐标轴},legend: {  // 图例配置data: ["出生率", "死亡率", "自然增长率"],  // 图例数据},grid: {  // 网格配置left: "3%",  // 左边距right: "4%",  // 右边距bottom: "3%",  // 下边距containLabel: true,  // 包含标签},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置saveAsImage: {},  // 保存为图片},},xAxis: {  // x 轴配置type: "category",  // 类型为分类boundaryGap: false,  // 两端不留空白data: [  // x 轴数据"2017","2018","2019","2020","2021","2022","2023","2024",],},yAxis: {  // y 轴配置type: "value",  // 数值类型min: -4,  // 最小值max: 14,  // 最大值interval: 2,  // 间隔},series: [  // 系列配置{name: "出生率",  // 系列名称type: "line",  // 图表类型为折线图data: [10.8, 11.9, 11.6, 11.5, 10.5, 7.8, 6.5, 6.0],  // 数据},{name: "死亡率",  // 系列名称type: "line",  // 图表类型为折线图data: [7.3, 7.3, 7.4, 7.8, 7.9, 7.9, 8.1, 8.2],  // 数据},{name: "自然增长率",  // 系列名称type: "line",  // 图表类型为折线图data: [4, 4.4, 4, 3.8, 3.1, -1, -1.6, -2],  // 数据},],},};},components: {  // 注册组件Echart,  // 注册 Echart 组件},
};
</script><style>
.title {  // 标题的样式display: flex;  // 启用 Flex 布局justify-content: center;  // 水平居中margin-bottom: 10px;  // 底部外边距 10 像素
}
</style>

 

 右边right

<template><div>  <!-- 最外层的 div 容器 --><dv-border-box-6 style="padding-top: 20px">  <!-- 自定义组件 dv-border-box-6,并设置顶部内边距为 20 像素 --><h2 class="title">2010 - 2024 年信阳市常住人口及增量</h2>  <!-- 第一个标题 --><Echart :options="options1" height="500px" width="600px" />  <!-- 引入 Echart 组件 1,并绑定 options1 配置,设置高度和宽度 --><h2 class="title">2015 - 2024 年信阳市人口出生率、死亡率和自然增长率</h2>  <!-- 第二个标题 --><Echart :options="options2" height="350px" width="600px" />  <!-- 引入 Echart 组件 2,并绑定 options2 配置,设置高度和宽度 --></dv-border-box-6></div>
</template><script>
import Echart from "@/common/echart/index.vue";  // 导入 Echart 组件export default {data() {  // 定义组件的数据return {options1: {  // 第一个 Echart 的配置对象tooltip: {  // 提示框配置trigger: "axis",  // 触发方式为坐标轴axisPointer: {  // 坐标轴指针配置type: "cross",  // 指针类型为十字线crossStyle: {  // 十字线样式color: "#999",  // 颜色为 #999},},},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置dataView: { show: true, readOnly: false },  // 数据视图功能,可显示且可编辑magicType: { show: true, type: ["line", "bar"] },  // 图表类型切换功能,可切换为折线图和柱状图restore: { show: true },  // 恢复功能saveAsImage: { show: true },  // 保存为图片功能},},legend: {  // 图例配置data: ["人口", "人口增长率"],  // 图例数据},xAxis: [  // x 轴配置{type: "category",  // 类型为分类data: [  // x 轴数据"2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024",],axisPointer: {  // 坐标轴指针配置type: "shadow",  // 类型为阴影},},],yAxis: [  // y 轴配置{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 2700,  // 最小值max: 3300,  // 最大值interval: 100,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 0,  // 最小值max: 70,  // 最大值interval: 10,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},],series: [  // 系列配置{name: "人口",  // 系列名称type: "bar",  // 图表类型为柱状图tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万";  // 返回值加上 " 万" 单位},},data: [  // 数据2920, 2950, 2970, 3010, 3040, 3070, 3110, 3150, 3160, 3190, 3210,3220, 3250,],},{name: "人口增长率",  // 系列名称type: "line",  // 图表类型为折线图yAxisIndex: 1,  // 使用第二个 y 轴tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万人";  // 返回值加上 " 万人" 单位},},data: [  // 数据40.21, 59.81, 30.45, 36.15, 32.45, 26.54, 39.94, 33.55, 19.63,24.7, 21.09, 3.5, 4.21,],},],},options2: {  // 第二个 Echart 的配置对象tooltip: {  // 提示框配置trigger: "axis",  // 触发方式为坐标轴},legend: {  // 图例配置data: ["出生率", "死亡率", "自然增长率"],  // 图例数据},grid: {  // 网格配置left: "3%",  // 左边距为 3%right: "4%",  // 右边距为 4%bottom: "3%",  // 下边距为 3%containLabel: true,  // 包含标签},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置saveAsImage: {},  // 保存为图片功能},},xAxis: {  // x 轴配置type: "category",  // 类型为分类boundaryGap: false,  // 两端不留空白data: [  // x 轴数据"2017","2018","2019","2020","2021","2022","2023","2024",],},yAxis: {  // y 轴配置type: "value",  // 数值类型min: -4,  // 最小值max: 14,  // 最大值interval: 2,  // 间隔},series: [  // 系列配置{name: "出生率",  // 系列名称type: "line",  // 图表类型为折线图data: [10.8, 11.9, 11.6, 11.5, 10.5, 7.8, 6.5, 6.0],  // 数据},{name: "死亡率",  // 系列名称type: "line",  // 图表类型为折线图data: [7.3, 7.3, 7.4, 7.8, 7.9, 7.9, 8.1, 8.2],  // 数据},{name: "自然增长率",  // 系列名称type: "line",  // 图表类型为折线图data: [4, 4.4, 4, 3.8, 3.1, -1, -1.6, -2],  // 数据},],},};},components: {  // 注册组件Echart,  // 注册 Echart 组件},
};
</script><style>
.title {  // 标题的样式display: flex;  // 使用 Flex 布局justify-content: center;  // 水平居中margin-bottom: 10px;  // 底部外边距 10 像素
}
</style>

 最后运行主代码就可以了:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3224486.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

PPI(每英寸像素数)、DPI(每英寸点数)和Pixel(像素)的区别和联系?

一、定义 PPI、DPI和Pixel是图像处理、打印和显示领域中常用的三个概念&#xff0c;它们之间既有区别又有联系。以下是对这三个概念进行分别讲解&#xff1a; 1. PPI&#xff08;Pixels Per Inch&#xff09;&#xff0d;即每英寸像素数&#xff0c;是图像分辨率的一种表示方…

技术速递|VS Code Java 6月更新 - 项目设置功能增强!大量 Spring 新特性

作者&#xff1a;Nick Zhu 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎阅读 Visual Studio Code for Java 的六月更新&#xff01;在这篇博客中&#xff0c;我们将分享项目设置项目的重要更新以及一系列 Spring 的功能改进&#xff0c;让我们开始吧&#xff01; 项目设…

AI论文作图——如何表示模型参数冻结状态

一、LOGO &#x1f525; win10win11 ❄️ win10win11 二、注意事项&#xff1a; 根据电脑系统&#xff0c;选择对应的版本。 参考&#xff1a; 【AI论文作图】如何表示模型参数冻结状态&#xff1f;

微信小程序 - 本地存储 增加有效期

小程序的本地存储API提供了wx.setStorageSync和wx.setStorage来存储数据&#xff0c;注意的是&#xff0c;小程序的本地存储并没有明确的有效期设置&#xff0c;存储的数据在不超过限制的情况下&#xff0c;会一直保留。 一、小程序本地存储API 小程序的本地存储API提供了设置…

容器docker

文章目录 前言一、docker1.1 为什么有docker1.2 docker架构1.3 docker 安装1.4 docker中央仓库1.5 docker 基本指令1.6 docker数据卷&#xff0c;挂载例&#xff1a;nginx 数据卷挂载例&#xff1a;mysql 本地持久化 1.7 镜像制作镜像结构dockerfile基础指令容器生成镜像 1.8 d…

C++笔试强训3

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、选择题1-5题6-10题 二、编程题题目一题目二 一、选择题 1-5题 如图所示&#xff0c;如图所示p-3指向的元素是6&#xff0c;printf里面的是%s&#xff0c;从6开…

带有子节点的树状表的父节点拖动排序#Vue3#Sortable插件

带有子节点的树状表的父节点拖动排序#Vue3#Sortable插件 使用Sortable插件这里要保证获取到的是父节点的下标&#xff0c;属性newDraggableIndex获取到的就是只有父节点的下标。设置子节点不能被拖动&#xff0c;最后在逐个调用接口进行数据库中顺序的更新。 <template>…

层次分析法上课笔记

欢迎来到一夜看尽长安花 博客&#xff0c;您的点赞和收藏是我持续发文的动力 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何想要讨论的问题可联系我&#xff1a;3329759426qq.com 。发布文章的风格因专栏而异&#xff0c;均自成体系&#xff0c;不足…

Profibus转ModbusTCP网关模块实现Profibus_DP向ModbusTCP转换

Profibus和ModbusTCP是工业控制自动化常用的二种通信协议。Profibus是一种串口通信协议&#xff0c;它提供了迅速靠谱的数据传输和各种拓扑结构&#xff0c;如总线和星型构造。Profibus可以和感应器、执行器、PLC等各类设备进行通信。 ModbusTCP是一种基于TCP/IP协议的通信协议…

使用八股搭建神经网络

神经网络搭建八股 使用tf.keras 六步法搭建模型 1.import 2.train, test 指定输入特征/标签 3.model tf.keras.model.Sequential 在Squential,搭建神经网络 4.model.compile 配置训练方法&#xff0c;选择哪种优化器、损失函数、评测指标 5.model.fit 执行训练过程&a…

python开发prometheus exporter--用于hadoop-yarn监控

首先写python的exporter需要知道Prometheus提供4种类型Metrics 分别是&#xff1a;Counter, Gauge, Summary和Histogram * Counter可以增长&#xff0c;并且在程序重启的时候会被重设为0&#xff0c;常被用于任务个数&#xff0c;总处理时间&#xff0c;错误个数等只增不减的指…

昇思25天学习打卡营第16天|Vision Transformer图像分类

昇思25天学习打卡营第16天|Vision Transformer图像分类 前言Vision Transformer图像分类Vision Transformer&#xff08;ViT&#xff09;简介模型结构模型特点 环境准备与数据读取模型解析Transformer基本原理Attention模块 Transformer EncoderViT模型的输入整体构建ViT 模型训…

xcode项目添加README.md文件并进行编辑

想要给xcode项目添加README.md文件其实还是比较简单的&#xff0c;但是对于不熟悉xcode这个工具的人来讲&#xff0c;还是有些陌生&#xff0c;下面简单给大家讲一下流程。 选择“文件”>“新建”>“文件”&#xff0c;在其他&#xff08;滚动到工作表底部&#xff09;下…

k8s record 20240708

一、PaaS 云平台 web界面 资源利用查看 Rancher 5台 CPU 4核 Mem 4g 100g的机器 映射的目录是指docker重启后&#xff0c;数据还在 Rancher可以创建集群也可以托管已有集群 先docker 部署 Rancher&#xff0c;然后通过 Rancher 部署 k8s 想使用 kubectl 还要yum install 安…

leetcode--验证二叉搜索树

leetcode地址&#xff1a;验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必…

71.WEB渗透测试-信息收集- WAF、框架组件识别(11)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;70.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;10&#xff09;-CSDN博客 如果有…

人工智能和机器学习 (复旦大学计算机科学与技术实践工作站)20240703(上午场)人工智能初步、mind+人脸识别

前言 在这个科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经逐渐渗透到我们生活的方方面面&#xff0c;从智能家居到自动驾驶&#xff0c;无一不彰显着AI的强大潜力。而人脸识别技术作为AI领域的一项重要应用&#xff0c;更是以其高效、便捷的特点受到了…

人工智能算法工程师(中级)课程2-Opencv视觉处理之高级操作

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程2-Opencv视觉处理之高级操作。在上一节课中的OpenCV基础操作我们了解到OpenCV是一个开源的计算机视觉软件库。它提供了各种视觉处理函数&#xff0c;并支持多种编程语言&#xff0c;如…

USB眼图eye diagram测试

前言: USB有一种测量称为EYE图或信号完整性测试。考虑数字信号从发射机传输到接收机的过程。到达接收器的信号质量可能受到许多因素的影响,包括发射器、电缆或PCB迹线以及连接器。信号质量也被称为信号完整性。眼图是一种用于快速评估数字信号质量的图形工具。眼图这个名字之…

Gymnasium 借游戏来学习人工智能

既然有了免费的linux系统GPU&#xff0c;干脆演示一下使用drivecolab套件来训练模型。 !apt-get install -y build-essential swig !pip install box2d-py !pip install gymnasium[all] !pip install gymnasium[atari] gymnasium[accept-rom-license] !pip install stable_bas…