解决方法:
通过tab提供的click事件,点击一次,则初始化一次dom元素,之后再拿数据去画图,这个时候还是要用到nextTick,以保证dom更新完毕后再把数据渲染上去(因为数据在created就已经拿到)
<van-tabs
@click="onclick()"
v-model="active"
swipeable
color="rgb(41,135,223)"
:lazy-render="false"
>
<van-tab title="招聘漏斗">
<div
class="funnel"
ref="funnel"
>
</div>
</van-tab>
<van-tab title="招聘趋势">
<div
class="trend"
ref="trend"
>
</div>
</van-tab>
<van-tab title="招聘趋势镜像">
</van-tab>
</van-tabs>
onclick(name, title) {
// console.log(name+";"+title);
this.$nextTick(() => {
const myChart2 = this.$echarts.init(this.$refs.trend);
if (myChart2 != null) {
// 如果不存在,就进行初始化
myChart2.setOption({
grid: {
// left: "3%",
left: "-6%",
right: "4%",
bottom: "3%",
containLabel: true,
}, // grid 设置图标位置
xAxis: {
data: ["A", "B", "C", "D", "E"],
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: "line",
areaStyle: {},
},
{
data: [25, 14, 23, 35, 10],
type: "line",
areaStyle: {
color: "#ff0",
opacity: 0.5,
},
},
],
});
}
});
},