echarts图表来回切换时会出现宽度失效的问题,导致图表变形,用v-if或者lazy就能解决。
子组件页面
<template>
<div style="height:600px;width:100%"></div>
</template>
<script>
export default {
name: "echarts",
props: {
tmpData:{
type:Array,
default (){
return [62, 82, 91, 84, 109, 110, 120]
}
}
},
data: function() {
return {
echart:null
};
},
mounted: function() {
this.initChart();
},
methods:{
drawPic(){
var seriesLabel = {
normal: {
position:'top',
show: true,
textBorderWidth: 1,
fontSize: 12,
textStyle:{
color: '#6700cb'
}
}
}
var tmp = this.tmpData;
this.chart.setOption({
tooltip:{
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {//整个图的位置调整
left: '0',
right: '0',
top: '3%',
// containLabel: true//y轴数据的显示
},
xAxis:{
type : 'category',
name: '日期',
data : ['7-1','7-2','7-3','7-4','7-5','7-6','7-7','7-8','7-9']
},
yAxis:{},
series : [
{
type:'bar',
barWidth:10,
label:seriesLabel,
data:tmp,
itemStyle:{
normal:{
color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset:0,
color:'#6600cc'
}, {
offset:1,
color:'#cc00cc'
}]),
}
}
}
]
})
},
initChart: function() {
this.chart = this.$echarts.init(this.$el);
this.drawPic();
}
}
};
</script>
<style scoped>
</style>
父组件页面
html代码
<el-tabs v-model="activeName">
<el-tab-pane label="收益(元)" name="first">
<echarts v-if="'first'==activeName" :tmpData="tmpData1"></echarts>
</el-tab-pane>
<el-tab-pane label="订单数" name="second">
<echarts v-if="'second'==activeName" :tmpData="tmpData2"></echarts>
</el-tab-pane>
</el-tabs>
js代码
data(){
return{
activeName:'first',
tmpData1:[62, 82, 91, 84, 109, 110, 120,80,60],
tmpData2:[62, 82, 91, 84, 109, 99, 110,120,42]
}
}