vue弹窗里面使用echarts不显示的问题及解决
前言
弹出层中插入echarts图表,没有报错,但是图表加载不出来
此弹出层没有用element 的dialog 对话框,用的自己封装的组件,但是出现的问题是一样的
原因分析
弹出层 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。
弹出层组件会监听 visible 的状态,当状态为 true 时,立刻触发 open 事件,但这个时候 弹出层 的内容还没有渲染。
因为 Vue 组件通过 $emit 触发的事件并不是异步执行的,而是同步执行。
解决方式
一、nextTick
this.$nextTick(() => { // 执行echarts方法 this.initEcharts() })
二、setInterval
setInterval(() => { // 执行echarts方法 this.initEcharts() }, 500);
弹出层组件和画图方法:
<popup :tClick="retreatFromSave" :tBoot="organizationUp" tWidth='1080px'> <div slot="main" class="teamwork-text-nr"> <div class="line">实景图</div> <!-- 图表 --> <div id="sCharts" style="height: 500px;"></div> </div> <div slot="footer" style="text-align: right;padding-right: 30px;"> <jurisbtn tFloat="none" :tClick="retreatFromSave" tName="关闭" type="primary"></jurisbtn> </div> </popup>
// 图表 initEcharts() { const myChart = this.$echarts.init(document.getElementById('sCharts')) const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, xAxis: [ { type: 'category', data: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ], axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '总体积', min: 0, max: 10, interval: 1, axisLabel: { formatter: '{value} m³' } }, { type: 'value', name: '使用负荷', min: 0, max: 100, interval: 10, axisLabel: { formatter: '{value} %' } } ], series: [ { name: '总体积', type: 'bar', data: [2.0, 4.9, 5.5, 2.2, 4.6, 6.7, 5.6, 6.2, 3.6, 2.0, 6.4, 3.3], itemStyle: { normal: { color: '#d0e17d' } } }, { name: '使用负荷', type: 'line', yAxisIndex: 1, data: [100, 22, 33, 45, 63, 80, 20, 23, 23, 65, 12, 6.2], itemStyle: { normal: { color: '#898989' } } } ] } myChart.setOption(option); },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
element中el-cascader级联选择器只有最后一级可以多选
本文主要介绍了element中el-cascader级联选择器只有最后一级可以多选,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01Vue ElementUi同时校验多个表单(巧用new promise)
这篇文章主要介绍了巧用new promise实现Vue ElementUi同时校验多个表单功能,实现的方法有很多种,本文给大家带来的是一种比较完美的方案,需要的朋友可以参考下2018-06-06vue中使用[provide/inject]实现页面reload的方法
这篇文章主要介绍了在vue中使用[provide/inject]实现页面reload的方法,文中给大家提到了在vue中实现页面刷新不同的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
最新评论