如何通过点击按钮实现echarts图表的动态切换显示不同类型图表的功能？

本文共计1275个文字，预计阅读时间需要6分钟。

目录 + 点击按钮切换显示不同echarts图表 + 1、使用v-if时 + 2、使用v-show时 + 按钮点击事件实现一个页面获取多个echarts图表 + 我的心路历程 + 接下来，我具体描述了我的整体过程 + 我的最终成果是如何实现的 + 点击

目录

• 点击按钮切换显示不同echarts图表
• 1、使用v-if时
• 2、使用v-show时
• 按钮点击事件实现一个页面获取多个echarts图表
• 我的心路历程
• 接下来我具体的描述下我的最终成果是怎么实现的

点击按钮切换显示不同echarts图表

众所周知，调用echarts方法要写在mounted周期里，因为在页面处于created周期时，还得不到数据，没办法渲染到echarts图表上(具体原因查看vue生命周期)，但是当点击按钮后切换图表，涉及到是否能够找到要渲染的dom，需要结合v-if和v-show来灵活使用。

废话不多说，开始拿例子说话，没时间的直接看例子后面的结论。