一、项目介绍
首先我先讲一下我的项目 antd vue 里面的tabs 选项卡切换 每个选项卡里面都有一个柱状图
二、遇到的问题
请求后台接口的数据 已经返回来了 但我前端这里 测试环境下 三个柱状图都可以显示出来 但在模拟生产环境下 就出现了问题 第一个选项卡 里面的柱状图始终显示不出来,第二个,第三个都可以正常显示
三、解决方法
后来我反复研究发现 原来是 v-if v-else 影响的 在柱状图的组件 内 不要写任何关于v-if v-else 之类的 v-show 没试过 但尽量还是不要写的好
<template>
<!--负载情况-->
<div :style="{ padding: '0 0 15px 15px',borderBottom:'25px solid #f0f2f5' }">
<div ref="echartestOne" :style="{width:'100%',height:'700px'}">
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "NodeIndexDialog",
props: {
data:{
type: Array,
},
datax:{
type: Array,
},
datay:{
type: Array,
},
},
data(){
return {
// MobileVisible:false,
// PcVisible:false,
xAxisdata:[],
yAxisdata:[],
}
},
// created(){
// let isMobile = navigator.userAgent.indexOf('Mobile')>-1;
// if(isMobile){
// this.MobileVisible=true;
// this.PcVisible=false;
// }else{
// this.PcVisible=true;
// this.MobileVisible=false;
// }
// },
mounted(){
console.log('data',this.data);
console.log('mounted()');
this.$nextTick(function () {
this.xAxisdata=this.datax;
this.yAxisdata=this.datay;
console.log('x',this.xAxisdata);
console.log('y',this.yAxisdata);
this.drawLine();
});
},
methods:{
drawLine(){
let myChart = echarts.init(this.$refs.echartestOne);
console.log('dom',myChart);
let option = {
tooltip: {
trigger:'axis',
axisPointer:{ // 坐标轴指示器,坐标轴触发有效
type:'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left:'3%',
right:'4%',
bottom:'3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.datax,
axisLabel:{
interval:0, //设置这里
formatter:function(value){
return value.split("").join("\n")
},
textStyle:{
fontSize:14,
}
},
},
yAxis: {
type: 'value'
},
series: [{
data: this.datay,
type: 'bar',
itemStyle:{
normal:{
color:'#1890ff'
}
},
barWidth:'35', //---柱形宽度
barCategoryGap:'20%', //---柱形间距
}]
};
myChart.setOption(option);
//让图表自适应
window.addEventListener("resize",function(){
myChart.resize() // myChart 是实例对象
})
},
}
}
</script>
<style scoped>
</style>