vue中动态加入ECharts图表时,ECharts宽度自适应/不能100%撑开

简介: vue中动态加入ECharts图表时,ECharts宽度自适应/不能100%撑开

首先上图吧, 关于vue动态加入echarts时,宽度不能100%的问题,首先上图
这里写图片描述

如图,echarts中的canvas的width才500,显然不对呀,右边还有那么大的一片空白,需要说明下交互步骤

这里写图片描述

看看代码,
按钮触发click方法 显示弹窗或者动态加载组件

   <span class="btn" @click="showecharts">showeCharts</span>
AI 代码解读
methods: {
    showecharts(){
        this.$prompt('Test', resolve => require(['@/components/ShowEChart.vue'], resolve))
    }
}
AI 代码解读

prompt 中的内容肯定是动态的

ShowEChart.vue

 <div>
     <EChart :chartData="chartData"/>
 </div>
AI 代码解读
export default {
    components: {
        //EChart.vue图表内容
        EChart: resolve => require(['@/components/EChart.vue'], resolve),
    },
}
AI 代码解读

这里应该echart能显示如上图了,但是宽度没打开,
换成 imp 也是一样的

import EChart from '@/components/EChart.vue';
AI 代码解读

思其原因还是prompt还没渲染完整紧着echart也加载,echart的宽度根据具父元素的宽度适应的渲染,给父元素一个确定宽度也可以撑开,也不是好办法,或者setTimeout也行

最好的还是利用vue的mounted 可以解决组件加载完成后

ShowEChart.vue 修改为

<div>
    <component :is="EChart"></component>
</div>
AI 代码解读
exprot defautl {
    data() {
        return {
            EChart: null
        }
    },
    mounted() {
        this.$nextTick(() => { this.EChart= resolve => require(['@/components/EChart.vue''],resolve)}
        );
    }
}
AI 代码解读

来看下效果
这里写图片描述

**

从此王子和公主完美的生活在一起

**
这里写图片描述

相关文章
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
112 1
|
3月前
|
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
747 0
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
571 1
微信小程序使用echarts图表(ec-canvas)
|
5月前
|
使用Vue+Textarea实现在文本内容变化时自适应高度
这篇文章提供了Vue 2和Vue 3中实现Textarea在文本内容变化时自适应高度的示例代码和方法。
413 0
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
18天前
|
vue使用iconfont图标
vue使用iconfont图标
103 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
55 1
vue学习第一章

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等