css-Echarts图表初始显示异常非完全显示

news2024/11/15 15:34:07

1.echarts图表初始加载异常

2.问题原因

初次加载时,由于外层使用%比 echarts dom元素没有完全加载完成,canvas绘画继承本身宽高,造成Echarts图表初始显示异常非完全显示。

3.使用echarts图表可参考以下代码(实现一定的自适应)

<template>
  	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
	<div id="excelC"  ref="excelChart" style="width: 90%;height:80%;"></div>
</template>
<script>
  methods: {
     setci(data) {
      // 有的话就获取已有echarts实例的DOM节点
      let myChart = echarts.getInstanceByDom(document.getElementById("cicly"))
      // 如果不存在,就进行初始化
      if (myChart == null || myChart == undefined || myChart == '') {
        myChart = echarts.init(document.getElementById("cicly"));
      }
      //对应配置内容
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '项目执行情况',
            type: 'pie',
			radius: ['40%', '70%'],
            label: {
              formatter: '{d}%',
              fontSize: 14
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 5
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: data,
          },
        ],
      }
      myChart.setOption(option)
	  window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
  //获取后端传输数据
  search() {
   this.setci(Data)
   }
},
mounted() {
	this.$nextTick(() => {
		this.search()
	})
},

4.核心解决代码

   myChart.setOption(option)
	  window.addEventListener('resize', function () {
        myChart.resize();
      });
mounted() {
	this.$nextTick(() => {
		this.search()
	})
},

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

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

相关文章

stm32开发之threadx+emwin+awizard使用记录

前言 图形化开发界面选择(awizard)emwin使用的版本是6.10芯片采用的是stm32f407zgt6这里使用的开发板是普中麒麟f4系列的 lcd驱动文件&#xff08;基于提供的源码修改&#xff09; 1、这里是剔除了很多兼容其他显示屏部分的代码&#xff0c;只保留具体信号的代码,把一些全局…

Java实现AVL树

AVI树 如果一颗二叉搜索树不平衡,那么搜索效率会受影响 二叉搜索树如果不是这种不平衡的情况,时间复杂度可以达到O(logn) 但是像图中的这种不平衡情况时间复杂度为O(n),那么如何解决呢? 可以通过旋转解决 旋转之后并不会破坏二叉搜索树的特性 判断是否平衡有一个规则:如果一…

如何进行景气分析

景气分析是一种短期经济分析方法。主要分析短时间内&#xff08;一般指一年内&#xff0c; 或几个月内&#xff09;经济运行的态势&#xff0c;包括当前的状态和未来的趋势。景气分析可以为宏观经济政策提供重要的决策与参考信息&#xff0c;例如根据经济运行的方向、强弱可建议…

【AI开发:音频】二、GPT-SoVITS使用方法和过程中出现的问题(GPU版)

1.FileNotFoundError: [Errno 2] No such file or directory: logs/guanshenxxx/2-name2text-0.txt 这个问题中包含了两个&#xff1a; 第一个&#xff1a;No module named pyopenjtalk 我的电脑出现的就是这个 解决&#xff1a;pip install pyopenjtalk 第二个&#xff1a…

数据结构练习-数据结构概述

----------------------------------------------------------------------------------------------------------------------------- 1. 在数据结构中&#xff0c;从逻辑上可以把数据结构分成( )。 A. 动态结构和静态结构 B. 紧凑结构和非紧凑结构 C. 线性结…

初识ansible变量及实例配置

目录 1、为什么要使用变量 2、变量分类 3、 变量详解 3.1 vars,vars_files , group_vars 3.1 .1 vars 剧本中定义变量 3.1.2 vars_file 将变量存放到一个文件中&#xff0c;并在剧本中引用 3.1.3 group_vars 创建一个变量文件给某个组使用 实例1-根据不同的主机…

CGLIB动态代理

文章目录 前言概要SpringBoot中使用小结 前言 当我们需要在Java中实现动态代理时&#xff0c;通常会考虑使用 JDK原生动态代理 或者 CGLIB动态代理。 我这里说一下CGLIB动态代理&#xff0c;并给出一个例子。 概要 CGLIB&#xff08;Code Generation Library&#xff09;是一…

无损以太网的ROCE革命,队列的缓存空间优化分析

ROCE无损以太网&#xff0c;队列的缓存空间优化 多级缓存架构优化芯片性能&#xff1a;* 缓存空间细分为芯片级、端口级和队列级&#xff0c;实现精细管理。* 无损队列引入Headroom缓存空间&#xff0c;确保数据完整性。 在芯片层面&#xff1a; 静态缓存为端口提供保证的缓存空…

