echart盒子没有跟着当前div大小变化而自适应

2024-06-12 10:36

本文主要是介绍echart盒子没有跟着当前div大小变化而自适应,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、问题描述

当echarts图表在一个盒子里的时候,盒子大小变化了,但是图表没有跟着自适应,比如这样,盒子变大了,但是图表没变化
请添加图片描述

二、解决方法

在盒子大小更改的同时,调用图表的resize方法,记得在nextTick调用,这是我更改盒子的方法,你们只要在盒子大小更改的时候调用就可以了

  change() {this.width += 20;this.$nextTick(() => {this.chart.resize();});},

三、更改后的效果

请添加图片描述

四、全部代码

我把我的代码贴出来,想要试试的话可以直接粘贴,记得要是直接粘贴用的话先检查项目是否下载了echarts,

<template><div class="MonitoringSensor"><div id="main" :style="{ width: width + 'px', height: width + 'px' }"></div><button @click="change">点击</button></div>
</template><script>
import * as echarts from 'echarts';export default {name: 'App',components: {},data() {return {chart: null,width: 300,};},mounted() {this.initChart();},methods: {initChart() {this.chart = echarts.init(document.getElementById('main'));let options = null;options = {xAxis: {type: 'category',data: ['苹果', '梨子', '香蕉'],axisLabel: {color: '#fff',},},yAxis: {type: 'value',max: 200,axisLabel: {color: '#fff',},splitLine: {lineStyle: {color: '#222',},},},tooltip: {trigger: 'axis',},series: [{type: 'bar',data: [100, 50, 20],barWidth: 30,},],};options && this.chart.setOption(options);},change() {this.width += 20;this.$nextTick(() => {this.chart.resize();});},},
};
</script><style scoped>
.MonitoringSensor {width: 500px;height: 500px;margin: 0 auto;border: 1px solid red;
}#main {background: rgb(24, 80, 169);
}
</style>

这篇关于echart盒子没有跟着当前div大小变化而自适应的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1053974

相关文章

mysql如何查看当前连接数

《mysql如何查看当前连接数》:本文主要介绍mysql如何查看当前连接数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql查看当前连接数查看mysql数据库允许最大连接数总结mysql查看当前连接数查看当前连接数SHOW STATUS LIKE

Android如何获取当前CPU频率和占用率

《Android如何获取当前CPU频率和占用率》最近在优化App的性能,需要获取当前CPU视频频率和占用率,所以本文小编就来和大家总结一下如何在Android中获取当前CPU频率和占用率吧... 最近在优化 App 的性能,需要获取当前 CPU视频频率和占用率,通过查询资料,大致思路如下:目前没有标准的

Python中__new__()方法适应及注意事项详解

《Python中__new__()方法适应及注意事项详解》:本文主要介绍Python中__new__()方法适应及注意事项的相关资料,new()方法是Python中的一个特殊构造方法,用于在创建对... 目录前言基本用法返回值单例模式自定义对象创建注意事项总结前言new() 方法在 python 中是一个

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

MySQL8.0设置redo缓存大小的实现

《MySQL8.0设置redo缓存大小的实现》本文主要在MySQL8.0.30及之后版本中使用innodb_redo_log_capacity参数在线更改redo缓存文件大小,下面就来介绍一下,具有一... mysql 8.0.30及之后版本可以使用innodb_redo_log_capacity参数来更改

java获取图片的大小、宽度、高度方式

《java获取图片的大小、宽度、高度方式》文章介绍了如何将File对象转换为MultipartFile对象的过程,并分享了个人经验,希望能为读者提供参考... 目China编程录Java获取图片的大小、宽度、高度File对象(该对象里面是图片)MultipartFile对象(该对象里面是图片)总结java获取图片

Java实现Elasticsearch查询当前索引全部数据的完整代码

《Java实现Elasticsearch查询当前索引全部数据的完整代码》:本文主要介绍如何在Java中实现查询Elasticsearch索引中指定条件下的全部数据,通过设置滚动查询参数(scrol... 目录需求背景通常情况Java 实现查询 Elasticsearch 全部数据写在最后需求背景通常情况下

电脑没有仿宋GB2312字体怎么办? 仿宋GB2312字体下载安装及调出来的教程

《电脑没有仿宋GB2312字体怎么办?仿宋GB2312字体下载安装及调出来的教程》仿宋字体gb2312作为一种经典且常用的字体,广泛应用于各种场合,如何在计算机中调出仿宋字体gb2312?本文将为您... 仿宋_GB2312是公文标准字体之一,仿China编程宋是字体名称,GB2312是字php符编码标准名称(简

C#中图片如何自适应pictureBox大小

《C#中图片如何自适应pictureBox大小》文章描述了如何在C#中实现图片自适应pictureBox大小,并展示修改前后的效果,修改步骤包括两步,作者分享了个人经验,希望对大家有所帮助... 目录C#图片自适应pictureBox大小编程修改步骤总结C#图片自适应pictureBox大小上图中“z轴

深入理解C++ 空类大小

《深入理解C++空类大小》本文主要介绍了C++空类大小,规定空类大小为1字节,主要是为了保证对象的唯一性和可区分性,满足数组元素地址连续的要求,下面就来了解一下... 目录1. 保证对象的唯一性和可区分性2. 满足数组元素地址连续的要求3. 与C++的对象模型和内存管理机制相适配查看类对象内存在C++中,规