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更新。所以问题就解决啦!(我也是找了很久,解决了之后分享给大家)