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

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

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

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

这里写图片描述

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

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

prompt 中的内容肯定是动态的

ShowEChart.vue

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

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

import EChart from '@/components/EChart.vue';

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

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

ShowEChart.vue 修改为

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

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

**

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

**
这里写图片描述

相关文章
|
1月前
|
JavaScript
vue基于vw实现移动端自适应
vue基于vw实现移动端自适应
19 0
|
2月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
42 0
|
2月前
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
57 0
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
1月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
2月前
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
25 0
|
3月前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
24 0
|
3月前
|
JavaScript 小程序 Java
基于Java的大学生汉服租赁网站的设计与实现(亮点:在线支付、ECharts图表展示、完整下单流程、视频点播、点赞评论互动)
基于Java的大学生汉服租赁网站的设计与实现(亮点:在线支付、ECharts图表展示、完整下单流程、视频点播、点赞评论互动)
34 0
|
6天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
32 3
|
1天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0