vue弹窗里面使用echarts不显示的问题及解决
作者：呱呱•.•
这篇文章主要介绍了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);
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。