<template>
<div id="app">
<div v-show="fl" id="myChart" :style="{width: '100%', height: '300px'}"></div>
<div v-show="!fl" id="myChart2" :style="{width: '100%', height: '300px'}"></div>
<button @click="change">切换</button>
</div>
</template>
<script>
let myChart
let myChart2
export default {
components: {
},
computed:{
},
data () {
return {
fl:true
}
},
created () {
},
mounted () {
this.drawLine()
this.drawLine2()
},
watch:{
// fl(newv,oldv){
// if(newv){
// console.log(myChart.resize);
// this.$nextTick(()=>{
// myChart.resize()
// })
// }
// else{
// console.log(myChart2);
// this.$nextTick(()=>{
// myChart2.resize()
// })
// }
// }
},
methods: {
change(){
this.fl = !this.fl
},
drawLine(){
// 基于准备好的dom,初始化echarts实例
myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 90]
}]
});
window.addEventListener('resize', window.addEventListener('resize',()=>{
myChart.resize()
}))
},
drawLine2(){
// 基于准备好的dom,初始化echarts实例
myChart2 = this.$echarts.init(document.getElementById('myChart2'))
// 绘制图表
myChart2.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
window.addEventListener('resize',()=>{
myChart2.resize()
})
}
}
}
</script>
<style lang="less">
#dv-full-screen-container{
background-color: #282c34;
color: white;
}
/deep/ .el-select-dropdown{
max-height: 100px!important;
}
</style>
解决犯法
也就是我代码中注释的部分。
需要你手动调用改图表的resize方法