我在开发时，在tab控件点击切换，那么数据不变，要不显示不正确。后面看到这位博主的文章，v-if在这里挺绝的，完美解决。
版权声明：本文为CSDN博主「前端李小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42268364/article/details/100105338
在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确
原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。
网上真的是太多太多太多坑了，服了，各种能不能用的都不先自己测试一下再贴上去，真心服了这些人。本来element tabs里面有个很好解决的办法就是在tab-pane添加上lazy='true’属性即可，不过现在已经没有这个属性了！没有了！看图，
官方已经把这个属性去掉了，那么现在要怎么修改呢，这里有一个很好办法，亲测绝对有效。
原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab。
代码如下：
<template>
<div>
<el-tabs type="card" v-model="tabItem">
<el-tab-pane label="第一页" name="tab1">
<charts v-if="'tab1' === tabItem"></charts>
</el-tab-pane>
<el-tab-pane label="第二页" name="tab2">
<charts v-if="'tab2' === tabItem"></charts>
</el-tab-pane>
<el-tab-pane label="第三页" name="tab3">
<charts v-if="'tab3' === tabItem"></charts>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import charts from "@/components/charts.vue";
export default {
name: "index",
components: {
charts
},
data(){
return {
tabItem: "tab1"
}
}
};
</script>
<style>
</style>
这里说明一下，一定要在把需要的echart图表做成组件来使用，不然的话一开始默认加载不到，页面是会报错的，一定要做成组件来使用。
组件里面的代码：
<template>
<div id="chart-part1" style="width:100%;height:160px"></div>
</template>
<script>
export default {
name: '',
data () {
return {}
},
mounted () {
this.getEchartData1();
},
methods: {
getEchartData1() {
const myChart = this.$echarts.init(
document.getElementById("chart-part1")
);
const option = {
title: {
text: "全院业务收入趋势",
textStyle: {
color: "#717785",
fontSize: 14
},
top: "12%",
left: "3%"
},
tooltip: {
trigger: "axis"
},
legend: {
top: "12%",
left: "50%",
itemWidth: 10,
itemHeight: 10,
data: ["业务", "药品", "环比"]
},
grid: {
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#cee1f0"
}
},
axisLine: {
lineStyle: {
color: "#cee1f0"
}
},
axisTick: {
inside: true
},
data: ["8.12", "8.13", "8.14", "8.15", "8.16", "8.17", "8.18"]
},
yAxis: [
{
type: "value",
name: " 万元",
nameGap: 2,
nameTextStyle: {
color: "#cee1f0"
},
splitLine: {
show: true,
lineStyle: {
color: "#cee1f0"
}
},
axisLine: {
lineStyle: {
color: "#cee1f0"
}
},
axisTick: {
show: false
}
},
{
type: "category",
name: "%",
nameGap: 2,
nameTextStyle: {
color: "#cee1f0"
},
axisLine: {
lineStyle: {
color: "#cee1f0"
}
},
axisTick: {
show: false
},
data: ["0", "50", "100"]
}
],
series: [
{
name: "业务",
type: "line",
symbol: "circle",
symbolSize: 6,
itemStyle: {
color: "#1295ff"
},
data: [30, 32, 33, 34, 35, 36, 37]
},
{
name: "药品",
type: "line",
symbol: "circle",
symbolSize: 6,
itemStyle: {
color: "#fd7c14"
},
data: [20, 21, 22, 23, 24, 25, 26]
},
{
name: "环比",
type: "line",
symbol: "circle",
symbolSize: 6,
itemStyle: {
color: "#08e4f8"
},
data: [10, 11, 12, 13, 14, 15, 16]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
},
}
}
</script>
<style lang="less" scoped>
</style>
效果如下，绝对有用，
一开始加载：
点击切换之后
如有任何问题，可以留言提问。
————————————————
版权声明：本文为CSDN博主「前端李小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42268364/article/details/100105338