vue中动态加入ECharts图表时,ECharts宽度自适应/不能100%撑开
2018-02-28 11:36
701 查看
首先上图吧, 关于vue动态加入echarts时,宽度不能100%的问题,首先上图
如图,echarts中的canvas的width才500,显然不对呀,右边还有那么大的一片空白,需要说明下交互步骤
看看代码,
按钮触发click方法 显示弹窗或者动态加载组件
prompt 中的内容肯定是动态的
ShowEChart.vue
这里应该echart能显示如上图了,但是宽度没打开,
换成 imp 也是一样的
思其原因还是prompt还没渲染完整紧着echart也加载,echart的宽度根据具父元素的宽度适应的渲染,给父元素一个确定宽度也可以撑开,也不是好办法,或者setTimeout也行
最好的还是利用vue的mounted 可以解决组件加载完成后
ShowEChart.vue 修改为
来看下效果
**
如图,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)} ); } }
来看下效果
**
从此王子和公主完美的生活在一起
**相关文章推荐
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- [ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- vue+echarts 动态绘制图表以及异步加载数据
- 苹果,谷歌浏览器对设置了100%的DIV层宽度不能自适应,部分网页被隐藏,解决办法!
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- bootstrap的tab中,echarts 图表宽度设为100%之后,会出现图表宽带变为100px的情况。只有第一个正常
- highcharts图表切换后不能自适应百分比宽度
- Vue使用echarts数据动态更新,Y轴刻度固定或者自适应
- Echarts一个页面多图图表宽度自适应解决方案
- echarts图表自适应,容器宽度设置为百分数,但是图表显示不全,缩到一起
- Echarts图表通过Ajax动态更新数据
- 百度echart图表宽度自适应问题的一种解决思路
- 使用Echarts图表动态加载饼图数据 pie
- echarts动态加载数据,显示柱状图,饼图图表
- echarts之bootstrap选项卡不能显示其他标签echarts图表
- Echarts 动态获取数据进行图表的展示
- 设置标题自适应宽度,动态调整大小
- vue 中使用vue-echarts-v3编写chart柱状图,动态展示数据
- 在vue中使用echarts图表
- Echarts 动态数据图表使用