RHCE:网络服务综合项目

基础配置&#xff1a; 1.配置主机名&#xff0c;静态IP地址 2.开启防火墙并配置 3.部分开启SElinux并配置 4.服务器之间使用同ntp.aliyun.com进行时间同步 5.服务器之间实现SSH免密登录 业务需求&#xff1a; 1.Server-NFS-DNS主机配置NFS服务器&#xff0c;将博客网…

智慧园区引领未来产业趋势:科技创新驱动园区发展,构建智慧化产业新体系

目录 一、引言 二、智慧园区引领未来产业趋势 1、产业集聚与协同发展 2、智能化生产与服务 3、绿色可持续发展 三、科技创新驱动园区发展 1、创新资源的集聚与整合 2、创新成果的转化与应用 3、创新文化的培育与弘扬 四、构建智慧化产业新体系 1、优化产业布局与结构…

5.SpringBoot 配置文件

文章目录 1.配置文件作用2.配置文件格式2.1项目中同时存在两种配置文件2.2application.properties2.2.1 application.properties语法格式2.2.2获取自定义配置项 2.3 application.yml2.3.1 application.yml语法格式2.3.1.1单双引号区别2.3.1.2和application.properties格式对比&…

安全狗云眼的主要功能有哪些?

"安全狗云眼"是一款综合性的网络安全产品&#xff0c;主要用于实时监控和保护企业的网络安全。其核心功能包括威胁检测、漏洞扫描、日志管理和合规性检查等。 以下是安全狗云眼的主要功能详细介绍&#xff1a; 1、资产管理 定期获取并记录主机上的Web站点、Web容器、…

Python连接Oracle数据库问题解决及Linux服务器操作知识

背景说明 最近在做一个视频分析的项目&#xff0c;然后需要将视频分析的数据写入到oracle数据库&#xff0c;直接在服务器上测试数据库连接的时候出现了这个bug提示&#xff0c;自己通过不断的研究探讨&#xff0c;最终把这个问题成功进行了解决&#xff0c;在这里进行一下记录…

【周总结】总结下这周的工作、(hashmap)知识巩固等

总结 这周开发任务已经全部结束&#xff0c;主要是在修改一些 jira 问题 需要反思的是&#xff0c;中间改造接口时&#xff0c;数据库表需要新增一个字段&#xff0c;这个 sql 脚本忘记加到 basetable.sql 脚本里面了&#xff0c;这样如果是新建的项目&#xff0c;创建的时候不…

HackMyVM-Hommie

目录 信息收集 arp nmap WEB web信息收集 dirsearch ftp tftp ssh连接 提权 系统信息收集 ssh提权 信息收集 arp ┌──(root㉿0x00)-[~/HackMyVM] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 08:00:27:77:ed:84, IPv4: 192.168.9.126 Starting arp-…

常见的经典目标检测算法

目标检测是计算机视觉领域的一个核心任务&#xff0c;它涉及到识别图像中的物体并确定它们的位置。以下是一些常见的经典目标检测算法&#xff1a; R-CNN系列 R-CNN&#xff08;Region-based Convolutional Neural Network&#xff09;是一种用于目标检测的算法&#xff0c;它…

未知个数一维数组:申请资源、初始化、访问、释放资源

示例&#xff1a; /*** brief how about array-unknown-count? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>…

Git | Git基本命令

Git | Git基本操作 文章目录 Git | Git基本操作一、创建Git本地仓库1、创建Git仓库2、配置Git3、理解工作区、暂存区、版本库关系 二、添加、修改与查看添加文件查看历史提交记录 修改文件查看.git文件 三、版本回退版本回退撤销修改尚未add已add但还未commit已add并commit 删除…

项目小游戏-贪吃蛇

目录 1.游戏开始 - GameStart 1.1cmd命令窗口 调节窗口命令 ​编辑更改窗口命名 ​编辑 1.2 Win32 API win32 API 的介绍: ​编辑 获取控制台坐标COORD 获取控制台句柄: 获取缓冲台光标信息: 获取虚拟键位: 本地初始化 setlocale(); 游戏开始的具体实现&#xff1a…

uniapp中scroll-view初始化的时候 无法横向滚动到某个为止

项目需求 实现日历&#xff08;13天&#xff09;默认高亮第六天 并定位到第六 左边右边各六天&#xff08;可以滑动&#xff09; 直接上代码 <template><scroll-view class"scroll-X":show-scrollbar"true" :scroll-x"scrollable":…