vue框架二级路由echarts不显示问题解决_vue子组件echarts图不加载

vue组件二级路由部分

<template>
	<div>
		<ul class="routerbtn">
			<li>
				<router-link to="/Equipment/realdata1" @click.native="transformer"></router-link>
			</li>
			<li>
				<router-link to="/Equipment/realdata2" @click.native="GIS"></router-link>
			</li>
			<li>
				<router-link to="/Equipment/realdata3" @click.native="capacitor"></router-link>
			</li>
			<li>
				<router-link to="/Equipment/realdata4" @click.native="cabinet"></router-link>
			</li>
		</ul>
		<sbxx></sbxx>
		<video1></video1>
		<router-view></router-view>
	</div>
</template>

echarts单组件

<template>
	<div>
		<div id="chart3" style="width:100%;height:100%;" ref="echart"></div>
	</div>
</template>
 
<script>
	export default {
		name: 'echarts_L2',
		data() {
			return {
 
			}
		},
		mounted() {
			// this.echartss();
			let echarts = require('echarts');
			// var myChart = echarts.init(document.querySelector('#demo3'));
			var option = {
				tooltip: {
					trigger: 'item'
				},
				grid: {
					left: "-10%",
					right: "2%",
					width: "90%",
					bottom: "2%",
					top: "2%",
					containLabel: true
				},
				xAxis: {
					type: "value",
					splitLine: {
						show: false
					},
					axisLabel: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					}
				},
				yAxis: [{ //名称
					type: 'category',
					offset: -10,
					position: "left",
					axisLine: {
						show: false
					},
					inverse: false,
					axisTick: {
						show: false
					},
					axisLabel: {
						interval: 0,
						color: "#fff",
						align: "left",
						verticalAlign: "bottom",
						lineHeight: 32,
						fontSize: 16
					},
					data: ['母线运行电压', '微水实时数据', 'SF6泄露数值', 'SF6实时数据',]
				}, ],
				series: [{
						zlevel: 1,
						type: "bar",
						barGap: "10%",
						barWidth: "15px",
						animationDuration: 1500,
						align: "center",
						itemStyle: {
							normal: {
								barBorderRadius: 4
							}
						},
						data: [{
								value: 10,
								itemStyle: {
									color: "#11DCBEFF"
								}
							},
							{
								value: 80,
								itemStyle: {
									color: "#11DCBEFF"
								}
							},
							{
								value: 60,
								itemStyle: {
									color: "#11DCBEFF"
								}
							},
							{
								value: 40,
								itemStyle: {
									color: "#11DCBEFF"
								}
							},
							
						],
					},
					{
						type: "bar",
						barWidth: 15,
						barGap: "-100%",
						margin: "0",
						tooltip: {
							show:false
						},
						data: [100, 100, 100, 100, 100],
						textStyle: {
							//图例文字的样式
							fontSize: 10,
							color: "#fff"
						},
						itemStyle: {
							normal: {
								color: "#FFF9F3",
								//width:"100%",
								fontSize: 10,
								barBorderRadius: 6
							},
						}
					}
				],
			}
			// myChartLine.setOption(option);
			this.$nextTick(() => {
			        var charts = echarts.init(this.$refs.echart)
			        charts.clear()
			        charts.resize()
			        charts.setOption(option)
			 })
			
		}
	}
</script>

二级路由出现echarts不加载，由于初始化时dome还未加载。

所以会出现以下报错

            this.$nextTick(() => {
                    var charts = echarts.init(this.$refs.echart)
                    charts.clear()
                    charts.resize()
                    charts.setOption(option)
             })

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。所以问题就解决啦！（我也是找了很久，解决了之后分享给大家）