当前位置: 首页 > news >正文

通过循环生成多个echarts图表并实现自适应

不推荐使用grid布局,不清楚为什么左边一列的不会自适应,换成flex布局就可以了

主要方法借助中的getInstanceByDom方法

完整代码:

<template><div class="statis"><div class="content" ><!-- v-for 遍历父级div--><div class="main" v-for="(item,index) in echartsData" :key="index"><!--自定义宽高的dom,用于放置图表--><div class="bar"></div><img class="title-bg" src="@/assets/img/title-bg.png"/></div></div></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector";export default {name: "test",data() {return {observer: null,titleIcon:require('@/assets/img/title-bg.png'),echartsData: [{title:'标题1换个环境官方',data: [{ value: 20,  name: '数据1' },{ value: 300, name: '数据2' },{ value: 300, name: '数据3' }],},{title:'环境官方',data: [{ value: 20,  name: '数据1' },{ value: 300, name: '数据2' }],},{title:'官方',data: [{ value: 20,  name: '数据1'},{ value: 300, name: '数据2'}],},{title:'标题1换个环境官方',data: [{ value: 20, name: '数据1'},{ value: 300, name: '公共 部分' }],}],color: ['#5B8FF9', '#ca2df5', '#42CE92', '#f96950', '#047ff5'],//颜色列表}},methods: {// 方法:绘制柱状图drawBar() {var myEchart = document.getElementsByClassName('bar'); //获取类名//此处for循环多次初始化 echarts 实例for (var i = 0; i <  myEchart.length; i++) {var myChart = this.$echarts.init(myEchart[i]) //初始化echarts实例要在for循环内if(myChart){let option = {title: {text: this.echartsData[i].title,left: 40,top:'20',textStyle: {color:'#383838',fontSize: 16,   }},tooltip: {trigger: 'item'},legend: {top: '50',left: 'center'},series: [{type: 'pie',radius: ['40%', '55%'],center: ['50%', '60%'], // 调整饼图位置data: this.echartsData[i].data,itemStyle:{normal:{label:{show: true,formatter: '{b} : {c} ({d}%)'},labelLine :{show:true},color: function (colors) {var colorList = ['#73DEB3','#578EF8','#9A60B4','#ef6567','#f9c956','#3BA272'];return colorList[colors.dataIndex];}}}}] }//使用刚指定的配置项和数据显示图表myChart.setOption(option)// window.addEventListener("resize", () => {//     myChart.resize();// })}//      const echartAll = document.getElementsByClassName('bar')// window.onresize = function() {//   for (let i = 0; i < echartAll.length; i++) {//     var myChart = this.$echarts.init(echartAll[i])//     myChart.resize()//   }// }}},// 处理多个图形的自适应getEchartObj() {var  myEchart = document.getElementsByClassName('bar'); //获取类名for (var i = 0; i <  myEchart.length; i++){console.log('myEchart[i]',myEchart[i]);let  _ref= myEchart[i];//遍历生成的折线图的Domlet myEchars = _ref?this.$echarts.getInstanceByDom(_ref):undefined;if(myEchars!== undefined){myEchars.resize();}}},},mounted() {//调用绘制柱状图的方法this.$nextTick(()=>{this.drawBar()})this.$nextTick(()=>{window.onresize = ()=>{this.getEchartObj()}})}}
</script><style scoped>.content {display: flex;/* grid-template-columns: 1fr 1fr 1fr; */gap: 20px;flex-wrap: wrap;}.main {width:calc((100% - 46px)/3);border: 1px solid #D0D0D0;height: 360px;background-color: #FFFFFF;position: relative;}.title-bg{position:absolute;top:23px;left:20px;}.main .bar {width: 100%;height: 100%;}
</style>

相关文章:

通过循环生成多个echarts图表并实现自适应

不推荐使用grid布局&#xff0c;不清楚为什么左边一列的不会自适应&#xff0c;换成flex布局就可以了 主要方法借助中的getInstanceByDom方法 完整代码&#xff1a; <template><div class"statis"><div class"content" ><!-- v-for …...

MySQL——六、库表操作(下篇)

MySQL 一、INSERT语句二、REPLACE语句三、UPDATE语句四、delete和TRUNCATE语句五、MySQL用户授权1、密码策略2、用户授权和撤销授权 一、INSERT语句 #在表里面插入数据&#xff1a;默认情况下&#xff0c;一次插入操作只插入一行 方式1&#xff1a; INSERT [INTO] 表名 [(colu…...

自动化办公篇之python批量改名

#批量命名 import xlwings as xw app xw.App(visibleFalse,add_bookFalse) workbook app.books.open("测试表.xlsx") for sheet in workbook.sheets:sheet.namesheet.name.replace("彩印之","银河") workbook.save() app.quit()...

Android MediaCodec将h264实时视频流数据解码为yuv,并转换yuv的颜色格式为nv21

初始化mediacodec private MediaCodec mediaCodec;private ByteBuffer[] inputBuffers;private void initMediaCodec(Surface surface) {try {Log.d(TAG, "onGetNetVideoData: ");//创建解码器 H264的Type为 AACmediaCodec MediaCodec.createDecoderByType("v…...

Postgresql SQL 字段拼接

本文介绍Postgresql 数据库sql字段拼接的方法。 1.使用字符串连接函数 select pkey || - || vname as "项目-版本" from test_jira_project_verison; 2.使用字符串连接操作符 select CONCAT(pkey, -, vname) as "项目-版本" from test_jira_project_ve…...

MySQL 迁移完不能快速导数据了?

关于 5.6 升级到 5.7 之后&#xff0c;GTID 的相关功能的注意事项。 作者&#xff1a;秦福朗&#xff0c;爱可生 DBA 团是队成员&#xff0c;负责项目日常问题处理及公司平台问题排查。热爱互联网&#xff0c;会摄影、懂厨艺&#xff0c;不会厨艺的 DBA 不是好司机&#xff0c;…...

Lazysysadmin靶机

信息收集 主机发现 nmap -sn 192.168.88.0/24 //-sn&#xff1a;制作主机发现&#xff0c;不做端口扫描&#xff1b;扫描结果包含本机IP 端口扫描 nmap --min-rate 10000 -p- 192.168.88.136 扫描端口详细信息 端口扫描发现&#xff0c;该主机的22、80、139、445、3306、…...

LeetCode09——回文数

LeetCode09 自己写的解,转化为字符串再反转&#xff0c;比较笨。 import java.util.Scanner; public class Result01 {public static void main(String[] args) {System.out.println("请输入整数&#xff0c;我来帮您判断是否是回文数。");Scanner scanner new Sc…...

云安全—分布式基础

0x00 前言 云必然是依赖于分布式技术来进行实现的&#xff0c;所以有必要学习和来了解分布式相关的内容 0x01 分布式计算 1.基本概述 分布式计算的定义&#xff1a;通过网络互联的计算机都具有一定的计算能力&#xff0c;他们之间互相传递数据&#xff0c;实现信息共享&…...

Spring(18) @Order注解介绍、使用、底层原理

目录 一、简介二、List 注入使用示例2.1 测试接口类2.2 测试接口实现类12.3 测试接口实现类22.4 启动类&#xff08;测试&#xff09;2.5 测试结果场景一&#xff1a;场景二&#xff1a; 三、CommandLineRunner 使用示例3.1 接口实现类13.2 接口实现类23.3 测试结果场景一&…...

目标检测YOLO实战应用案例100讲-基于改进YOLOv6的轧钢表面细小缺陷检测

目录 前言 存在的问题 轧钢缺陷图像特征分析 2.1单一类型缺陷 2.2面状缺陷...

leetcode:507. 完美数(python3解法)

难度&#xff1a;简单 对于一个 正整数&#xff0c;如果它和除了它自身以外的所有 正因子 之和相等&#xff0c;我们称它为 「完美数」。 给定一个 整数 n&#xff0c; 如果是完美数&#xff0c;返回 true&#xff1b;否则返回 false。 示例 1&#xff1a; 输入&#xff1a;num…...

智能物联网解决方案:蓝牙IOT主控模块打造高效监测和超低功耗

物联网蓝牙模块&#xff0c;无论单模&#xff0c;还是双模&#xff0c;或者双模音频的选择&#xff0c;如下文说描述&#xff1a; 蓝牙芯片模块市场的百花齐放&#xff0c;也带来的工程师在选型时碰到很大的困难&#xff0c;但是无论是做半成品&#xff0c;还是做成品&#xf…...

vue 拿到数据后,没有重新渲染视图,nuxt.js拿到数据后,没有重新渲染视图,强制更新视图

以下为Vue2的解决方案 一、 Vue.set&#xff08;&#xff09; 问&#xff1a;什么情况下使用&#xff1f; 答&#xff1a;如果你向响应式数据添加新的“属性”&#xff0c;理论上&#xff0c;一般情况下是没问题的&#xff0c;但是&#xff0c;如果你的级别比较深&#xff0c;又…...

Docker基础操作命令演示

Docker中的常见命令&#xff0c;可以参考官方文档&#xff1a;https://docs.docker.com/engine/reference/commandline/cli/ 1、常见命令介绍 其中&#xff0c;比较常见的命令有&#xff1a; 命令说明文档地址docker pull拉取镜像docker pulldocker push推送镜像到DockerReg…...

XTU-OJ 1175-Change

题目描述 一个班有N个学生&#xff0c;每个学生有第一学期成绩Xi,第二学期成绩Yi&#xff0c;请问成绩上升&#xff0c;持平&#xff0c;下降的人数。 输入 每个样例的第一行是整数N(0≤N≤50),如果N0&#xff0c;表示输入结束&#xff0c;这个样例不需要处理。 第二行是N个整数…...

Python环境安装

环境安装 Windows安装Linux安装 Windows安装 下载最新版Python https://www.python.org/downloads 打开安装包 选择安装路径&#xff0c;安装 安装 验证安装是否成功&#xff0c;命令行输入python Linux安装 安装依赖环境 yum install wget zlib-devel bzip2-devel op…...

苏轼在密州的四首千古名作

苏轼&#xff0c;一个从诗歌王国掉落人间的落魄贵族&#xff0c;整个政治生涯几乎都以流浪为主&#xff0c;在古诗词世界或许只有李白与之最是相似&#xff0c;不过李白的流浪属于荡歌山水、云游四方&#xff0c;而苏轼的流浪则带有被动的成分&#xff1a;一纸贬黜公文就是苏轼…...

[计算机提升] 域及域用户(组)

1.3 域及域用户(组) 1.3.1 域的概念 在Windows操作系统中&#xff0c;域&#xff08;Domain&#xff09;是指一个或多个计算机或资源的集合&#xff0c;这些计算机或资源受到单个安全数据库&#xff08;域控制器&#xff09;的管理和控制。域可以包含多个计算机、用户、组和其…...

命令行配置文件

在说具体的配置方式之前&#xff0c;我们需要首先梳理清除几个概念。这有助于我们明白自己在做什么&#xff0c;以及如何把经验平移到其他方面。 和命令行相关的有几个概念&#xff1a;terminal&#xff08;终端&#xff09;、shell&#xff08;解释器&#xff09;&#xff1b…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...