tabs中使用echarts,除了第一个图表能默认显示外,当tabs切换的时候,第一个之后的可能就显示不了了,如何解决?
<template>
<div>
<el-row>
<el-col :span="24">
<el-card>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first" lazy>
<div id="user-manage"></div>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second" lazy>
<div id="config-manage"></div>
</el-tab-pane>
<el-tab-pane label="角色管理" name="third" lazy>
<div id="role-manage"></div>
</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth" lazy>
<div id="task-compensation"></div>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
activeName: "first"
};
},
methods: {
drawLine() {
const lineChart = this.$echarts.init(
document.getElementById("alarm-trend")
);
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line"
}
]
};
lineChart.setOption(option);
},
drawBar() {
const barChart = this.$echarts.init(
document.getElementById("user-manage")
);
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)"
}
}
]
};
barChart.setOption(option);
},
drawPie() {
const pieChart = this.$echarts.init(
document.getElementById("config-manage")
);
const option = {
title: {
text: "某站点用户访问来源",
subtext: "纯属虚构",
left: "center"
},
tooltip: {
trigger: "item"
},
legend: {
orient: "vertical",
left: "left"
},
series: [
{
name: "访问来源",
type: "pie",
radius: "50%",
data: [
{ value: 1048, name: "搜索引擎" },
{ value: 735, name: "直接访问" },
{ value: 580, name: "邮件营销" },
{ value: 484, name: "联盟广告" },
{ value: 300, name: "视频广告" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
pieChart.setOption(option);
},
drawGrandpa() {
const grandpaChart = this.$echarts.init(
document.getElementById("role-manage")
);
const data = [
{
name: "Grandpa",
children: [
{
name: "Uncle Leo",
value: 15,
children: [
{
name: "Cousin Jack",
value: 2
},
{
name: "Cousin Mary",
value: 5,
children: [
{
name: "Jackson",
value: 2
}
]
},
{
name: "Cousin Ben",
value: 4
}
]
},
{
name: "Father",
value: 10,
children: [
{
name: "Me",
value: 5
},
{
name: "Brother Peter",
value: 1
}
]
}
]
},
{
name: "Nancy",
children: [
{
name: "Uncle Nike",
children: [
{
name: "Cousin Betty",
value: 1
},
{
name: "Cousin Jenny",
value: 2
}
]
}
]
}
];
const option = {
series: {
type: "sunburst",
// emphasis: {
// focus: 'ancestor'
// },
data: data,
radius: [0, "90%"],
label: {
rotate: "radial"
}
}
};
grandpaChart.setOption(option);
},
drawRadar() {
const radarChart = this.$echarts.init(
document.getElementById("task-compensation")
);
const option = {
title: {
text: "基础雷达图"
},
tooltip: {},
legend: {
data: ["预算分配(Allocated Budget)", "实际开销(Actual Spending)"]
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: "#fff",
backgroundColor: "#999",
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: "销售(sales)", max: 6500 },
{ name: "管理(Administration)", max: 16000 },
{ name: "信息技术(Information Techology)", max: 30000 },
{ name: "客服(Customer Support)", max: 38000 },
{ name: "研发(Development)", max: 52000 },
{ name: "市场(Marketing)", max: 25000 }
]
},
series: [
{
name: "预算 vs 开销(Budget vs spending)",
type: "radar",
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: "预算分配(Allocated Budget)"
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: "实际开销(Actual Spending)"
}
]
}
]
};
radarChart.setOption(option);
},
handleClick(tab, event) {
switch (this.activeName) {
case "first":
this.$nextTick(() => {
this.drawBar();
});
break;
case "second":
this.$nextTick(() => {
this.drawPie();
});
break;
case "third":
this.$nextTick(() => {
this.drawGrandpa();
});
break;
case "fourth":
this.$nextTick(() => {
this.drawRadar();
});
break;
default:
this.$nextTick(() => {
this.drawBar();
});
}
}
},
mounted() {
this.drawBar();
}
};
</script>
<style scoped>
#user-manage {
height: 300px;
}
#config-manage {
height: 300px;
}
#role-manage {
height: 300px;
}
#task-compensation {
height: 300px;
}
</style>
其中的关键是handleClick函数和$nextTick函数。