el-tabs包裹echarts柱状图，实现切换时重载动画

晚上八点半

于 2023-05-10 16:37:34 发布

阅读量911

点赞数

文章标签： echarts 前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_45259917/article/details/130604218

版权

项目需求是每当点击不同的tab时，Echarts柱状图需要重新加载并显示加载动画。实现方式包括监听tab-click事件，调用初始化方法重绘图表，并在初始化方法中删除_echarts_instance_属性以确保动画重新加载。代码示例展示了如何结合ElementUI的el-tabs组件和Echarts进行交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求每次点击tab切换不同栏目时，下方echarts柱状图需要重新加载，并展示加载动画

实现方式：

1. 设置tab-click事件，调用echarts初始化方法重载柱状图

2. 在echarts初始化方法中特别注明移除属性‘_echarts_instance_’，这是动画重新加载的关键

代码：

                <el-tabs v-model="activeName"
                    @tab-click="tabClick"
                    >
                        <el-tab-pane label="标签一" name="first">
                            <div class="pane_chart" id="first">
                                1
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="标签二" name="second">
                            <div class="pane_chart" id="second">
                                2
                            </div>
                        </el-tab-pane>
                    </el-tabs>

初始化方法：

var tabClick = (el: any) => {
    initChart(el.paneName)
}
var initChart= (id: string): ECharts => {
    var el = document.getElementById(id) as HTMLElement
    el.removeAttribute("_echarts_instance_")
    var chartEl = el
    var mchart: ECharts = init(chartEl)
    var option = {
    ...
    ...
    }
    mchart && mchart.setOption(option)

    return mchart
}

注意tabclick中获取的是el-tab-pane的name，所以设置name与表格id相同会使调用方法更加简单，

这样就实现了echarts的重载，

欢迎讨论