Echarts实现一个html页面同时显示多个图表

最新推荐文章于 2025-03-16 17:18:06 发布

懒惰的小妖

最新推荐文章于 2025-03-16 17:18:06 发布

阅读量2.4w

点赞数 10

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/qq_40615403/article/details/90929606

版权

最近小编开发前端页面,根据需求做一个统计分析的页面.

需求是:Echarts实现一个html页面同时显示多个图表,布局为左右,右边有分上下的布局.

如图所示:

参考文档:https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

步骤:1.先进行div中布局样式的调整.

2.在指定的div中进行图表数据的填充.

个人思路:先放一张图在各个布局中看看能不能处来,然后在每个布局中放同样的图是否都展示出来,展示出来后,对三个图中的数据进行替换,就ok!(如果怕一次性整好,图不出来或者出来不全,可以试试这个笨办法)

注意:要保证多个图表的id不一致,每一个div处要有宽和高否则图表出不来.

根据官网的案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

懒惰的小妖

关注关注

10
点赞
踩
60

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Ubuntu18.04安装A-Loam保姆级教程

一只小菜鸡的博客

11-24

2029

Ubuntu18.04安装ROS-melodic保姆级教程_灬杨三岁灬的博客-CSDN博客还是那句话，有时候加了这行也不好使，我是疯狂试了20+次，最后打了一局游戏，回来就过了，这就得看网络看命了，不行就在网上搜搜终极大招（动手能力差的不建议）。有时候加了这行也不好使，我是疯狂试了10+次，出现3.3之后就能用了，这就得看网络看命了，不行就在网上搜搜终极大招（动手能力差的不建议）。多试几十次，不行几百次，换手机网络也是，多试几次，这东西很玄学，不一定哪次就过了。2.2.建立src文件夹。

ubuntu18.04上编译R3live

herres的博客

07-29

1170

R3live是香港大学Mars实验室提出的一种实时的、激光雷达-惯性-视觉融合的SLAM系统，这篇博客主要记录本人配置R3live环境、编译、运行的过程。

6 条评论您还未登录，请先登录后发表或查看评论

Git 上传文件、文件夹、项目到 Github

最新发布

weixin_43387480的博客

03-16

https://blog.csdn.net/JiaXie15/article/details/107581243

ubuntu 利用git将本地项目上传至github操作 (记录1)

weixin_45654152的博客

01-11

563

git 和 github 是不相同的。 git是分布式版本控制系统。管理文本文件。 github是代码分享交流网站。 1.下载，安装下载相应系统的安装包： git官网 sudo apt-get install git-all 对应路径下命令行安装。 2.创建repository 2.1 我理解为，初始化。 git config --global user.name "xxx" git config --global user.email "xxx@email.com" git config user.n

ubuntu下如何　将文件或者文件夹传到github上．

nanjifengzi的博客

05-01

1212

https://www.jianshu.com/p/c70ca3a02087（第一步）１，ｓsh检查２，生成秘钥，打开id_rsa.pub，查看．３，github上设置相关的ssh　远程的链接．（第二步）１，到达想上传的文件夹下．　初始化．　git init２，git add .　然后设置　注释文件　　git commit -m "注释信息"３，github 上　新建相应的仓库．４，　ｓｓｈ与仓储...

ubuntu系统使用github上传文件到仓库

codingEMIPark的博客

09-18

1509

网上的众多方法要么细节讲的不清楚要么缺乏错误时的解决方法，自己写一个简单的教程方便自己以后上传时使用。创建github账号和绑定SSH就不介绍了，参考：Ubuntu下配置和使用GitHub 上传步骤： 1.进入到要上传文件的文件夹，右键“在终端打开”。 2.输入 git init 目的是初始化本地仓库（文件夹） 3.输入 git add . 添加本地仓库（当前文件夹

[Ubuntu 18.04]配置Git以及连接Github

跬步

02-01

1927

配置Git 1.安装Git： sudo apt install git 2.本地生成ssh key： ssh-keygen -t rsa -C "myname@email.com" 默认生成的key在.ssh/id_rsa.pub，可使用cat查看 3.在github中添加ssh key：登录github ——> Account Settings ——> SSH Keys ——&...

ubuntu18.04 python3.8 CUDA11.4 PYTorch1.13.1 tensorrt8.4安装测试全过程

06-28

