Iview-admin中如何动态更新图表数据

Question

使用iview-admin作为前端模板，对前端了解不太深入，目前想通过api请求数据更新到图表中，但iview-admin中的echart好像已经被实例化了，无法更改数据。

Answer 1

<template>
    <div ref="chart" class="chart"></div>
</template>

<style>
.chart {
    width: 100%;
    height: 400px;
}
</style>

<script>
    export default {
        data() {
            return {
                myChart: null,
                option: {
                    // echarts初始化配置数据
                }
            }
        },
        methods: {
            chartResizeFn() {
                this.$nextTick(() => {
                    this.myChart.resize();
                });
            },
            // 选项卡切换
            tabSwitchFn(){
                this.chartResizeFn();
            }
        },
        mounted() {
            this.myChart = this.myChart || this.echarts.init(this.$refs.chart);
            // 此处为ajax获取数据示例
            // axios.get('url').then((data)=>{
                // this.option=data.option;
            // })
            
            this.myChart.setOption(this.option);
            
            this.$nextTick(() => {
                // 绑定缩放
                window.addEventListener("resize", this.chartResizeFn);
            });
        },
        destroyed() {
            // 销毁后解绑resize事件
            window.removeEventListener("resize", this.chartResizeFn);
        }
    };
</script>