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

项目需求每次点击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的重载，

欢迎讨论