1. **下载 yolov5**：从 GitHub 下载 yolov5 的 v6.2 版本，并解压到本地。 2. **安装相关库**：在解压后的 yolov5 文件夹中，找到 `requirements.txt` 文件，并确保其中的 torch 和 torchvision 已被注释掉。然后，...

【Ubuntu】Ubuntu18.04安装后会用到的相关设置

Young12138的博客

03-29

654

近期跑实验需要用到Ubuntu但是又好久没用了，有点生疏，记点笔记，都是一些基本的配置命令。以及过程中可能遇到的问题的解决方案。

ubuntu上传文件到GitHub

EricLee23

04-30

684

第一步：本地安装Git 如果本地没有安装Git的话，使用以下命令安装： sudo apt-get install git 第二步：生成密钥 ssh-keygen -t rsa -C "你的github邮箱" 例如在我的home工作目录/home/lzy下输入命令之后一直点确定（enter键） 1、这时目录下会生成一个.ssh隐藏文件夹，按ctrl+h可以显示隐藏文件夹，里面有两个文件：i...

如何在ubuntu系统下使用git上传文件

yllifesong的博客

07-14

2863

1.在文件所在位置打开终端，输入如下命令,进行git全局设置： git config --global user.name "用户名" git config --global user.email "用户邮箱" 2. 安装如下命令创建新的仓库，网址为自己新建项目的网址，cd转到自己要上传的项目文件夹： git clone https://git.aiiage.com:9999/song.yl...

Ubuntu18.04下通过git向远程仓库提交代码或者文件

qq_41898018的博客

10-15

352

1.首先创建一个文件夹，以文件为例子 2.然后进行git初始化 git init #通过ctrl+h可以查看 .git目录 3.添加文件 git add lxyzs.txt #如果要整个项目的话执行git add . git commit -m "first commit" 4.关联远程仓库 git remote add origin https://gitlab.com/ppxzhc/ppx.git 5.同步远程仓库的文件 ...

UBUNTU 如何上传文件代码到github

weixin_42191545的博客

12-15

401

UBUNTU 如何上传文件代码到github 参考链接 1.进入GitHub官网，选择repositories 2.创建一个空仓库 3.获取新建好的仓库地址，并按照下方操作：这里起 yourname git clone https://github.com/xxno-n/yourname.git cd yourname echo "# yourname" >> README.md...

ubuntu下将本地项目上传到github托管

xunalove的博客

07-20

2917

以前一直用window7，上传github文件用的是界面下的GitHub for Window,最近装了ubuntu虚拟机学习项目都在是ubuntu下，虽然ubuntu可以实现和window文件互传，个人觉得太麻烦了。所以学习了ubuntu下将本地项目上传到github,还不太熟练，故做一下笔记。 - 1. Github网页新建一个仓库，名为：Django_Study - 2. 复制项目U

ubuntu16.04下使用git上传文件到github上或使用git在局域网中传送文件或将项目传到服务器上再从本地获取

水恋鱼

09-10

819

git的使用 1.使用git上传文件到github上 1.安装git sudo apt-get install git 2.生成秘钥 ssh-keygen -t rsa -C "youremail@mail.com" youremail@mail.com 可以填写你的邮箱秘钥生成过程中可能让你填写保存路径,你可以直接回车,保存在默认路径下 3.提取秘钥...

ubuntu18.04系统本地上传文件到服务器及常见问题

weixin_44145776的博客

07-01

1132

直接上例子：scp MobileFaceNet_Pytorch-master.sh sx111@192.168.120.15:/home/sx111/file/ 说明：上面这个指令是应该在本地端执行的 scp表示拷贝文件 MobileFaceNet_Pytorch-master.sh是本地端当前目录下的文件，如果需要拷贝的不是当前目录下的文件，可以用绝对路径抵达。 sx111是服务器上我自己的用户名 192.168.120.15是服务器地址 /home/sx111/file/表示文件会被拷贝到file文件

ubuntu建立本地仓库并上传到gitee

YFaris的博客

07-20

409

转载自：原文链接：https://blog.csdn.net/weixin_45146520/article/details/109008282 1、新建本地工程仓库目录 2、使用命令使文件夹为本地仓库： git init 3、新建并获取gitee的仓库地址，git结尾，然后使用如下命令绑定：（推荐使用ssh，http需要每次输出用户名密码） git remote add origin 你的仓库git地址如果这时候提示有报错，已经存在绑定，则使用下面命令解除绑定再执行上一步命令： git remote